Gå til innhold

Semantisk HTML

Semantisk HTML bruker elementer som beskriver hva innholdet betyr, ikke bare hvordan det ser ut.

Hvorfor semantisk HTML?

Før (ikke-semantisk)

<div id="header">
    <div id="nav">...</div>
</div>
<div id="main">
    <div class="article">...</div>
</div>
<div id="footer">...</div>

Etter (semantisk)

<header>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
</main>
<footer>...</footer>

Fordeler

  • Tilgjengelighet - Skjermlesere forstår strukturen
  • SEO - Søkemotorer forstår innholdet bedre
  • Lesbarhet - Enklere å lese og vedlikeholde koden
  • Konsistens - Felles vokabular for alle utviklere

Strukturelementer

Introduksjon eller navigasjon for siden eller en seksjon:

<header>
    <h1>Min nettside</h1>
    <nav>
        <a href="/">Hjem</a>
        <a href="/om">Om</a>
    </nav>
</header>

Kan brukes flere steder

En side kan ha flere <header> - én for siden og én for hver <article>.

Navigasjonslenker:

<nav>
    <ul>
        <li><a href="/">Hjem</a></li>
        <li><a href="/produkter">Produkter</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
    </ul>
</nav>

Bruk <nav> for hovednavigasjon, ikke for alle lenkegrupper.

main

Hovedinnholdet på siden:

<main>
    <h1>Velkommen</h1>
    <p>Dette er hovedinnholdet.</p>
</main>

Bare én main

Det skal bare være én <main> per side.

article

Selvstendig innhold som gir mening alene:

<article>
    <h2>Nyhetsartikkel</h2>
    <p>Publisert: 15. juni 2024</p>
    <p>Artikkelinnhold...</p>
</article>

Bruk for: blogginnlegg, nyhetsartikler, kommentarer, produkter.

section

Tematisk gruppering av innhold:

<section>
    <h2>Om oss</h2>
    <p>Vi er et lite firma...</p>
</section>

<section>
    <h2>Våre tjenester</h2>
    <p>Vi tilbyr...</p>
</section>

aside

Sideinnhold relatert til hovedinnholdet:

<main>
    <article>
        <h1>Hovedartikkel</h1>
        <p>Innhold...</p>
    </article>

    <aside>
        <h2>Relaterte artikler</h2>
        <ul>
            <li><a href="#">Artikkel 1</a></li>
            <li><a href="#">Artikkel 2</a></li>
        </ul>
    </aside>
</main>

Bunnseksjon for siden eller en seksjon:

<footer>
    <p>&copy; 2024 Min bedrift</p>
    <nav>
        <a href="/personvern">Personvern</a>
        <a href="/vilkar">Vilkår</a>
    </nav>
</footer>

Komplett sidestruktur

<!DOCTYPE html>
<html lang="no">
<head>
    <title>Min nettside</title>
</head>
<body>
    <header>
        <h1>Logo</h1>
        <nav>
            <ul>
                <li><a href="/">Hjem</a></li>
                <li><a href="/om">Om</a></li>
                <li><a href="/kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>Artikkeltittel</h2>
                <p>Av <a href="#">Forfatter</a> | 15. juni 2024</p>
            </header>

            <section>
                <h3>Introduksjon</h3>
                <p>...</p>
            </section>

            <section>
                <h3>Hovedinnhold</h3>
                <p>...</p>
            </section>

            <footer>
                <p>Tagger: HTML, CSS</p>
            </footer>
        </article>

        <aside>
            <h2>Sidebar</h2>
            <p>Relatert innhold...</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024</p>
    </footer>
</body>
</html>

Visuell oversikt

┌─────────────────────────────────────┐
│             <header>                │
│  ┌───────────────────────────────┐  │
│  │           <nav>               │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│              <main>                 │
│  ┌─────────────────────┐ ┌───────┐  │
│  │     <article>       │ │<aside>│  │
│  │  ┌───────────────┐  │ │       │  │
│  │  │  <section>    │  │ │       │  │
│  │  └───────────────┘  │ │       │  │
│  │  ┌───────────────┐  │ │       │  │
│  │  │  <section>    │  │ │       │  │
│  │  └───────────────┘  │ │       │  │
│  └─────────────────────┘ └───────┘  │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│             <footer>                │
└─────────────────────────────────────┘

Andre semantiske elementer

Se HTML-referansen for en komplett liste over semantiske elementer.

figure og figcaption

Bilde eller diagram med bildetekst:

<figure>
    <img src="graf.png" alt="Salgsstatistikk">
    <figcaption>Figur 1: Salg per kvartal 2024</figcaption>
</figure>

time

Dato eller tid:

<p>Publisert <time datetime="2024-06-15">15. juni 2024</time></p>
<p>Møtet er kl. <time datetime="14:30">14:30</time></p>

address

Kontaktinformasjon:

<address>
    Ola Nordmann<br>
    Storgata 1<br>
    0001 Oslo<br>
    <a href="mailto:ola@example.com">ola@example.com</a>
</address>

mark

Markert/uthevet tekst:

<p>Søkeresultater for <mark>HTML</mark>:</p>

details og summary

Sammenleggbart innhold:

<details>
    <summary>Klikk for mer info</summary>
    <p>Her er mer informasjon som er skjult til du klikker.</p>
</details>

dialog

Modal/dialogboks:

<dialog id="myDialog">
    <h2>Dialogtittel</h2>
    <p>Dialoginnhold</p>
    <button onclick="this.closest('dialog').close()">Lukk</button>
</dialog>

Hva velger jeg?

Innhold Element
Sidetopptekst <header>
Navigasjon <nav>
Hovedinnhold <main>
Selvstendig artikkel <article>
Tematisk gruppe <section>
Relatert innhold <aside>
Sidebunntekst <footer>
Bilde med tekst <figure>
Dato/tid <time>
Kontaktinfo <address>

Tommelfingerregler

article vs section

  • article: Gir mening alene (kan deles, gjenbrukes)
  • section: Grupperer relatert innhold

section vs div

  • section: Tematisk innhold med overskrift
  • div: Bare for styling, ingen semantisk betydning

Når bruke div?

Bruk <div> når ingen semantisk element passer - for layout og styling.

Oppsummering

Element Beskrivelse
<header> Innledning/navigasjon
<nav> Navigasjonslenker
<main> Hovedinnhold (én per side)
<article> Selvstendig innhold
<section> Tematisk gruppe
<aside> Sideinnhold
<footer> Bunntekst
<figure> Illustrasjon med tekst
<figcaption> Bildetekst
<time> Dato/tid
<address> Kontaktinfo
<mark> Markert tekst
<details> Sammenleggbart
<summary> Tittel for details