Lær å strukturere nettsider med HTML5 og semantiske elementer.
HTML – struktur og semantikk
HTML (HyperText Markup Language) er sjølve grunnspråket for webben. Det er eit markeringsspråk som blir brukt til å definere strukturen og innhaldet i nettsider. Medan CSS styrer utsjånaden og JavaScript styrer åtferda, er det HTML som definerer kva innhaldet er – overskrifter, avsnitt, bilde, lenkjer, lister og tabellar.
HTML er ikkje eit programmeringsspråk – det har ingen variablar, løkker eller vilkår. I staden brukar det taggar (tags) som omsluttar innhald for å gje det meining og struktur. Når nettlesaren les ei HTML-fil, byggjer han opp eit dokumenttre (DOM – Document Object Model) som representerer strukturen til sida, og brukar dette treet til å teikne nettsida på skjermen.
Alle HTML-dokument følgjer den same grunnstrukturen. Her er eit 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 kvar del:
- <!DOCTYPE html> – Fortel nettlesaren at dette er eit HTML5-dokument
- <html lang="nb"> – Rotelementet som omsluttar alt innhald. Attributten lang="nb" angir at språket er norsk bokmål
- <head> – Inneheld metadata om dokumentet (tittel, teiknkoding, stilark osv.) som ikkje blir vist direkte på sida
- <meta charset="UTF-8"> – Angir teiknkodinga slik at norske bokstavar (æ, ø, å) blir viste rett
- <meta name="viewport"> – Gjer at sida tilpassar seg skjermstorleiken på mobil
- <title> – Tittelen som blir vist i fanetittelen i nettlesaren og i søkeresultat
- <body> – Inneheld alt synleg innhald på nettsida
Denne grunnstrukturen er den same for alle nettsider, frå enkle personlege sider til komplekse nettapplikasjonar. Det er viktig å alltid inkludere alle desse elementa for å sikre at nettsida fungerer korrekt i alle nettlesarar.
HTML har eit stort utval element for ulike typar innhald. Her er dei mest brukte:
Overskrifter – Seks nivå frå <h1> (viktigast) 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 -->Lenkjer – Koplar saman sider med hyperlenkjer:
<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>Bilde:
<img src="bilde.jpg" alt="Beskrivelse av bildet" width="600">alt er viktig for tilgjenge – han blir lesen opp av skjermlesarar og blir vist dersom bildet ikkje kan lastast.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å lenkjer angir destinasjonen, src="filnavn" på bilde angir kjeldefila, class="navn" blir brukt til å kople element med CSS-stilar, og id="unik" gjev elementet ein unik identifikator. Globale attributtar som class, id, style og title kan brukast på alle HTML-element, medan andre attributtar berre gjeld bestemte element.Her er ei komplett nettside som viser mange ulike HTML-element 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 nettsida viser ei overskrift, avsnitt med feit tekst, punktliste, nummerert liste, ei lenkje og eit bilde. Nettlesaren tolkar HTML-koden og viser han som ei formatert nettside.
Semantisk HTML tyder at vi brukar element som skildrar tydinga av innhaldet, ikkje berre korleis det skal sjå ut. I staden for å bruke generiske <div>-element overalt, brukar vi spesialiserte element som fortel nettlesarar og skjermlesarar kva innhaldet representerer.
Dei viktigaste semantiske elementa 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 ein 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>Fordelane med semantisk HTML er mange: skjermlesarar kan navigere etter struktur, søkemotorar forstår innhaldet betre, koden er lettare å vedlikehalde, og det gjev eit felles vokabular for webutviklarar.
<header>, <nav>, <main>, <article>, <section> og <footer> er semantiske fordi dei skildrar kva innhaldet er. I motsetning er <div> og <span> ikkje-semantiske element som berre fungerer som generiske behaldarar utan å formidle meining. Bruk av semantisk HTML betrar tilgjenget for personar med funksjonsnedsetjingar, gjev betre søkemotoroptimalisering og gjer koden meir lesbar og vedlikehaldbar.Skjema er fundamentale for brukarinteraksjon på webben. Dei blir brukte til innlogging, søk, tinging, kontaktskjema og mykje meir. Eit HTML-skjema blir oppretta med <form>-elementet og inneheld ulike typar input-felt.
Her er eit døme på eit 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-typar i HTML5 er mellom anna: text for vanleg tekst, email for e-postadresser (med validering), password for passord (blir vist som prikkar), number for tal, date for datoar, url for nettadresser, tel for telefonnummer, checkbox for avkryssingsboksar og radio for alternativknappar. Attributten required gjer at feltet må fyllast ut, og placeholder viser hjelpetekst i feltet.
Det er viktig å skrive gyldig HTML. Vanlege feil inkluderer: gløymde lukketaggar, feilnesta element, manglande alt-attributt på bilde og manglande <!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 nettsida blir vist ulikt i ulike nettlesarar og at skjermlesarar ikkje fungerer rett.
Bruk konsistent innrykk (2 eller 4 mellomrom) for å vise nesting-strukturen i HTML. Innrykk gjer koden mykje lettare å lese og vedlikehalde. Dei fleste teksteditorar kan setjast opp til å gjere dette automatisk. Kvar gong eit element blir nesta inne i eit anna, rykkjer du innhaldet eitt nivå inn.
Kva element blir brukt til å definere hovudoverskrifta på ei nettside?
Kva er føremålet med alt-attributten på eit <img>-element?
Kva HTML-struktur er rett semantisk oppmerking for ein navigasjonsmeny?
Kva er skilnaden mellom <div> og <section> i HTML5?
Skriv HTML-koden for ei enkel nettside om favorittfaget ditt på skulen. Sida skal innehalde:
- Rett HTML5-grunnstruktur (DOCTYPE, html, head, body)
- Ei hovudoverskrift med namnet på faget
- Minst to avsnitt med tekst
- Ei punktliste med tre grunnar til at du likar faget
- Ei lenkje til ei relevant nettside
- Eit bilde med skildrande alt-tekst
Bruk semantisk HTML der det er mogleg.
Lag HTML-koden for eit registreringsskjema for ein nettbutikk. Skjemaet skal innehalde felt for fornamn, etternamn, e-post, passord, fødselsdato, og ein nedtrekksmeny for fylke. Alle obligatoriske felt skal vere markerte med required. Bruk rette input-typar (email, password, date osv.) og kople kvar <label> til sitt input-felt med for-attributten.
Kva er hovudfordelen med å bruke semantisk HTML framfor å berre bruke <div> med klassar for alt?
Oppsummering
I dette kapittelet har du lært:
- HTML: markeringsspraaket som strukturerer nettsider.
- Element og taggar: byggjesteinane i ei nettside.
- Attributtar: tilleggsinformasjon i aapningstaggen.
- Semantisk HTML: element som fortel om tydinga til innhaldet.
- Skjema: lar brukaren leggje inn data.
Noekkelbegrep
| Begrep | Forklaring |
|---|---|
| HTML | Markeringsspraak for struktur på nettsider |
| Attributt | Tilleggsinformasjon i ein HTML-tagg |
| Semantisk HTML | Element som kommuniserer tyding |
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.