HTML5 Semantic Elements

Introduction

HTML5 introduced a new set of semantic elements to clearly define different parts of a web page. Semantic elements are HTML elements that represent their content with clarity to both the browser and the developer. In this tutorial, you will learn about these semantic elements and how to use them correctly in your web pages.

Why Use Semantic Elements?

Before HTML5, developers used <div> elements to separate different parts of their web pages. While <div> elements are functional, they don't provide any information about their content.

Semantic elements, on the other hand, clearly define their content which makes your HTML easier to read and maintain. Furthermore, they are also beneficial for accessibility and SEO (Search Engine Optimization) because they clearly define the structure of the document.

HTML5 Semantic Elements

Let's explore some of the commonly used HTML5 semantic elements:

<header> - This element represents a container for introductory content or a set of navigational links. Typically contains site identity (logo), main site navigation, search box, etc.

<header>
  <h1>Company Logo</h1>
  <nav>
    <a href="#">Home</a> | 
    <a href="#">About</a> | 
    <a href="#">Contact</a>
  </nav>
</header>

<nav> - This element is intended for major block of navigation links. Not all groups of links on a page need to be in a <nav> element.

<nav>
  <a href="#">Home</a> |
  <a href="#">About</a> |
  <a href="#">Contact</a>
</nav>

<main> - This element contains the main content of the document that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, header or footer information.

<main>
  <h1>Welcome to Our Website</h1>
  <p>This is the main content of the website.</p>
</main>

<article> - This element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.

<article>
  <h2>HTML5 Semantic Elements</h2>
  <p>This is a brief article about HTML5 semantic elements.</p>
</article>

<section> - This element represents a standalone section of a document, which doesn't have a more specific semantic element to represent it.

<section>
  <h2>About Us</h2>
  <p>This section contains information about us.</p>
</section>

<footer> - This element represents a container for the footer of a document or a section. It typically contains information about the author of the section, copyright information, and links to related documents.

<footer>
  <p>Copyright © 2022</p>
</footer>

Conclusion

Understanding and using HTML5 semantic elements is a step towards writing more accessible, clear, and SEO-friendly HTML. It not only benefits the machines (like browsers, search engines) that read your code but also makes it easier for developers to understand the structure of your web pages. So, start using these semantic elements in your web projects and make your HTML more meaningful.