How to mark up a page with semantic tags

Short answer

Divide the page into areas with tags that describe their role:

<style>
  header, nav, main, aside, footer { padding: 6px 10px; margin: 4px 0; border: 1px dashed silver; }
</style>
 
<header>Logo · <nav><a href="#">Home</a> · <a href="#">Blog</a></nav></header>
<main>
  <article>
    <h1>How we roast coffee</h1>
    <p>An article text…</p>
  </article>
  <aside>Related: Ten ways to brew</aside>
</main>
<footer>© 2026 The Bean</footer>

What each tag means

• <header> — the header of a page or section: logo, name, menu.
• <nav> — the main navigation.
• <main> — the main content, there is one per page.
• <article> — a self-contained entry: an article, a post, a product card.
• <section> — a thematic section with a heading.
• <aside> — extra content: related articles, ads, notes.
• <footer> — the footer: contacts, copyright, links.

Why it matters

Visually these tags do not differ from <div>. But screen readers build a page map from them and let users jump straight to the menu or the main text. Search engines better understand what is important, and the code is easier to read.

Common mistake

Semantic tags are chosen by looks, or <section> replaces every <div>. If a block is needed only for styling — a grid, a gap, a background — it is still a <div>. A semantic tag describes the meaning of the content, not how it looks.