Semantic HTML

HTML5 Semantic Elements:

HTML5 introduced new semantic elements. Semantics in HTML means that certain elements have a meaning or purpose attached to them e.g <header>, <footer>, <article>, <aside> and <section> to better define the meaning of web content. As high performance engineers, we should always strive to write semantic html as it makes development more intuitive, easy to make changes and enhance collaboration with other developers. Here is an example of a semantic HTML structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Semantic Structure</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">Contact</a>
      </nav>
    </header>
    <main>
      <article>
        <section>
          <h2>Article Title 1</h2>
          <p>
            This is the first section of the article. It provides some
            introductory information
          </p>
        </section>
        <section>
          <h2>Article Title 2</h2>
          <p>
            This is the second section of the article. It goes into more details
          </p>
        </section>
      </article>
      <aside>
        <h3>Related Articles</h3>
        <ul>
          <li><a href="#">Related Article 1</a></li>
          <li><a href="#">Related Article 2</a></li>
          <li><a href="#">Related Article 3</a></li>
        </ul>
      </aside>
    </main>
    <footer>
      <p>&copy; 2024 My Website. All rights reserved</p>
    </footer>
  </body>
</html>

The header <header> tag/element is a semantic tag which defines the top part of a web document, it represents the introductory content.
An article element <article> is a container element for our block scope i.e the body.
Aside tag <aside> represents a portion of the document whose content is only indirectly related to the document’s main content (e.g., sidebars, advertisements, pull quotes).
The footer tag <footer> represents the bottom part of the page, typically containing information about the author, links to related documents, and other metadata.
The section tag <section> represents a standalone section of content within a document, typically with a heading, that groups related content together (e.g., chapters, tabbed content).
The nav tag <nav> is used to create a set of navigation links.

NB: We should only use the div tag <div> when we do not want to attach meaning to a certain container. The div tag <div> is like a quick fix in HTML.