Struktur med mening
Bygg sidens skjelett med semantiske tagger som header og main.
HTML handler ikke bare om *at* det står ting på siden, men *hva* tingene er. En tittel er ikke bare stor tekst — den er en tittel. Denne leksjonen handler om å bruke tagger som betyr noe.
Øvelsen ligger i arbeidsområdet nederst på siden. Der finner du en liten side for en kafé der alt innholdet ligger rett på rad og rekke. Jobben din er å bygge sidens skjelett med semantiske tagger.
Hvorfor «mening» er viktig
Du *kunne* pakke alt i <div>-er — det ville sett likt ut. Men <header>, <main> og <footer> forteller nettleseren, søkemotorer og skjermlesere hva hver del er: toppen med identiteten, hovedinnholdet, og avslutningen med det små. Det kalles semantisk HTML — HTML med mening.
Oppgaven
- Pakk tittelen og introen inn i et
<header>-element. - Pakk hovedinnholdet inn i et
<main>-element (husk lukketaggen</main>). - Legg til et
<footer>-element nederst med en liten avslutning.
Obs
Riktig rekkefølge
Husk å lukke det du åpner: <header> slutter med </header>. Hvis siden ser rart ut, er det som regel en glemt lukketagg. Klem deg inn mellom taggene og se at alt sitter der det skal.
En tommelfingerregel du kan bruke lenge: én <header> og én <main> per side, og en <footer> nederst. Inni dem plasserer du innholdet som før — overskrifter, avsnitt og alt annet du lærer ellers i kurset.
Du kan nå
- bygge et sidesskjelett med
<header>,<main>og<footer> - forklare hvorfor semantiske tagger er bedre enn bare
<div> - sikre at alle tagger du åpner også blir lukket
Arbeidsområdet
NettsideHer er en liten side for Kafé Solglimt der alt innholdet ligger rett på rad og rekke. Bygg sidens skjelett med semantiske tagger etter oppgaven over — innholdet skal ikke endres, bare pakkes riktig inn.
Tips: Ctrl + Enter kjører koden, Ctrl + Shift + Enter sjekker løsningen (Cmd på Mac).
Framdriften din
0 av 4
- Har et <header>-element øverst
- Har et <main>-element rundt hovedinnholdet
- Har lukket </main>
- Har et <footer>-element nederst
Trykk «Kjør» for å se siden din.
Forhåndsvisningen åpner her, ved siden av koden din.
Konsoll
Kjør koden for å se output her.