Lær å bygge nettsider med HTML, bruke semantiske elementer og strukturere innhold på en tilgjengelig og meningsfull måte.
Skjelettet under alt du ser
Enhver nettside du noensinne har besøkt, har et skjelett. Under fargene, bildene og animasjonene ligger det en struktur som bærer alt sammen -- og det skjelettet er bygget med HTML, HyperText Markup Language. Det er grunnmuren i hele weben, det aller første du må lære for å bygge noe på nett.
En viktig presisering med en gang: HTML er ikke et programmeringsspråk. Det regner ikke, det tar ingen beslutninger. Det er et markeringsspråk -- det beskriver strukturen og innholdet på en side. Det forteller nettleseren hva som er en overskrift, hva som er et avsnitt, hva som er en lenke. Nettleseren leser denne beskrivelsen og tegner den opp visuelt for deg.
I denne fortellingen skal vi lære å bygge dette skjelettet. Vi skal forstå hvordan HTML-elementer er bygget opp, bli kjent med grunnstrukturen som alle sider deler, og oppdage den viktige forskjellen mellom kode som bare ser riktig ut og kode som faktisk betyr noe -- det vi kaller semantikk. Til slutt skal vi lage skjemaer, så brukeren kan snakke tilbake til oss.
Byggeklossen: elementet
Alt i HTML er bygget av elementer, og et element består typisk av tre deler. Ta dette lille avsnittet: <p class="intro">Dette er et avsnitt.</p>. Først kommer en åpningstag, <p>, som forteller at her starter et avsnitt. Så kommer selve innholdet, teksten. Og til slutt en lukkingstag, </p>, med en skråstrek som markerer at avsnittet slutter. Skråstreken er nøkkelen -- den sier «her tar dette elementet slutt».
Mange elementer har også attributter, som gir tilleggsinformasjon. I eksempelet over er class="intro" et attributt. Det vanligste attributtet du kommer til å bruke, er href på en lenke, som forteller hvor lenken peker. Attributter står alltid inni åpningstaggen.
Noen få elementer er selvlukkende -- de har ikke noe innhold og trenger derfor ingen lukkingstag. Et linjeskift, <br>, og et bilde, <img>, er slike. De gjør jobben sin på ett sted og er ferdige. Når du først har forstått dette mønsteret -- åpningstag, innhold, lukkingstag, med attributter på kjøpet -- har du forstått selve grammatikken i HTML.
Grunnplanen og de vanlige delene
Akkurat som et hus følger en grunnplan, følger alle HTML-dokumenter den samme grunnstrukturen. Helt øverst står <!DOCTYPE html>, som forteller nettleseren at dette er moderne HTML5. Deretter omslutter <html>-elementet hele dokumentet, ofte med lang="nb" for å angi at språket er norsk bokmål.
Inni deler dokumentet seg i to hoveddeler. <head> inneholder metadata -- informasjon som ikke vises direkte på siden, men som nettleseren trenger: tegnkodingen (<meta charset="UTF-8"> sørger for at æ, ø og å vises riktig), instruksjoner for mobilvisning, og <title>, som er teksten du ser i nettleserfanen. Den andre delen, <body>, inneholder alt det synlige -- alt brukeren faktisk ser på skjermen.
Inni body bygger du opp innholdet med vanlige elementer. Overskrifter går fra <h1>, den viktigste og største, ned til <h6>, den minste. Avsnitt skrives med <p>. Lenker lages med <a> og attributtet href. Bilder settes inn med <img>, der src peker på bildefilen og alt gir en tekstbeskrivelse for dem som ikke kan se bildet. Lister lager du med <ul> eller <ol>. Og når du trenger en nøytral beholder til å gruppere ting, har du <div> for blokker og <span> for å markere tekst inni en linje. Dette er det grunnleggende ordforrådet ditt.
Når koden betyr noe
Nå kommer et av de viktigste poengene i hele kapittelet, og det handler om forskjellen på kode som ser riktig ut og kode som faktisk betyr noe. Dette kalles semantisk HTML.
Tenk deg at du bygger en side bare ved hjelp av nøytrale <div>-bokser: en <div id="header"> på toppen, en <div id="nav"> for menyen, en <div id="content"> for innholdet. Visuelt kan dette se helt fint ut. Men for en datamaskin -- en søkemotor eller en skjermleser for blinde -- er alle disse boksene like meningsløse. De vet ikke hva som er toppen, hva som er menyen, hva som er hovedinnholdet.
Løsningen er semantiske elementer, som beskriver innholdets betydning. I stedet for nøytrale div-er bruker du <header> for toppen, <nav> for navigasjonen, <main> for hovedinnholdet (og det skal bare være ett av dem per side), <article> for selvstendig innhold som en bloggpost eller nyhet, <section> for tematiske grupper, <aside> for sideinnhold, og <footer> for bunnteksten. Forskjellen på <div> og <section> er nettopp dette: <section> sier «dette hører tematisk sammen», mens <div> bare sier «dette er en boks». Semantisk HTML er ikke pirk -- det gjør sidene dine mer tilgjengelige for funksjonshemmede og lettere å forstå for søkemotorer. Det er rett og slett bedre håndverk.
Lister, lenker og dialog med brukeren
La oss fylle skjelettet med liv. Lister kommer i to typer. En uordnet liste, <ul>, gir punkter uten nummer -- perfekt når rekkefølgen ikke betyr noe. En ordnet liste, <ol>, gir nummererte punkter -- perfekt for en oppskrift eller stegvise instruksjoner. I begge tilfeller er hvert punkt et <li>-element.
Lenker er selve limet i weben, det som binder sider sammen. De lages med <a> og href. Du kan lenke til en helt annen nettside med en full adresse, til en annen side på samme nettsted med et filnavn, eller til en bestemt del av samme side ved å bruke en # foran et id-navn. Uten lenker hadde weben ikke vært et nett i det hele tatt.
Men nettsider er ikke bare noe vi leser -- ofte vil vi at brukeren skal kunne svare tilbake. Til det bruker vi skjemaer, bygget med <form>. Inni et skjema legger du inn felt med <input>, der attributtet type bestemmer hva slags felt det er: text for vanlig tekst, email for e-post (som til og med sjekker at formatet er riktig), password for skjult tekst, og flere til som number, date, checkbox og radio. Hvert felt bør ha en <label> som forklarer hva det er, og som kobles til feltet via attributtene for og id -- viktig for tilgjengelighet. Vil du gjøre et felt obligatorisk, legger du på required. Et større tekstfelt lager du med <textarea>, og helt til slutt en <button type="submit"> som sender inn det hele. Med skjemaer åpner du for en ekte dialog mellom siden og den som bruker den.
Oppsummering
Vi har bygget nettsidens skjelett med HTML -- markeringsspråket som beskriver struktur og innhold, ikke logikk. Grunnsteinen er elementet med åpningstag, innhold og lukkingstag, ofte med attributter, mens noen er selvlukkende. Alle sider deler en grunnstruktur med <!DOCTYPE html>, et <head> for metadata og et <body> for det synlige.
Viktigst av alt lærte vi semantisk HTML: å bruke elementer som <header>, <nav>, <main>, <article> og <footer> som beskriver innholdets betydning -- bedre for tilgjengelighet og søkemotorer enn nøytrale div-er. Til slutt fylte vi skjelettet med liv: lister med <ul> og <ol>, lenker med <a href>, og skjemaer med <form>, <input>, <label> og <button>, så brukeren kan svare tilbake. Nå har du ordforrådet til å bygge ekte nettsider.
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.