HTML Tutorials

HTML - Complete working code for Advanced HTML Attributes

Complete Working Code for Advanced HTML Attributes

This complete working example shows how to use custom data-* attributes, class, id, and style in HTML, as well as how to use CSS and JavaScript for basic interaction:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Advanced HTML Attributes Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
        #mainContent {
            padding: 20px;
            border: 1px solid black;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="mainContent" class="highlight">
        <p>This text is styled by both an ID and a class.</p>
    </div>
    <p style="color: red; font-size: 16px;">This paragraph has inline styles.</p>
    <article id="post" data-author="Jay" data-published="2024-05-04">
        <h2>Article with Custom Data Attributes</h2>
        <p>Data stored in this element can be used by scripts.</p>
    </article>
    <button onclick="displayData()">Display Article Author</button>
    
    <script>
        function displayData() {
            let article = document.querySelector('#post');
            alert('Article written by: ' + article.dataset.author + ', published on: ' + article.dataset.published);
        }
    </script>
</body>
</html>

Explanation of the Code

HTML Structure: The <head> and <body> elements make up the structure of this page. The style, title, and meta charset definitions are contained in the <head>.

CSS Style:

  • .highlight: Give any element with this class a yellow background.
  • #mainContent: Adds margin, padding, and border to an element with the ID mainContent.

Body Content

  • Div Element: Makes use of a class and an id. The class can be shared with other components, but the id is unique and used for a particular style.
  • Paragraph with Inline Style: Shows how to directly style an HTML tag, changing the font size and color of the content.
  • Article with Data Attributes: Has unique data-* attributes that can be accessed via JavaScript to store extra data that is not displayed on the page.
  • JavaScript function and button: When the button is pressed, it launches a JavaScript function that retrieves the article's data properties and presents them in an alert.

logo

HTML

Beginner 5 Hours

Complete Working Code for Advanced HTML Attributes

This complete working example shows how to use custom data-* attributes, class, id, and style in HTML, as well as how to use CSS and JavaScript for basic interaction:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Advanced HTML Attributes Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
        #mainContent {
            padding: 20px;
            border: 1px solid black;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="mainContent" class="highlight">
        <p>This text is styled by both an ID and a class.</p>
    </div>
    <p style="color: red; font-size: 16px;">This paragraph has inline styles.</p>
    <article id="post" data-author="Jay" data-published="2024-05-04">
        <h2>Article with Custom Data Attributes</h2>
        <p>Data stored in this element can be used by scripts.</p>
    </article>
    <button onclick="displayData()">Display Article Author</button>
    
    <script>
        function displayData() {
            let article = document.querySelector('#post');
            alert('Article written by: ' + article.dataset.author + ', published on: ' + article.dataset.published);
        }
    </script>
</body>
</html>

Explanation of the Code

HTML Structure: The <head> and <body> elements make up the structure of this page. The style, title, and meta charset definitions are contained in the <head>.

CSS Style:

  • .highlight: Give any element with this class a yellow background.
  • #mainContent: Adds margin, padding, and border to an element with the ID mainContent.

Body Content

  • Div Element: Makes use of a class and an id. The class can be shared with other components, but the id is unique and used for a particular style.
  • Paragraph with Inline Style: Shows how to directly style an HTML tag, changing the font size and color of the content.
  • Article with Data Attributes: Has unique data-* attributes that can be accessed via JavaScript to store extra data that is not displayed on the page.
  • JavaScript function and button: When the button is pressed, it launches a JavaScript function that retrieves the article's data properties and presents them in an alert.

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.