Semantic markup

A web page consists of large parts: a header with a logo, a menu, the main content, a sidebar, a footer. Semantics is the meaning of markup. Semantic tags name a part of the page by its role, so the browser, search engines and screen readers understand where everything is.

div and span

The <div> tag is a block with no meaning of its own, just a container. <span> is an equally neutral container, but an inline one inside text:

<div style="background: #eef; padding: 8px;">
  A div block takes the full width.
  <span style="background: #fd8;">A span takes only the width of its text.</span>
</div>

They are used when you need to group or style something and no suitable meaningful tag exists.

Meaningful tags

They look like a regular <div> — the only difference is meaning.

A page skeleton

Let us build a typical page. Borders are added in CSS so you can see the block edges:

<style>
  header, nav, main, aside, footer { border: 1px dashed #888; padding: 6px; margin: 4px 0; }
</style>
 
<header>The Bean coffee shop</header>
<nav>
  <a href="#">Menu</a> · <a href="#">About</a> · <a href="#">Contacts</a>
</nav>
<main>
  <h1>Our menu</h1>
  <p>Coffee, tea and pastries every day.</p>
</main>
<aside>Croissants are on sale today.</aside>
<footer>© 2026 The Bean coffee shop</footer>

Arranging blocks into columns is the job of CSS; HTML only describes which parts the page has.

article and section

An <article> makes sense on its own: you could move it to another site or a newsletter and it would still be clear. A <section> is a thematic part of something bigger, usually with a heading:

<article>
  <h2>How to brew pu-erh</h2>
  <section>
    <h3>Teaware</h3>
    <p>You will need a clay teapot.</p>
  </section>
  <section>
    <h3>Timing</h3>
    <p>The first steep takes ten seconds.</p>
  </section>
</article>

A header and footer inside an article

<header> and <footer> exist not only for the whole page but also for a single article:

<article>
  <header>
    <h2>We are opening a second coffee shop</h2>
    <p><small>Anna, 12 May</small></p>
  </header>
  <p>The new coffee shop will open next to the park.</p>
  <footer><a href="#">All news</a></footer>
</article>

Why it matters

A screen reader lets you jump straight to <main> or <nav> without listening to the whole header. Search engines understand better where the main text is. And a developer finds code easier to read when it has clear names instead of ten identical <div> elements.

Common mistake

A page made entirely of <div> elements works, but says nothing about itself — such markup is called "div soup". First think whether a suitable meaningful tag exists, and only if not, use <div>. And remember: there is one <main> per page, and a <section> without a heading should usually be a <div> instead.