HTML-koder (tags) – hvordan bruke dem riktig for SEO og tilgjengelighet
HTML (HyperText Markup Language) er ryggraden i alle nettsider. Det er ikke et programmeringsspråk, men et *merkespråk* som forteller nettleseren *hvordan* innholdet skal struktureres og presenteres. Å bruke riktige tags (elementer) på riktig måte er avgjørende for søkemotoroptimalisering (SEO), universell utforming (tilgjengelighet), og vedlikeholdbarhet.
De viktigste HTML-taggene du *må* mestre
1. Overskrifter: <h1> – <h6> (Hierarki!)
- <h1>: *Én* per side. Hovedtittel. Inneholder hovednøkkelordet. Viktigst for SEO.
- <h2>: Hovedavsnitt. Kan være flere.
- <h3>–<h6>: Underavsnitt. Følg rekkefølgen (h2 → h3 → h4). Hoppe ikke nivåer.
Feil: Bruke <b> eller <strong> for overskrifter. Riktig: Bruk h-tagger. Skjermlesere bruker dem for navigasjon. Google vektlegger innhold i h-tagger høyere.
2. Alt-attributt på bilder: <img src="..." alt="beskrivelse">
- Obligatorisk for validering og tilgjengelighet.
- Beskriv *innholdet og funksjonen* i bildet (ikke «bilde av...»).
- Dekorativt bilde? Bruk `alt=""` (tom) + `role="presentation"` så skjermlesere hopper over.
- SEO-bonus: Inkluder relevant nøkkelord *nåde-fullt* (ikke keyword stuffing).
3. Title-tag: <title>Din side-tittel</title> (i <head>)
- Vis i nettleser-fanen, søkeresultater (SERP), bokmerker, delte lenker.
- Optimal lengde: 50–60 tegn (Google klipper ca. 600 px).
- Struktur: `Hovednøkkelord | Sidebeskrivelse | Merkevarenavn`.
- Unik for *hver* side.
4. Meta description: <meta name="description" content="...">
- Ikke direkte rankingfaktor, men avgjørende for *klikkrate (CTR)* fra søkeresultat.
- Lengde: 150–160 tegn (mobil kan vise mindre).
- Handlingsrettet, unikt, inneholder nøkkelord (blir fet i SERP ved treff).
5. Semantiske struktur-elementer (HTML5)
- `<header>`, `<footer>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<figure>`, `<figcaption>`, `<time>`, `<address>`.
- Gi mening til innholdet for søkemotorer og assisterende teknologi. Unngå «div-suppe».
6. Lenker: <a href="...">Ankertekst</a>
- Ankertekst skal være beskrivende («Les mer om SEO-strategi» – ikke «klikk her»).
- Eksterne lenker: `rel="noopener noreferrer"` (sikkerhet/yytelse). `rel="nofollow"` / `sponsored` / `ugc` ved betalte/bruker-genererte lenker.
7. Lister: <ul>, <ol>, <li> / Definisjonslister: <dl>, <dt>, <dd>
- Bruk lister for opptellinger, trinn, menymer – ikke `
`-separerte linjer.
8. Tabeller: <table>, <thead>, <tbody>, <th scope="col/row">, <td>, <caption>
- Bruk *kun* for tabellariske data. Aldri for layout.
- `scope`-attributt på <th> avgjørende for skjermlesere.
Vanlige feil å unngå
- Flere <h1> per side.
- Mangler `alt` på bilder.
- Bruker ``/`` for overskrifter / vektlegging (bruk ``/`` for semantisk vekt, CSS for visuell).
- Inline-stiler (`style="..."`) i stedet for CSS-klasser.
- Ikke lukkede tags (HTML5 tillater det for void-elementer som `
`, `
`, ``, men lukk container-elementer). - Tabeller for layout.
- Mangler `lang`-attributt på ``.
Verktøy for å sjekke HTML-kvalitet
- W3C Validator (validator.w3.org) – offisiell standard.
- Lighthouse (Chrome DevTools) – SEO, tilgjengelighet, ytelse, best practices.
- axe DevTools / WAVE – dyptgående tilgjengelighetstest.
- HTMLHint / ESLint (med html-plugin) – i utviklingsmiljøet.
Ren, semantisk HTML er ikke bare «pen kode» – det er grunnlaget for at nettstedet ditt finnes, forstås, og brukes av *alle*. Investér i å lære det. Det betaler seg hver eneste dag.
Tidligere:Slik velger du den beste livsforsikringen – guide for norske forhold
Neste:Hvordan finne riktig tannpleie for barn med spesielle behov