Lær å strukturere nettsider med HTML5 og semantiske elementer.
HTML – struktur og semantikk
HTML (HyperText Markup Language) er selve grunnspråket for webben. Det er et markeringsspråk som brukes til å definere strukturen og innholdet i nettsider. Mens CSS styrer utseendet og JavaScript styrer oppførselen, er det HTML som definerer hva innholdet er – overskrifter, avsnitt, bilder, lenker, lister og tabeller.
HTML er ikke et programmeringsspråk – det har ingen variabler, løkker eller betingelser. I stedet bruker det tagger (tags) som omslutter innhold for å gi det mening og struktur. Når nettleseren leser en HTML-fil, bygger den opp et dokumenttre (DOM – Document Object Model) som representerer sidens struktur, og bruker dette treet til å tegne nettsiden på skjermen.
Alle HTML-dokumenter følger den samme grunnstrukturen. Her er et komplett, minimalt HTML5-dokument:
<!DOCTYPE html>
<html lang="nb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min første nettside</title>
</head>
<body>
<h1>Hei, verden!</h1>
<p>Dette er min første nettside.</p>
</body>
</html>La oss gå gjennom hver del:
- <!DOCTYPE html> – Forteller nettleseren at dette er et HTML5-dokument
- <html lang="nb"> – Rotelementet som omslutter alt innhold. Attributten lang="nb" angir at språket er norsk bokmål
- <head> – Inneholder metadata om dokumentet (tittel, tegnkoding, stilark osv.) som ikke vises direkte på siden
- <meta charset="UTF-8"> – Angir tegnkodingen slik at norske bokstaver (æ, ø, å) vises riktig
- <meta name="viewport"> – Gjør at siden tilpasser seg skjermstørrelsen på mobil
- <title> – Tittelen som vises i nettleserens fanetittel og i søkeresultater
- <body> – Inneholder alt synlig innhold på nettsiden
Denne grunnstrukturen er den samme for alle nettsider, fra enkle personlige sider til komplekse nettapplikasjoner. Det er viktig å alltid inkludere alle disse elementene for å sikre at nettsiden fungerer korrekt i alle nettlesere.
HTML har et stort utvalg elementer for ulike typer innhold. Her er de mest brukte:
Overskrifter – Seks nivåer fra <h1> (viktigst) til <h6> (minst viktig):
<h1>Hovedoverskrift</h1>
<h2>Underoverskrift</h2>
<h3>Del-overskrift</h3>Avsnitt og tekst:
<p>Dette er et avsnitt med vanlig tekst.</p>
<p>Du kan bruke <strong>fet skrift</strong> og <em>kursiv</em> inne i avsnitt.</p>
<br> <!-- Linjeskift -->
<hr> <!-- Horisontal linje -->Lenker – Kobler sammen sider med hyperlenker:
<a href="https://www.nrk.no">Besøk NRK</a>
<a href="om-oss.html">Om oss</a>
<a href="#seksjon2">Gå til seksjon 2</a>Bilder:
<img src="bilde.jpg" alt="Beskrivelse av bildet" width="600">alt er viktig for tilgjengelighet – den leses opp av skjermlesere og vises hvis bildet ikke kan lastes.Lister – Punktlister og nummererte lister:
<ul>
<li>Første punkt</li>
<li>Andre punkt</li>
</ul>
<ol>
<li>Steg én</li>
<li>Steg to</li>
</ol>href="url" på lenker angir destinasjonen, src="filnavn" på bilder angir kildefilen, class="navn" brukes til å koble elementer med CSS-stiler, og id="unik" gir elementet en unik identifikator. Globale attributter som class, id, style og title kan brukes på alle HTML-elementer, mens andre attributter bare gjelder bestemte elementer.Her er en komplett nettside som viser mange ulike HTML-elementer i bruk:
<!DOCTYPE html>
<html lang="nb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Norges nasjonalparker</title>
</head>
<body>
<h1>Norges nasjonalparker</h1>
<p>Norge har <strong>47 nasjonalparker</strong> som beskytter unik natur.</p>
<h2>Populære nasjonalparker</h2>
<ul>
<li>Jotunheimen – Norges tak med Galdhøpiggen og Glittertind</li>
<li>Hardangervidda – Europas største høyfjellsplatå</li>
<li>Rondane – Norges første nasjonalpark (1962)</li>
</ul>
<h2>Besøkstall</h2>
<ol>
<li>Jotunheimen: ca. 300 000 besøkende årlig</li>
<li>Hardangervidda: ca. 250 000 besøkende årlig</li>
<li>Rondane: ca. 200 000 besøkende årlig</li>
</ol>
<h2>Les mer</h2>
<p>Besøk <a href="https://www.nasjonalparker.no">nasjonalparker.no</a> for mer informasjon.</p>
<img src="jotunheimen.jpg" alt="Utsikt over Jotunheimen med snødekte topper">
</body>
</html>Denne nettsiden viser en overskrift, avsnitt med fet tekst, punktliste, nummerert liste, en lenke og et bilde. Nettleseren tolker HTML-koden og viser den som en formatert nettside.
Semantisk HTML betyr at vi bruker elementer som beskriver betydningen av innholdet, ikke bare hvordan det skal se ut. I stedet for å bruke generiske <div>-elementer overalt, bruker vi spesialiserte elementer som forteller nettlesere og skjermlesere hva innholdet representerer.
De viktigste semantiske elementene i HTML5:
<header> <!-- Toppdelen av siden eller en seksjon -->
<nav> <!-- Navigasjonsmenyen -->
<main> <!-- Hovedinnholdet på siden (bare én per side) -->
<article> <!-- Selvstendig innhold som en artikkel eller bloggpost -->
<section> <!-- En tematisk gruppering av innhold -->
<aside> <!-- Sideinnhold, ofte en sidebar -->
<footer> <!-- Bunndelen av siden eller en seksjon -->
<figure> <!-- Selvstendig innhold med bildetekst -->
<figcaption> <!-- Bildetekst inne i figure -->Her er en typisk semantisk sidestruktur:
<body>
<header>
<h1>Min blogg</h1>
<nav>
<a href="/">Hjem</a>
<a href="/om">Om meg</a>
<a href="/kontakt">Kontakt</a>
</nav>
</header>
<main>
<article>
<h2>Min første bloggpost</h2>
<p>Publisert 15. januar 2025</p>
<p>Her er innholdet i bloggposten...</p>
</article>
<article>
<h2>En annen bloggpost</h2>
<p>Publisert 10. januar 2025</p>
<p>Mer innhold her...</p>
</article>
</main>
<aside>
<h3>Om bloggen</h3>
<p>Denne bloggen handler om webutvikling.</p>
</aside>
<footer>
<p>© 2025 Min blogg. Alle rettigheter reservert.</p>
</footer>
</body>Fordeler med semantisk HTML er mange: skjermlesere kan navigere etter struktur, søkemotorer forstår innholdet bedre, koden er lettere å vedlikeholde, og det gir et felles vokabular for webutviklere.
<header>, <nav>, <main>, <article>, <section> og <footer> er semantiske fordi de beskriver hva innholdet er. I motsetning er <div> og <span> ikke-semantiske elementer som bare fungerer som generiske beholdere uten å formidle mening. Bruk av semantisk HTML forbedrer tilgjengelighet for personer med funksjonsnedsettelser, gir bedre søkemotoroptimalisering og gjør koden mer lesbar og vedlikeholdbar.Skjemaer er fundamentale for brukerinteraksjon på webben. De brukes til innlogging, søk, bestilling, kontaktskjemaer og mye mer. Et HTML-skjema opprettes med <form>-elementet og inneholder ulike typer input-felter.
Her er et eksempel på et komplett kontaktskjema:
<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>
<label for="alder">Alder:</label>
<input type="number" id="alder" name="alder" min="0" max="120">
<label for="emne">Emne:</label>
<select id="emne" name="emne">
<option value="generelt">Generell henvendelse</option>
<option value="feil">Rapporter feil</option>
<option value="forslag">Forbedringsforslag</option>
</select>
<label for="melding">Melding:</label>
<textarea id="melding" name="melding" rows="5" required></textarea>
<label>
<input type="checkbox" name="nyhetsbrev"> Meld meg på nyhetsbrevet
</label>
<button type="submit">Send melding</button>
</form>Viktige input-typer i HTML5 er blant annet: text for vanlig tekst, email for e-postadresser (med validering), password for passord (vises som prikker), number for tall, date for datoer, url for nettadresser, tel for telefonnumre, checkbox for avkrysningsbokser og radio for alternativknapper. Attributten required gjør at feltet må fylles ut, og placeholder viser hjelpetekst i feltet.
Det er viktig å skrive gyldig HTML. Vanlige feil inkluderer: glemte lukketagger, feilnestede elementer, manglende alt-attributt på bilder og manglende <!DOCTYPE html>. Bruk W3C Markup Validation Service (validator.w3.org) for å sjekke at HTML-koden din er gyldig. Feil i HTML kan føre til at nettsiden vises forskjellig i ulike nettlesere og at skjermlesere ikke fungerer riktig.
Bruk konsistent innrykk (2 eller 4 mellomrom) for å vise nesting-strukturen i HTML. Innrykk gjør koden mye lettere å lese og vedlikeholde. De fleste teksteditorer kan settes opp til å gjøre dette automatisk. Hver gang et element nestes inne i et annet, rykker du innholdet ett nivå inn.
Hvilket element brukes til å definere hovedoverskriften på en nettside?
Hva er formålet med alt-attributten på et <img>-element?
Hvilken HTML-struktur er riktig semantisk oppmerkoring for en navigasjonsmeny?
Hva er forskjellen mellom <div> og <section> i HTML5?
Skriv HTML-koden for en enkel nettside om ditt favorittfag på skolen. Siden skal inneholde:
- Riktig HTML5-grunnstruktur (DOCTYPE, html, head, body)
- En hovedoverskrift med fagets navn
- Minst to avsnitt med tekst
- En punktliste med tre grunner til at du liker faget
- En lenke til en relevant nettside
- Et bilde med beskrivende alt-tekst
Bruk semantisk HTML der det er mulig.
Lag HTML-koden for et registreringsskjema for en nettbutikk. Skjemaet skal inneholde felter for fornavn, etternavn, e-post, passord, fødselsdato, og en nedtrekksmeny for fylke. Alle obligatoriske felter skal være markert med required. Bruk riktige input-typer (email, password, date osv.) og koble hver <label> til sitt input-felt med for-attributten.
Hva er hovedfordelen med å bruke semantisk HTML framfor å bare bruke <div> med klasser for alt?
Oppsummering
I dette kapittelet har du lært:
- HTML: markeringsspraaket som strukturerer nettsider.
- Elementer og tagger: byggesteinene i en nettside.
- Attributter: tilleggsinformasjon i aapningstaggen.
- Semantisk HTML: elementer som forteller om innholdets betydning.
- Skjemaer: lar brukeren legge inn data.
Noekkelbegreper
| Begrep | Forklaring |
|---|---|
| HTML | Markeringsspraak for struktur på nettsider |
| Attributt | Tilleggsinformasjon i en HTML-tagg |
| Semantisk HTML | Elementer som kommuniserer betydning |
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.