A semantic element clearly describes its meaning to both the browser and the developer.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Template</title>
</head>
<body>
<!-- HEADER -->
<header>
<h1>Website</h1>
</header>
<!-- NAVIGATION -->
<nav class="nav-bar">
<h3>Navigation bar</h3>
<ul>
<li><a href="/">Page1</a></li>
<li><a href="/">Page2</a></li>
<li><a href="/">Page3</a></li>
</ul>
</nav>
<!-- BLOG ARTICLES -->
<div>
<article>
<section class="first-section">
<h3>This is a article</h3>
<em>Posted on <time>Nov 1st, 2021</time></em><span> By James Smith</span>
</section>
<section class="second-section"></section>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi eligendi hic est autem in sapiente earum
ipsa necessitatibus. Officia quod
dolorum quidem nulla dolores totam necessitatibus reprehenderit fuga ullam explicabo?</p>
</section>
</article>
</div>
<!-- SIDEBAR -->
<aside class="side-bar">
<h4>About</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ducimus dolores rem.</p>
</aside>
<!-- FOOTER -->
<footer class="footer"></footer>
<p>© James Smith</p>
</footer>
</body>
</html>