Lær å strukturere nettsider med HTML5 og semantiske elementer.
Skjelettet bak hver nettside
HTML (HyperText Markup Language) er selve grunnspråket for webben. Det er et markeringsspråk som definerer strukturen og innholdet i nettsider. Tenk på en arbeidsdeling: HTML bestemmer hva innholdet er (overskrifter, avsnitt, bilder, lenker), CSS bestemmer hvordan det ser ut, og JavaScript bestemmer oppførselen.
Viktig poeng: HTML er ikke et programmeringsspråk. Det har ingen variabler, løkker eller betingelser. I stedet bruker det tagger som omslutter innhold og gir det mening. Når nettleseren leser HTML-filen, bygger den et dokumenttre (DOM – Document Object Model) og tegner siden ut fra dette.
Alle HTML-dokumenter har samme grunnstruktur:
<!DOCTYPE html>
<html lang="nb">
<head>
<meta charset="UTF-8">
<title>Min første nettside</title>
</head>
<body>
<h1>Hei, verden!</h1>
</body>
</html>Hver del har en oppgave. <!DOCTYPE html> sier at dette er HTML5. <html lang="nb"> er rotelementet, og lang="nb" angir norsk bokmål. <head> inneholder metadata som ikke vises direkte, blant annet <meta charset="UTF-8"> som sørger for at æ, ø og å vises riktig, og <title> som blir fanetittelen. <body> inneholder alt det synlige innholdet. Denne strukturen er den samme for alt fra en personlig side til en avansert nettapp.
Byggesteinene
HTML har et stort utvalg elementer. Overskrifter finnes i seks nivåer, fra <h1> (viktigst) til <h6>. Avsnitt lages med <p>, og inni kan du bruke <strong> for fet og <em> for kursiv. Lenker kobler sider sammen med <a href="...">, der href kan peke til en annen nettside, en lokal fil eller en seksjon på samme side med #. Bilder settes inn med <img src="bilde.jpg" alt="Beskrivelse">, og alt-attributten er viktig for tilgjengelighet fordi den leses opp av skjermlesere og vises hvis bildet ikke laster. Lister finnes som punktlister (<ul>) og nummererte lister (<ol>), begge med <li>-elementer for hvert punkt.
Legg merke til ordet attributt. Attributter er tilleggsinformasjon i åpningstaggen, med et navn og en verdi i anførselstegn. href="url" angir hvor en lenke går, src="filnavn" angir bildekilden, class="navn" kobler elementet til CSS-stiler, og id="unik" gir en unik identifikator. Noen attributter er globale og kan brukes på alle elementer (som class, id, style og title), mens andre bare gjelder bestemte elementer.
Her er det avgjørende skillet i moderne HTML: semantiske elementer. Semantisk HTML betyr at vi bruker elementer som beskriver betydningen av innholdet, ikke bare utseendet. I stedet for å fylle siden med generiske <div>-er, bruker vi <header> (toppdel), <nav> (navigasjon), <main> (hovedinnhold, bare én per side), <article> (selvstendig innhold), <section> (tematisk gruppe), <aside> (sideinnhold) og <footer> (bunndel). En <div> eller <span> er derimot bare en generisk beholder uten mening. Fordelene er store: skjermlesere kan navigere etter struktur, søkemotorer forstår innholdet bedre, og koden blir lettere å vedlikeholde.
Når brukeren skal svare
Så langt har vi vist innhold – men webben handler også om interaksjon. Skjemaer brukes til innlogging, søk, bestilling og kontakt, og lages med <form>-elementet rundt ulike input-felter. Et kontaktskjema kan se slik ut:
<form action="/send-melding" method="POST">
<label for="navn">Navn:</label>
<input type="text" id="navn" name="navn" required>
<label for="epost">E-post:</label>
<input type="email" id="epost" name="epost" required>
<textarea id="melding" name="melding" rows="5" required></textarea>
<button type="submit">Send melding</button>
</form>HTML5 har mange input-typer som hver gir riktig tastatur og validering: text for vanlig tekst, email for e-post (med innebygd validering), password for passord (vises som prikker), number for tall, date for datoer, checkbox for avkrysning og radio for alternativknapper. To nyttige attributter er required, som gjør et felt obligatorisk, og placeholder, som viser hjelpetekst i feltet. Legg også merke til <label> koblet til feltet med for-attributten – det er viktig for tilgjengelighet, fordi skjermlesere da vet hvilken etikett som hører til hvilket felt. Når brukeren trykker «Send», sendes dataene til adressen i action med metoden i method (her POST).
Oppsummering
HTML er skjelettet bak hver nettside – et markeringsspråk som strukturerer innhold med tagger, ikke et programmeringsspråk. Alle dokumenter deler samme grunnstruktur med <!DOCTYPE html>, <head> og <body>. Med elementer som overskrifter, avsnitt, lenker, bilder og lister bygger du innholdet, og attributter gir tilleggsinformasjon i åpningstaggene.
Moderne HTML legger vekt på semantiske elementer som <header>, <nav>, <main>, <article> og <footer>, som kommuniserer hva innholdet betyr og gir bedre tilgjengelighet, SEO og lesbarhet enn nakne <div>-er. Og med skjemaer og deres mange input-typer lar du brukeren legge inn data. Til sammen er HTML det strukturelle fundamentet alt videre webarbeid bygger på.
Dette kapitlet er skrevet av Anthropics toppmodeller (Claude Opus og Claude Fable) og er foreløpig ikke manuelt gjennomgått — kvalitetskontrollen gjøres av uavhengige KI-agenter, og innmeldte feil rettes fortløpende. Funnet en feil? Meld fra, så retter vi den. Les mer om hvordan innholdet lages.