Artikel

Grundlæggende webkode — HTML, CSS og JavaScript

HTML strukturerer, CSS designer, JavaScript animerer — de tre lag i al webkode, forklaret enkelt.

Sidst opdateret:

Enhver hjemmeside er bygget af kode. Uanset om det er en simpel blogside eller en kompleks webapplikation, er det de samme tre grundlæggende teknologier, der udgør fundamentet: HTML, CSS og JavaScript. Forstår du disse tre, forstår du, hvad en browser gør, hvad Googlebot ser, og hvorfor teknisk SEO ser ud, som det gør.

Hvad er kildekode?

Kildekode er de instruktioner, en computer kan læse og udføre. På webbet er kildekoden de tekstfiler, der udgør en hjemmeside — HTML-filer, CSS-filer og JavaScript-filer. Når du besøger en hjemmeside, sender serveren disse filer til din browser, som fortolker og viser dem som den side, du ser.

Du kan altid se kildekoden bag en hjemmeside ved at højreklikke og vælge “Vis sidekilde” i din browser. Det, du ser der, er præcis det, Googlebot modtager og analyserer, når den crawler din side. Kildekoden er derfor det direkte kommunikationsmedie mellem dig og søgemaskinerne.

Kildekode er ikke binær maskinkode — det er læsbar tekst, skrevet i standardiserede sprog med definerede regler. Alle med adgang til en teksteditor kan skrive webkode, selvom det kræver øvelse og viden at gøre det godt.

HTML — strukturen og indholdet

HTML (HyperText Markup Language) er det første og vigtigste lag. HTML definerer, hvad der er på siden: overskrifter, tekst, billeder, links, lister, tabeller og alle andre indholdselementer. HTML er et markup-sprog — det “markerer op” tekst og indhold med tags, der beskriver dets rolle og betydning.

Et HTML-tag ser typisk sådan ud: <p>Dette er et afsnit.</p>. Den åbnende tag <p> og den lukkende tag </p> omslutter indholdet og fortæller browseren (og Googlebot), at dette er et afsnit.

HTML er ikke et programmeringssprog i traditionel forstand — det udfører ikke logik, beregner ikke og tager ikke beslutninger. Det er et beskrivelsesssprog: det beskriver struktur og indhold.

For SEO er HTML det primære lag. Det er i HTML, du finder:

  • Title tags og meta descriptions
  • Overskriftshierarkiet (h1, h2, h3…)
  • Canonical tags og hreflang
  • Alt-tekster på billeder
  • Interne og eksterne links med anchor text
  • Structured data i JSON-LD format

Googlebots primære opgave er at parse og forstå HTML. Fejl og mangler i HTML er fejl og mangler, Google ser direkte.

CSS — designet og layoutet

CSS (Cascading Style Sheets) er det andet lag. CSS styrer, hvordan HTML-elementer ser ud: farver, fonte, størrelser, afstande, animationer og layout. CSS er det, der giver en hjemmeside dens visuelle identitet.

CSS er adskilt fra HTML med vilje. Denne adskillelse betyder, at du kan ændre en sides udseende fuldstændigt uden at røre indholdet, og at det samme CSS-stylesheet kan styre udseendet af hundredvis af sider på én gang.

CSS påvirker SEO primært indirekte:

Responsivt design er CSS-baseret. Mobile-first responsivt design er et grundlæggende krav i 2026 — Google bruger mobile-first indexing, hvilket betyder, at Googles primære vurdering af din side er baseret på mobilversionen.

Render-blocking CSS er CSS-filer, der forsinker browserens rendering af siden. CSS i <head> der loader langsomt, kan øge LCP-værdien negativt og forsinke First Contentful Paint.

Skjult tekst via display: none eller visibility: hidden behandles forskelligt af Google afhængigt af kontekst. Tekst skjult for at sende spam-signaler til søgemaskiner er en ranking-straf. Tekst skjult som del af legitim UX (accordion-indhold, tabskift) behandles normalt rimeligt.

