HTML Semantic Elements

Semantic HTML elements clearly describe their meaning in a human- and machine-readable way. These elements provide better structure and accessibility for web pages, making it easier for search engines and assistive technologies to understand the content.

1. The <header> Element

The <header> element represents introductory content or a set of navigational links for a section or page.

<header>
    <h1>Welcome to My Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

2. The <nav> Element

The <nav> element defines a set of navigation links.

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

3. The <main> Element

The <main> element represents the dominant content of the document.

<main>
    <h2>Main Content</h2>
    <p>This is the main section of the web page.</p>
</main>

4. The <section> Element

The <section> element defines a section in a document, typically with a heading.

<section>
    <h2>Section Title</h2>
    <p>Section content goes here.</p>
</section>

5. The <article> Element

The <article> element represents a self-contained piece of content that can be independently distributed.

<article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
</article>

6. The <aside> Element

The <aside> element represents content that is tangentially related to the main content.

<aside>
    <p>Related content or advertisements can go here.</p>
</aside>

7. The <footer> Element

The <footer> element represents footer content for its nearest sectioning content or sectioning root element.

<footer>
    <p>Website Footer</p>
</footer>

8. The <figure> and <figcaption> Elements

The <figure> element represents self-contained content, such as images, diagrams, or code snippets, and the <figcaption> element represents a caption for the <figure> element.

<figure>
    <img src="image.jpg" alt="A description of the image">
    <figcaption>This is an image caption.</figcaption>
</figure>

Conclusion

HTML semantic elements provide meaningful structure to your web pages. They enhance readability, accessibility, and search engine optimization by clearly defining different parts of the content. Using these elements correctly will result in well-structured and easier-to-maintain web pages.