QuerySquish.com

In the previous lesson, we learned about HTML lists. Now, let's learn about HTML semantic elements and how to use them to improve the structure and accessibility of your web pages.

What are Semantic Elements?

Semantic elements clearly describe their meaning in a human- and machine-readable way. They help improve the accessibility and SEO of your web pages.

Common Semantic Elements

Here are some common semantic elements that you will use frequently:

• <header>: Defines a header for a document or section
• <nav>: Defines a container for navigation links
• <section>: Defines a section in a document
• <article>: Defines an independent, self-contained content
• <aside>: Defines content aside from the content it is placed in
• <footer>: Defines a footer for a document or section
• <main>: Defines the main content of a document
• <figure>: Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
• <figcaption>: Defines a caption for a <figure> element

Example Usage

Let's see how to use some of these semantic elements in an HTML document:

    <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>

    <main>
        <section>
            <h2>About Me</h2>
            <p>This is the about section.</p>
        </section>

        <article>
            <h2>My Article</h2>
            <p>This is an article.</p>
        </article>

        <aside>
            <h2>Related Links</h2>
            <p>This is an aside section.</p>
        </aside>
    </main>

    <footer>
        <p>Footer content goes here.</p>
    </footer>