Semantic Elements

Instead of marking everything as <div>, HTML5 provides semantic tags: header, nav, main, article, aside, footer — they describe what a block MEANS, not just how it looks.

Example

<header><h1>Site name</h1></header>
<nav><a href="/">Home</a></nav>
<main>
  <article><h2>Article heading</h2><p>Article text...</p></article>
</main>
<footer><p>&copy; 2026</p></footer>

▶ Try it in the editor

Task

Add an aside with a short "Related articles" note inside main, after the article.

Related tools

The <header> tag

Purpose of <header>: introductory content for a page or section (logo, navigation, heading).

The <main> tag

Purpose of <main>: the page's unique primary content, excluding repeated elements.

The <article> tag

Purpose of <article>: a self-contained block of content (a blog post, comment, product card).