Skip to main content

🙋🏻 HTML5 Semantic Elements

HTML5 introduces new semantic elements that provide more meaningful information about the content of a web page. These elements help search engines and screen readers understand the structure of a web page, making it more accessible and SEO-friendly.

Some of the new semantic elements introduced in HTML5 include:

  • <header>: This element represents a group of introductory or navigational aids, such as a logo, site navigation, or search form.
  • <nav>: This element represents a section of a page that contains navigation links.
  • <main>: This element represents the main content of a page.
  • <article>: This element represents a self-contained piece of content, such as a blog post or news article.
  • <section>: This element represents a thematic grouping of content, such as a chapter in a book or a section of a web page.
  • <aside>: This element represents content that is tangentially related to the content around it, such as a sidebar or pull quote.
  • <footer>: This element represents a group of footer information, such as copyright information, contact details, or site navigation.

By using these new semantic elements, you can create a more structured and accessible web page that is easier for search engines and screen readers to understand.

Example​

Here's an example of how you can use these new semantic elements in an HTML document:

index.html
<!DOCTYPE html>
<html>
<head>
    <title>My First HTML5 Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>My First Blog Post</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </article>
        <section>
            <h2>About Me</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>
        <aside>
            <h3>Related Links</h3>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2021 My Website. All rights reserved.</p>
    </footer>
</body>
</html>
http://.../index.html

Welcome to My Website

My First Blog Post

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

About Me

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

© 2021 My Website. All rights reserved.

In this example, we've used the <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> elements to create a structured web page with meaningful content.

By using these new semantic elements, you can improve the accessibility and SEO-friendliness of your web pages, making them easier for search engines and screen readers to understand.

Conclusion​

HTML5 introduces new semantic elements that provide more meaningful information about the content of a web page. By using these elements, you can create a more structured and accessible web page that is easier for search engines and screen readers to understand. This can help improve the accessibility and SEO-friendliness of your web pages, making them more user-friendly and discoverable.