Semantisk HTML: *standardinställningarna* är redan bra

Innan du skriver CSS, skriver du HTML. Bra.

Vad betyder "semantisk"

Använd taggen som beskriver syftet, inte utseendet:

• <nav> för navigering, inte <div class="nav">.
• <main> för huvudinnehållet.
• <article> för innehål som står för sig själv (ett inlägg, ett produktkort).
• <aside> för relaterat men separat innehål.
• <header> / <footer> för rubriker och sidfötter (både för webbplatsen och för en <article>).
• <section> för tematiska grupperingar med titel.
• <button> för åtgärder, <a> för navigering. Aldrig tvärtom.

Omedelbar nytta

Gratis tillgänglighet. Skärmläsare förstår struktur utan ARIA. Tangentbordsanvändare navigerar efter landmarks.

Bättre SEO. Sökmotorer förstår hierarki.

Enklare CSS. article > header > h1 är en användbar väljare. Om allt är <div>, behöver du klasser för allt.

Färre klasser. Pico CSS, klassificeringsframtida, visar att med semantisk HTML har du redan gjort 80% av arbetet.

Praktiska exempel

En lista över inlägg:

<ol class="post-list" reversed>
  <li>
    <article>
      <h3><a href="/post">Titel</a></h3>
      <time datetime="2026-04-23">23 april 2026</time>
      <p>Beskrivning...</p>
    </article>
  </li>
</ol>

Ett projektekort:

<article>
  <header>
    <h2>Projektets namn</h2>
    <p>Front-end · 2025</p>
  </header>
  <p>Beskrivning av vad jag gjorde.</p>
  <footer>
    <a href="https://...">Besök</a>
  </footer>
</article>

Ingen klass. Varje tagg beskriver sitt syfte.

Tumregel

Om du hittar på en klass som .wrapper, .container, .inner eller .box, fråga dig själv om det verkligen är en <div> eller om det kunde vara <article>, <section>, <aside>, <nav> eller <figure>.

80% av tiden finns det en bättre tagg.