Replace your anonymous divs with tags that give meaning to your structure.
Open this lesson in KodokonA page built entirely out of div elements works, but it says nothing: not to screen readers, not to search engines, and not to the colleague who will pick up your code in six months. Semantic tags describe the role of each area: header, nav, main, article, section, footer.
<body>
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/articles">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>The blog for curious devs</h1>
</main>
<footer>
<p>© 2026 Kodokon. All rights reserved.</p>
</footer>
</body>header groups the page header (logo, navigation), footer the closing information (legal notices, secondary links). main holds the main content and must be unique on the page. nav marks a navigation area: the main navigation, a breadcrumb trail or a table of contents.
The trickiest distinction: article versus section. Rule of thumb: if the block makes sense out of context (a blog post, a comment, a product card), it's an article. If it's a thematic grouping inside a piece of content, with its own heading, it's a section.
<main>
<article>
<h1>Understanding semantic HTML</h1>
<section>
<h2>Accessibility</h2>
<p>Screen readers rely on the
structure to navigate.</p>
</section>
<section>
<h2>SEO</h2>
<p>Search engines understand the page better.</p>
</section>
</article>
</main>Mental exercise: on an e-commerce product page, how would you mark up the list of customer reviews? Each review has an author, a date and content that stands on its own: each review is therefore an article, and the "Customer reviews" block that groups them, with its heading, is a section.