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>
