Indholdselementer i kode — Links, billeder og formularer

HTML’s indholdselementer er de byggeklodser, der bærer det faktiske indhold på en hjemmeside: links der forbinder sider, billeder der illustrerer, formularer der interagerer, tabeller der strukturerer data og lister der organiserer information. Hvert af disse elementer har specifikke SEO-implikationer og bedste praksisser. At kode dem korrekt er ikke blot teknisk korrekthed — det er direkte indholdsoptimering.

Links i HTML

Links er fundamentet i webbet. De er det, der gør nettet til et net — et sammenknyttet system af sider. For SEO er links to-delte: interne links (til andre sider på samme domæne) og eksterne links (til andre domæner). Begge er vigtige, begge fungerer via det samme HTML-element.

Anchor-elementet

Links kodes med <a> (anchor) elementet:

<a href="https://stegger.dk/ordbog/kode/">Kode og teknisk SEO</a>

href-attributten angiver linkdestinationen — den URL, brugeren navigeres til ved klik. URLs bør altid være absolutte på tværs af domæner og kan være relative for interne links.

Anchor text (linkteksten) er det synlige tekststykke — “Kode og teknisk SEO” i eksemplet ovenfor. Anchor text er et af de vigtigste SEO-signaler: det fortæller Google, hvad den linkede side handler om. Anchor text bør:

• Være beskrivende og specifik
• Indeholde relevante søgeord naturligt
• Aldrig være generisk (“klik her”, “læs mere”, “se denne side”)

Rel-attributten og link equity

rel-attributten styrer relationen mellem den linkende og den linkede side:

rel="nofollow" beder Google om ikke at følge linket og ikke overføre link equity. Bruges til links til upålidelige sider, betalte links og links i brugergenereret indhold.

rel="sponsored" er det korrekte direktiv for betalte og sponsorerede links (affiliate, annoncering). Det er en præcisering af nofollow-konceptet.

rel="ugc" (User Generated Content) bruges til links i kommentarer, forumindlæg og lignende brugergenereret indhold.

rel="noopener noreferrer" er en sikkerhedsattribut for links, der åbner i et nyt tab (target="_blank"). Hindrer potentiel sikkerhedsrisiko via window.opener.

Interne links uden rel-attribut overfører fuld link equity og hjælper Google med at forstå din sites hierarki og de vigtigste sider.

URL-struktur i links

Interne links bør pege på kanoniske URLs — de endelige, korrekte URLs uden parametre, trailing slashes der er inkonsistente, og med korrekt protokol (HTTPS). Links der peger på sider der redirecter er ikke skadelige, men er suboptimale: Google skal følge redirect-kæden, og en del link equity kan gå tabt.

Billeder i HTML

Billeder er typisk de tungeste indholdselementer på en side — og de kræver præcis opmærksom kode for at fungere godt for SEO og brugere.

Img-elementet og alt-tekst

<img
  src="webkode-guide.webp"
  alt="Illustration af HTML, CSS og JavaScript som tre lag i webkode"
  width="1200"
  height="800"
  loading="lazy"
>

alt-attributten er det vigtigste SEO-signal på et billede. Den tjener to formål:

1. Beskriver billedet for Googlebot, der ikke kan “se” billeder visuelt
2. Vises til brugere, hvis billedet ikke loader (broken image)
3. Læses op af skærmlæsere til svagtseende brugere

En god alt-tekst er beskrivende og specifik — ikke keyword-stuffed. “Illustration af HTML, CSS og JavaScript som tre lag i webkode” er bedre end “HTML CSS JavaScript webkode SEO guide tutorial 2026”.

width og height attributterne er afgørende for CLS (Cumulative Layout Shift). Når browseren kender dimensionerne, reserverer den pladsen i layoutet, inden billedet er downloadet. Udelad dem aldrig på indholdsrelevante billeder.

loading="lazy" er passende for billeder, der er under fold — det vil sige ikke synlige, inden brugeren scroller. Brug ikke lazy loading på billeder øverst på siden, da det kan forsinke LCP.

Figcaption og figure

<figure> og <figcaption> er semantiske elementer til billeder med billedtekster:

<figure>
  <img src="cwv-diagram.webp" alt="Diagram over Core Web Vitals målinger" width="800" height="450">
  <figcaption>De tre Core Web Vitals: LCP, INP og CLS — og deres grænseværdier.</figcaption>
</figure>

<figcaption> er synlig tekst, Googlebot læser og associerer med billedet. Det er et suplement til alt-teksten og kan bidrage til billedindeksering.

Formularer i HTML

Formularer (<form>) bruges til søgning, kontakt, tilmelding og e-handel. De har specifikke SEO-overvejelser.

<form action="/soeg/" method="get">
  <label for="soegning">Søg i ordbogen</label>
  <input type="search" id="soegning" name="q" placeholder="Søg...">
  <button type="submit">Søg</button>
</form>

Labels og accessibility: <label>-elementet forbinder visuelt og semantisk etiketten med inputfeltet. Brug altid labels — det forbedrer accessibility markant og er del af god HTML-praksis.

Søgeformularer og crawling: Søgesider genereret via formularer (URLs som /soeg/?q=kode) bør typisk noindex-es og eventuelt blokeres i robots.txt. De er duplikat-indholdsrisici og spild af crawl budget.

Betalingsformularer og checkout: Sider med sensitive formularer — login, checkout, brugerdata — bør eksplicit holdes ude af søgeindekset med noindex.

Tabeller i HTML

Tabeller er til tabulære data — ikke til layout. Brug af tabeller til sideopbygning er en forældet praksis, der skader accessibility og giver Googlebot unødig kompleksitet.

<table>
  <caption>Core Web Vitals grænseværdier</caption>
  <thead>
    <tr>
      <th scope="col">Metrik</th>
      <th scope="col">God</th>
      <th scope="col">Skal forbedres</th>
      <th scope="col">Dårlig</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>LCP</td>
      <td>Under 2,5s</td>
      <td>2,5–4,0s</td>
      <td>Over 4,0s</td>
    </tr>
  </tbody>
</table>

<caption> giver tabellen en titel — god praksis for accessibility og giver Googlebot kontekst.

<th scope="col/row"> definerer om en header-celle gælder for en kolonne eller en række. Afgørende for accessibility.

<thead>, <tbody>, <tfoot> strukturerer tabellen semantisk og hjælper browseren med at scroller lange tabeller korrekt.

Tabeller indekseres og kan vises i Googles featured snippets — specielt sammenlignings- og data-tabeller.

Lister i HTML

Lister er et af de mest brugte HTML-elementer. Der er tre typer:

<ul> (unordered list): Punktliste, rækkefølge irrelevant

<ol> (ordered list): Nummereret liste, rækkefølge relevant (trin-for-trin, topti)

<dl> (description list): Definitionsliste — term + definition. Ideel til ordbøger, FAQ-strukturer og begrebsforklaringer.

<dl>
  <dt>LCP</dt>
  <dd>Largest Contentful Paint — måler indlæsning af sidens største synlige element.</dd>
</dl>

Lister strukturerer information på en måde, Googlebot kan parse. <ol>-lister bruges i structured data til HowTo-trin. Lister med klare, informative listepunkter er velegnede til featured snippets.

Relaterede artikler

• Kode og teknisk SEO — den komplette guide
• HTML-struktur — tags, elementer og semantik
• Web Performance — Core Web Vitals
• Kodekvalitet og validering

---

Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog.