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">
  <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>
  <header> <!--site header-->
    <a href="/" title="home">
      <img src="logo.png" alt="logo">
    <nav aria-label="primary"> <!--main nav-->
    <form action=""></form>
  <nav aria-label="secondary"> <!--secondary nav-->
  <main> <!--main content-->
      <h1></h1> <!--main heading-->
      <h2></h2> <!--secondary heading-->
  <aside aria-label="sidebar"> <!--sidebar-->
    <section class="section-with-image"> <!--items in the sidebar-->
      <img src="" alt="">
      .section-with-image {
        display: flex;
        flex-direction: column;
      .section-with-image img {
        order: -1;
        <img src="" alt="">
        <p>hello :)</p>
  <footer> <!--site footer-->