JavaScript — adfærden og dynamikken

JavaScript er det tredje lag og det mest komplekse set fra et SEO-perspektiv. JavaScript er et rigtigt programmeringssprog — det kan udføre logik, hente data, manipulere HTML og CSS i realtid, og bygge hele brugergrænseflader.

Mange moderne hjemmesider bruger JavaScript-frameworks som React, Vue eller Angular til at bygge dynamiske brugergrænseflader. Dette skaber en udfordring for søgemaskiner: indholdet eksisterer ikke i den originale HTML-fil — det genereres af JavaScript, der kører i browseren.

Googlebot kan rendere JavaScript, men det er en ressourcekrævende totrins-proces med potentiel forsinkelse. Indhold der kun eksisterer i JavaScript-renderet form, risikerer at blive indekseret langsommere eller slet ikke.

Frontend og backend

Webkode opdeles traditionelt i frontend og backend.

Frontend er alt det, der kører i brugerens browser: HTML, CSS og JavaScript. Frontend-kode er synlig — enhver kan åbne kildeteksten og se den. Frontend er det, Googlebot primært arbejder med.

Backend er al kode, der kører på serveren: databaseforespørgsler, serverlogik, autentificering og det, der genererer de HTML-filer, browseren modtager. Backend kan være skrevet i Python, PHP, Node.js, Ruby, Java og mange andre sprog. Backend-kode er ikke direkte synlig for Googlebot, men dens output — HTML-filerne — er det.

For SEO er frontend det primære fokusområde, men backend-beslutninger som URL-struktur, redirect-logik og server-response headers har direkte SEO-implikationer.

Markup-sproget og dets semantik

HTML er et markup-sprog, og markup handler om semantik — at give mening til indhold. Et <h1> tag signalerer ikke blot stor tekst; det signalerer “dette er sidens primære overskrift”. Et <article> tag signalerer ikke blot en container; det signalerer “dette er et selvstændigt redaktionelt indhold”.

Semantisk markup er markup, der bruger de rigtige elementer til det rigtige formål. Modsat generisk markup, der bruger <div> og <span> til alt, kommunikerer semantisk markup struktur og hierarki direkte til Googlebot.

W3C (World Wide Web Consortium) er den organisation, der definerer HTML-standarden. HTML5 — den nuværende standard — introducerede mange nye semantiske elementer som <header>, <footer>, <main>, <article>, <section>, <aside> og <nav>.

Sammenhængen mellem de tre lag

De tre lag er afhængige af hinanden, men skal adskilles korrekt:

  1. HTML definerer strukturen og indholdet — “hvad er der”
  2. CSS definerer præsentationen — “hvordan ser det ud”
  3. JavaScript definerer adfærden — “hvad sker der, når brugeren interagerer”

En godt struktureret hjemmeside holder disse tre lag adskilt. HTML-filer indeholder ikke inline-styles (CSS direkte i HTML), og JavaScript manipulerer ikke HTML på måder, der skjuler primært indhold for søgemaskiner.

Denne adskillelse er ikke blot god praksis — den er SEO-kritisk. Kode der blander lagene skaber parsing-problemer, gør det sværere for Googlebot at forstå indholdet og øger risikoen for tekniske SEO-fejl.

Relaterede artikler

Vil du gå i dybden med de enkelte emner, er her de relevante artikler i denne ordbog:

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

Del af: HTML-struktur — Tags, elementer og semantik →

Andre artikler i samme emne

Relaterede begreber

