Modul 2 · Kapitel 2.2

Semantisk HTML

Beskriv vad innehållet betyder – inte hur det ska se ut.

Mål

Efter kapitlet ska du kunna...

förklara skillnaden mellan semantiska och generella element
använda header, nav, main och footer
välja mellan section, article och aside
skapa en logisk rubrikstruktur

Semantik

Elementets namn beskriver rollen

<nav>

Innehåller navigering.

<footer>

Innehåller avslutande information.

Du kan förstå innehållets funktion genom att läsa elementnamnet.

Semantiskt eller generellt?

nav berättar mer än div

Semantiskt	Generellt
`<nav>...</nav>`	`<div>...</div>`
Berättar att innehållet är navigering.	Berättar bara att innehållet är grupperat.

div är användbart när inget mer betydelsefullt element passar.

Sidans början

header och nav

<header>
  <h1>Min webbplats</h1>
</header>

header är ett sidhuvud eller en introduktion.

<nav>
  <a href="index.html">Start</a>
</nav>

nav samlar navigationslänkar.

Huvudinnehåll

main

<main>
  <h2>Om webbplatsen</h2>
  <p>Sidans viktigaste innehåll.</p>
</main>

main innehåller sidans huvudinnehåll.

Använd normalt bara ett main-element per sida.

Avdelning

section

<section>
  <h2>Mina intressen</h2>
  <p>Här beskriver jag mina intressen.</p>
</section>

section samlar relaterat innehåll i en tydlig avdelning.

En section har normalt en egen rubrik.

Självständigt innehåll

article

<article>
  <h2>Om mig</h2>
  <p>Text som kan förstås som en egen del.</p>
</article>

article passar innehåll som kan stå mer självständigt.

Kompletterande innehåll

aside

<aside>
  <h2>Tips</h2>
  <p>Validera alltid HTML-koden.</p>
</aside>

aside innehåller information som kompletterar huvudinnehållet.

Sidans slut

footer

<footer>
  <p>© 2026 Mitt namn</p>
</footer>

footer innehåller avslutande information.

Det kan exempelvis vara upphovsperson, kontaktuppgifter eller länkar.

Hela exemplet · del 1 av 2

Sidhuvud och navigering

<header>
  <h1>Min webbplats</h1>
</header>
<nav>
  <a href="index.html">Start</a>
  <a href="kontakt.html">Kontakt</a>
</nav>

Hela exemplet · del 2 av 2

Huvudinnehåll och sidfot

<main>
  <article>
    <h2>Om mig</h2>
    <p>Text om sidan.</p>
  </article>
</main>
<footer>
  <p>© 2026</p>
</footer>

Sidstruktur

Elementen har tydliga roller

header
introduktionnav
länkarmain
huvudinnehållfooter
avslutning

Strukturen hjälper användare, hjälpmedel och utvecklare att förstå sidan.

Strukturexempel

Enkel sida eller artikel

Enkel informationssida

<nav>

<main>

Artikel med sidoinnehåll

<nav>

<main>

<aside>

Den stora innehållsytan runt section eller article är main.

Strukturexempel

Flera avdelningar i main

Webbplats med två avdelningar

<nav>

<main>

<aside>

header introducerar sidan.

nav samlar navigationslänkar.

main innehåller två relaterade avdelningar.

aside kompletterar huvudinnehållet.

footer avslutar sidan.

Rubriknivåer

Rubriker visar hierarkin

h1
sidans huvudrubrik→h2
huvudavdelning→h3
underavdelning

Hoppa inte över nivåer bara för att få en viss textstorlek.

Utseendet styrs med CSS – rubriknivån beskriver strukturen.

Kontrollfråga

Vilket element passar bäst?

Du ska samla länkarna Start, Om oss och Kontakt.

Väljer du nav eller div?

Svar: nav, eftersom länkarna används för navigering.

Vanligt misstag

Välj inte rubrik efter storlek

<h1>Min sida</h1>
<h3>Om mig</h3>

Otydligt: nivån h2 hoppas över.

<h1>Min sida</h1>
<h2>Om mig</h2>

Tydligt: rubrikerna följer en logisk ordning.

Prova själv

Gör profilsidan semantisk

Lägg till header, main och footer.
Lägg navigationslänkarna i ett nav.
Kontrollera att sidan bara har ett main.
Kontrollera rubriknivåernas ordning.
Validera HTML-koden.

Sammanfattning

Kom ihåg

Semantiska element beskriver innehållets betydelse.
header, nav, main och footer markerar sidregioner.
section, article och aside har olika roller.
div används när inget mer betydelsefullt element passar.
Rubriknivåer ska följa innehållets hierarki.