1. What are Semantic Elements?

Semantic elements clearly describe their meaning in a way that is both human- and machine-readable. Using semantic HTML improves the accessibility and SEO of your web pages.

2. Common Semantic Elements

Here are some of the most commonly used semantic elements in HTML:

• <header>: Represents introductory content or a set of navigational links.
• <nav>: Defines a section of navigation links.
• <main>: Specifies the main content of the document.
• <section>: Defines a section in a document, like a chapter in a book.
• <article>: Represents independent content, like a blog post or a news article.
• <aside>: Contains content indirectly related to the main content, like sidebars or advertisements.
• <footer>: Defines the footer of a document or a section.
• <figure>: Represents self-contained content, like images or diagrams, often with a caption.
• <figcaption>: Provides a caption for the <figure> element.
• <mark>: Highlights text to draw attention to it, like highlighting search terms.

3. Example of Semantic Elements in Action

This example demonstrates how to use semantic elements to structure a simple webpage:

<header>
    <h1>My Blog</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

<main>
    <article>
        <h2>Blog Post Title</h2>
        <p>This is a sample blog post.</p>
    </article>

    <aside>
        <p>Related links and advertisements.</p>
    </aside>
</main>

<footer>
    <p>My Blog © 2023</p>
</footer>
                

Result:

4. Benefits of Using Semantic HTML

• Improves accessibility by making the content structure clearer for screen readers.
• Enhances SEO by helping search engines understand the content hierarchy.
• Makes the code more readable and maintainable for developers.
• Provides a better user experience by following web standards.

5. Additional Essential Semantic Elements

Here are six more semantic elements that are useful for structuring content on a webpage:

• <details>: Used to create a disclosure widget that users can open and close to reveal more content.
• <summary>: Acts as the summary, or label, for a <details> element, indicating what the hidden content is about.
• <time>: Represents a specific time or date, which can be easily understood by both humans and machines.
• <output>: Displays the result of a calculation or a user action, commonly used with forms.
• <progress>: Displays a progress bar, which shows how much of a task has been completed.
• <meter>: Represents a scalar measurement within a known range, such as temperature or a rating.

6. Examples of Additional Semantic Elements

The following examples demonstrate how these additional semantic elements can be used:

Using <details> and <summary>

<details>
    <summary>More Information</summary>
    <p>This is additional information that can be revealed by clicking on the summary.</p>
</details>
        

Result:

Using <time>

<time datetime="2023-11-01">November 1, 2023</time>
        

Result: November 1, 2023

Using <output> with Labels

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <label for="a">Value A:</label>
    <input type="number" id="a" name="a" value="10">
    +
    <label for="b">Value B:</label>
    <input type="number" id="b" name="b" value="5">
    => <output name="result" for="a b">15</output>
</form>
        

Result:

Using <progress>

<progress value="70" max="100">70%</progress>
        

Result: 70%

Using <meter>

<meter min="0" max="100" value="80">80</meter>
        

Result: 80