Emne HTML-struktur — Tags, elementer og semantik HTML-strukturens byggeklodser — fra tags og attributter til semantisk markup der hjælper Google og brugere. Hovedguide Kode — Webkode og teknisk SEO Komplet guide til webkode og teknisk SEO — fra HTML-struktur og metadata til crawling, structured data og Core Web Vitals. Emne JavaScript og rendering — Scripts, DOM og CSR vs SSR JavaScript er SEOs største rendering-udfordring — forstå CSR vs SSR, DOM, lazy loading og hvad Googlebot faktisk ser. Emne Web Performance — Core Web Vitals og teknisk hastighed Web performance er en direkte SEO-rankingfaktor — Core Web Vitals, hastighed og responsivt design påvirker din placering. Artikel CSS — Cascading Style Sheets og SEO CSS styrer den visuelle præsentation af websider — og render-blocking CSS kan skade din Core Web Vitals-score. Artikel Frontend — Hvad er frontend-kode og hvad betyder det for SEO? Frontend er brugergrænsefladen — HTML, CSS og JavaScript i browseren. Frontend-teknologivalg påvirker SEO markant. Artikel Kildekode — Hvad er kildekode og hvad ser Googlebot? Kildekode er rå HTML som browseren modtager — men Googlebot ser i mange tilfælde det renderede DOM, ikke blot kildekoden.

Ofte stillede spørgsmål

Hvad er de tre grundlæggende webteknologier?
De tre grundlæggende webteknologier er HTML, CSS og JavaScript. HTML — HyperText Markup Language — definerer hvad der er på siden: struktur, overskrifter, tekst, links og billeder. CSS — Cascading Style Sheets — bestemmer hvordan det ser ud: farver, skrifttyper, layout og animationer. JavaScript tilføjer adfærd og interaktivitet: menuer der åbner, indhold der indlæses dynamisk og realtidsopdateringer. Alle websider er bygget på disse tre lag.
Hvad ser Googlebot i kildekoden?
Kildekoden er det direkte kommunikationsmedie mellem webmasteren og Googlebot. Googlebot modtager og analyserer præcis den HTML serveren sender — title-tags, overskriftshierarki, links, alt-tekster, meta-tags og structured data. Fejl og mangler i HTML er fejl og mangler Google ser direkte. JavaScript-genereret indhold kræver en separat rendering-fase og indekseres med forsinkelse, mens statisk HTML-indhold indekseres straks ved crawl.
Hvad er forskellen på frontend og backend?
Frontend er alt det der kører i brugerens browser og er synligt: HTML, CSS og JavaScript. Frontend-koden leveres fra serveren men eksekveres i browseren. Backend er al kode der kører på serveren og er usynlig for brugeren: databaseforespørgsler, serverlogik, autentificering og generering af HTML-filerne. For SEO er frontend det primære fokusområde, men backend-beslutninger som URL-struktur, redirect-logik og server response headers har direkte SEO-implikationer.
Hvad er et markup-sprog og hvad er forskellen fra et programmeringssprog?
Et markup-sprog som HTML annoterer tekst med tags der beskriver struktur og mening — det udfører ingen logik, tager ingen beslutninger og beregner intet. Et programmeringssprog som JavaScript eller Python kan behandle data, udføre betingede operationer og reagere på input. HTML fortæller browseren hvad indholdet er. JavaScript fortæller browseren hvad der skal ske. Skelnen er vigtig for at forstå hvad Googlebot ser direkte og hvad der kræver JavaScript-rendering.
Hvad er semantisk markup og hvorfor er det vigtigt for SEO?
Semantisk markup bruger HTML-elementer til det formål de er designet til. <article> til selvstændigt indhold, <nav> til navigation, <h1>-<h6> til overskriftshierarki. Det modsatte er div-soup — generiske <div>-elementer til alt — der giver Googlebot ingen signaler om hvad de forskellige indholdsdele er. Semantisk markup hjælper Google forstå indholdets struktur, forbedrer accessibility og er en forudsætning for korrekt featured snippet-udtræk.

Placering i ordbogen

Kode — Webkode og teknisk SEO
HTML-struktur — Tags, elementer og semantik
Grundlæggende webkode — HTML, CSS og JavaScript