HTML - Semantiske elementer
Tidligere brukte man nesten bare <div> og <span> for å bygge opp strukturen på en nettside (såkalt "div-soup"). I moderne HTML har vi fått semantiske elementer. Dette er elementer som har en tydelig betydning for både utviklere, nettlesere og skjermlesere. De forteller hva innholdet er, ikke bare hvordan det skal se ut.
Sidens hovedstruktur
For å dele inn selve hoveddelene av en nettside, bruker vi tre viktige elementer. Disse hjelper søkemotorer (som Google) og skjermlesere med å forstå hvordan siden er bygd opp. Vi markerer disse hovedelementene med blå farge.
<header>: Toppen av siden. Inneholder ofte logo, sidetittel og kanskje en navigasjonsmeny.<main>: Selve hovedinnholdet på siden. Det skal bare være én<main>på hver side.<aside>: Innhold som er indirekte relatert til hovedinnholdet, f.eks. en sidekolonne med ekstra informasjon.<footer>: Bunnen av siden. Inneholder typisk copyright-informasjon eller kontaktinfo.
<header>
<h1>Min kule nettside</h1>
</header>
<main>
<p>Velkommen til min side...</p>
</main>
<footer>
<p>© 2026 Meg Selv</p>
</footer>Inndeling av innhold (Underelementer)
Inne i hoveddelene (som <main>) har vi elementer for å gruppere innholdet logisk. Vi markerer disse underelementene med grønn farge.
<nav>(Navigation): Brukes som en boks for navigasjonsmenyer.<article>: Et uavhengig innhold som gir mening alene, f.eks. et blogginnlegg eller et produktkort.<section>: Brukes for å gruppere relatert innhold (et tema). En section har gjerne sin egen overskrift.
<article>
<h2>Lær om semantisk HTML</h2>
<p>Det er mye bedre enn div-soup!</p>
</article>Visuell struktur
Her ser du et klassisk eksempel på hvordan disse semantiske elementene bygger opp "skjelettet" på en nettside. Hver fargelagte boks representerer et usynlig rektangel (et blokk-element) i nettleseren.