3.2 HTML: Struktur og semantikk
Lær å bygge nettsider med HTML, bruke semantiske elementer og strukturere innhold på en tilgjengelig og meningsfull måte.
60 min
6 oppgaver
HTML-elementer og taggerSemantiske elementer (header, nav, main, footer)Overskrifter, avsnitt og listerLenker og bilderTabeller og skjemaer
Din fremgang i kapitlet
0 / 6 oppgaver
HTML: Struktur og semantikk
HTML er grunnmuren i alle nettsider. Det er et markeringsspråk (ikke et programmeringsspråk) som beskriver strukturen og innholdet på en nettside. Nettleseren leser HTML-koden og viser innholdet visuelt.
I dette kapittelet lærer du å skrive HTML, bruke semantiske elementer, og lage interaktive skjemaer.
HTML-element
Et HTML-element består av tre deler:
`` Dette er et avsnitt.html`
└┬┘ └────┬────┘ └───────┬────────┘ └┬┘
tag attributt innhold lukkingstag
Noen elementer er selvlukkende og har ikke innhold, f.eks. (linjeskift) og ` (bilde).
Grunnstrukturen i et HTML-dokument
Alle HTML-dokumenter følger den samme grunnstrukturen:
`` Dette er min første nettside.html`
Velkommen!
- – forteller nettleseren at dette er HTML5
- – roten av dokumentet, lang="nb" angir språket
-
– metadata som ikke vises på siden (tittel, tegnkoding)
- – alt synlig innhold på sidenVanlige HTML-elementer
Element Beskrivelse Eksempel til
Overskrifter (h1 er størst) Hovedtittel
Avsnitt Brødtekst her.
Lenke Klikk her ![]()
Bilde 
,
Uordnet/ordnet liste Se eksempel nedenfor Generisk beholder For gruppering ` Inline beholder For tekstmarkering
Semantisk HTML
Semantiske elementer beskriver innholdets betydning, ikke bare utseende. Dette er viktig for tilgjengelighet og søkemotorer.
``html......
`
Viktige semantiske elementer:
- – topptekst for siden eller en seksjon
-
Lister, lenker og skjemaer
Uordnet liste (punktliste):
``html`
Ordnet liste (nummerert):
`html`
Lenker kobler sider sammen:
`html`
Besøk NRK
Om oss
Gå til kontakt
Skjemaer lar brukere sende inn data:
`html
`
Viktige input-typer: text, email, password, number, date, checkbox, radio`.
✏️En komplett semantisk nettside
Eksempel: Personlig porteføljeside
``html
Kari Nordmann
Jeg er elev på VG1 IM og interessert i webutvikling.
Om meg
En responsiv nettside laget med HTML og CSS.
Mine prosjekter
Prosjekt 1: Nettside for skoleband
`
Legg merke til bruken av semantiske elementer: ,
Oppsummering
- HTML er markeringsspråket som beskriver strukturen på nettsider
- Et element består av åpningstag, innhold og lukkingstag
- Attributter gir tilleggsinformasjon til elementer
- Semantiske elementer (, , ) beskriver innholdets betydning
- Lister lages med
- Lenker lages med
- Skjemaer bruker , , og
Oppgaver
Lett1 oppgave
Medium4 oppgaver
Vanskelig1 oppgave