Modul 2

Kap 2.2 - Semantisk HTML

Semantisk HTML beskriver vad innehållet betyder, inte bara hur det ska se ut.

Mål

  • Förklara skillnaden mellan semantiska och icke-semantiska element.
  • Använda vanliga sidregioner som header, nav, main och footer.
  • Skapa en tydligare struktur för både användare och hjälpmedel.

Vad betyder semantik?

Semantik betyder betydelse. Ett semantiskt element berättar något om innehållets roll. nav betyder navigering, main betyder huvudinnehåll och footer betyder sidfot.

Ett div-element betyder däremot bara en generell avdelare. Det kan vara användbart, men det säger inget om innehållets funktion.

Vanliga semantiska element

  • header - sidhuvud eller introduktion till en del.
  • nav - navigationslänkar.
  • main - sidans huvudinnehåll. Använd normalt bara ett per sida.
  • section - en tydlig avdelning med relaterat innehåll.
  • article - innehåll som kan stå mer självständigt.
  • aside - kompletterande innehåll.
  • footer - avslutande information.

Exempel

<header>
    <h1>Min webbplats</h1>
</header>
<nav>
    <a href="index.html">Start</a>
    <a href="kontakt.html">Kontakt</a>
</nav>
<main>
    <article>
        <h2>Om mig</h2>
        <p>Text om sidan.</p>
    </article>
</main>
<footer>
    <p>© 2026</p>
</footer>

Rubriknivåer

Rubriker skapar struktur. h1 är sidans huvudrubrik. Under den kan du använda h2 och sedan h3. Hoppa inte rubriknivåer bara för att få en viss storlek. Storlek styrs senare med CSS.

Prova själv

  1. Lägg till header, main och footer i din profilsida.
  2. Lägg en länklista i ett nav-element.
  3. Kontrollera att rubriknivåerna kommer i logisk ordning.