MishMash

HTML Document – Example with semantic elements

HTML Document – Example with semantic elements
Photo by Jackson Sophat / Unsplash

Example of Semantic elements structure of HTML Document
HTML 5 Tags: body, header, nav, main, article, section, aside, footer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Document</title>
</head>
<body>
  <header> <!--site header-->
    <a href="/" title="home">
      <img src="logo.png" alt="logo">
    </a>
 
    <nav aria-label="primary"> <!--main nav-->
    </nav>
    <form action=""></form>
  </header>
 
  <nav aria-label="secondary"> <!--secondary nav-->
  </nav>
 
  <main> <!--main content-->
    <article>
      <h1></h1> <!--main heading-->
      <p></p>
      <h2></h2> <!--secondary heading-->
      <p></p>
    </article>
  </main>
 
  <aside aria-label="sidebar"> <!--sidebar-->
    <section class="section-with-image"> <!--items in the sidebar-->
      <h2></h2>
      <img src="" alt="">
      <p></p>
    </section>
 
    <style>
      .section-with-image {
        display: flex;
        flex-direction: column;
      }
      .section-with-image img {
        order: -1;
      }
      </style>
 
    <section>
      <header>
        <h2>Header</h2>
        <img src="" alt="">
        <p>hello :)</p>
      </header>
      <p>content</p>
    </section>
  </aside>
 
  <footer> <!--site footer-->
  </footer>
</body>
</html>

Read next