Hva er semantiske elementer?
Semantiske elementer er HTML-elementer som har en meningsfull betydning i koden. De beskriver tydelig hva slags innhold de inneholder, i motsetning til generiske elementer som <div> og <span>.
- Bedre lesbarhet og vedlikeholdbarhet av koden
- Økt tilgjengelighet for skjermlesere
- Forbedret SEO og søkemotorrangering
- Tydeligere struktur og organisering av innhold
Vanlige semantiske elementer
<header>
Brukes for å definere toppen av en side eller en seksjon. Inneholder ofte logo, navigasjon og overskrifter.
<header>
<h1>Min nettside</h1>
<nav>
<ul>
<li><a href="#">Hjem</a></li>
<li><a href="#">Om oss</a></li>
</ul>
</nav>
</header><nav>
Definerer et navigasjonsområde med lenker til andre sider eller seksjoner.
<nav class="hovedmeny">
<ul>
<li><a href="/">Hjem</a></li>
<li><a href="/produkter">Produkter</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav><main>
Inneholder hovedinnholdet på siden. Det bør kun være ett <main>-element per side.
<main>
<h1>Velkommen til min nettside</h1>
<article>
<h2>Min første artikkel</h2>
<p>Dette er hovedinnholdet i artikkelen.</p>
</article>
</main><article>
Brukes for selvstendig innhold som kan stå alene, som blogginnlegg, nyhetsartikler eller kommentarer.
<article>
<h2>Artikkel tittel</h2>
<p>Artikkel innhold...</p>
<footer>
<p>Skrevet av: Forfatter</p>
</footer>
</article><section>
Brukes for å gruppere relatert innhold. Bør vanligvis ha en overskrift.
<section>
<h2>Våre tjenester</h2>
<p>Vi tilbyr følgende tjenester...</p>
</section><aside>
Brukes for innhold som er relatert til hovedinnholdet, men som kan sees som separat, som sidebarer eller annonser.
<aside>
<h3>Relaterte artikler</h3>
<ul>
<li>Artikkel 1</li>
<li>Artikkel 2</li>
</ul>
</aside><footer>
Definerer bunnen av en side eller en seksjon. Inneholder ofte kontaktinformasjon, copyright og lenker.
<footer>
<p>© 2025 Min Nettside</p>
<address>
<p>Kontakt: info@minnettside.no</p>
</address>
</footer>Oversikt over semantiske elementer
Her er en komplett oversikt over de mest brukte semantiske HTML5-elementene:
| Element | Beskrivelse | Bruksområde |
|---|---|---|
<header> |
Introduserende innhold | Toppbanner, innledende innhold for en artikkel eller seksjon |
<nav> |
Navigasjonslenker | Hovedmeny, sidemeny, brødsmulesti |
<main> |
Hovedinnhold | Sidens primære innhold, skal kun brukes én gang per side |
<article> |
Selvstendig innhold | Blogginnlegg, nyhetsartikler, produktbeskrivelser |
<section> |
Tematisk gruppering | Kapitler, faner, nummererte seksjoner |
<aside> |
Sekundært innhold | Sidebarer, annonser, relaterte artikler |
<footer> |
Avsluttende innhold | Bunntekst, copyright, kontaktinformasjon |
<figure> |
Selvstendig innhold med bildetekst | Bilder, diagrammer, kodeeksempler med forklaring |
<figcaption> |
Bildetekst for figure | Beskrivelse eller forklaring av figure-elementet |
<time> |
Tidsangivelse | Datoer, klokkeslett, tidsperioder |
<mark> |
Uthevet tekst | Søkeresultater, viktige deler av tekst |
<details> |
Utvidbart innhold | FAQ, accordion-menyer, skjulbart innhold |
<summary> |
Overskrift for details | Klikkbar overskrift som viser/skjuler innhold |
<address> |
Kontaktinformasjon | E-postadresser, fysiske adresser, telefonnumre |
Før og etter sammenligning
Her er et eksempel på hvordan semantiske elementer kan forbedre kodestrukturen:
Ikke-semantisk HTML
<div class="header">
<div class="nav">
<!-- Navigasjon -->
</div>
</div>
<div class="main">
<div class="article">
<!-- Innhold -->
</div>
</div>
<div class="footer">
<!-- Bunntekst -->
</div>Semantisk HTML
<header>
<nav>
<!-- Navigasjon -->
</nav>
</header>
<main>
<article>
<!-- Innhold -->
</article>
</main>
<footer>
<!-- Bunntekst -->
</footer>