HTML står for HyperText Markup Language og er et markeringsspråk som beskriver strukturen i et dokument. Det gjør at nettleseren kan vise innholdet på en forståelig og brukervennlig måte.
Kort sagt er HTML byggesteinene alle nettsider er laget av. I denne guiden går vi gjennom hva HTML er, hvordan det fungerer, og hvordan et dokument er bygd opp – forklart enkelt for nybegynnere.
Å lære grunnleggende HTML er forresten en fin og fornuftig måte å bruke tid online på.
Grunnleggende konsepter i HTML
HTML er bygget opp av elementer som bestemmer hva slags innhold som skal vises, og hvordan det skal struktureres. Hvert element har en bestemt funksjon og skrives med tagger, som markerer starten og slutten på innholdet.
Slik organiseres tekst, bilder, lenker og andre komponenter, slik at nettleseren kan tolke og vise dem korrekt. Nettleseren leser koden og presenterer innholdet på skjermen slik det er ment å vises.
Elementer
Et HTML-dokument består av ulike elementer, som hver har sin funksjon. Et element starter vanligvis med en åpnings-tagg og avsluttes med en slutt-tagg.
For eksempel lages et avsnitt med p-elementet, en overskrift med h1 til h6, en lenke med a-taggen, et bilde med img-taggen og en tabell med table-taggen. Elementene kan kombineres og nestes inni hverandre for å lage mer komplekse strukturer.
Vanlige HTML-tagger
| Tagg | Funksjon | Eksempel |
|---|---|---|
| <h1>–<h6> | Overskrifter, fra viktigst til minst viktig | <h1>Tittel</h1> |
| <p> | Avsnitt (paragraf) | <p>Litt tekst.</p> |
| <a> | Lenke til en annen side | <a href=»…»>Tekst</a> |
| <img> | Bilde | <img src=»bilde.jpg» alt=»Beskrivelse»> |
| <ul> <ol> <li> | Lister (uordnet/ordnet) og listepunkt | <ul><li>Punkt</li></ul> |
| <table> | Tabell med rader og celler | <table>…</table> |
| <br> | Linjeskift (selvavsluttende) | Linje<br>Ny linje |
Attributter
Attributter gir ekstra informasjon om hvordan et element skal tolkes eller vises. De skrives inne i åpnings-taggen og har som regel en verdi.
Et vanlig eksempel er href-attributtet i en lenke, som angir adressen det skal lenkes til. Et annet er alt-attributtet på bilder, som gir en tekstlig beskrivelse for brukere som ikke kan se bildet.
Attributter er viktige for både tilgjengelighet og søkemotoroptimalisering, fordi de gir informasjon som ikke alltid vises direkte på siden. Noen elementer krever bestemte attributter: img-taggen må for eksempel alltid ha et src-attributt som peker til bildefilen.
Selvavsluttende elementer
Noen elementer inneholder ikke innhold mellom en start- og slutt-tagg, og kalles derfor selvavsluttende. Eksempler er img (bilde), br (linjeskift) og hr (horisontal linje).
Disse skrives uten egen slutt-tagg. De brukes ofte for å sette inn bilder, lage linjeskift eller skille innhold med en strek.
HTML-syntaks og dokumentstruktur
Et HTML-dokument følger en bestemt struktur. Helt øverst står en doctype-erklæring, som forteller hvilken HTML-versjon dokumentet bruker. For HTML5 skrives dette som doctype html.
Etter dette kommer selve koden, delt inn i to hoveddeler: head og body. Head-delen inneholder informasjon om dokumentet, som tittel, tegnsett og eventuelle stilsett. Body-delen inneholder innholdet som faktisk vises på siden.
Oppbygningen av et enkelt HTML-dokument
<!DOCTYPE html>
<html>
<head>
<title>Sidetittel</title>
</head>
<body>
<h1>Overskrift</h1>
<p>Et avsnitt med tekst.</p>
</body>
</html>Doctype forteller hvilken HTML-versjon som brukes. head inneholder informasjon om siden, mens body inneholder innholdet som vises.
Overskrifter
Overskrifter brukes til å strukturere innholdet og gjøre siden mer oversiktlig. HTML har seks nivåer, fra h1 til h6, der h1 er viktigst.
En nettside bør som hovedregel ha én h1, som brukes til sidens hovedtittel. Deretter brukes h2 for underoverskrifter og h3 for enda mindre overskrifter. Riktig bruk av overskrifter gjør det enklere for både brukere og søkemotorer å forstå innholdet.
Lenker
En lenke lages med a-taggen og må ha et href-attributt som angir adressen. Beskrivende lenketekster gjør nettsiden mer tilgjengelig og brukervennlig.
Lenker kan også navigere internt på samme side ved hjelp av såkalte ankerlenker. Da gir man et element et id-attributt og lenker til dette id-et. I tillegg kan lenker åpne e-postklienter eller starte nedlasting av filer, avhengig av hvordan href er satt opp.
Semantisk HTML
Semantisk HTML betyr å bruke elementer som beskriver hva innholdet faktisk er. Da blir det lettere for både mennesker og maskiner å forstå siden.
Eksempler er header for topptekst, nav for navigasjon, main for hovedinnhold og footer for bunntekst. Semantisk HTML er viktig for tilgjengelighet, søkemotoroptimalisering og vedlikehold.
Ved å bruke riktige elementer kan søkemotorer lettere forstå og indeksere innholdet, samtidig som brukere med hjelpemidler får en bedre opplevelse. Strukturen blir også tydeligere og enklere å oppdatere senere.
Lister og tabeller
Lister og tabeller presenterer informasjon på en strukturert måte. HTML har to hovedtyper lister: uordnede lister med ul, og ordnede lister med ol. Hver liste består av listepunkter, laget med li.
Tabeller lages med table og bygges opp av rader (tr) og celler. Cellene er enten dat]celler (td) eller overskriftsceller (th). Tabeller egner seg godt til å vise data og annen informasjon som passer i rader og kolonner.
Stilsett og CSS
HTML bestemmer strukturen på innholdet, mens utseendet styres av CSS (Cascading Style Sheets). CSS brukes til farger, skrifttyper, marger, avstander og mye mer.
Ved å skille struktur og utseende kan man endre designet uten å røre selve HTML-koden. CSS kan legges inn direkte i elementene, i head-delen, eller i en egen fil som kobles til med link-taggen.
Den vanligste metoden er en egen CSS-fil, fordi den lar deg styre utseendet på mange sider samtidig. CSS gjør det også mulig å tilpasse nettsider for ulike enheter, som mobil og nettbrett.
HTML-fil og versjoner
En HTML-fil er en vanlig tekstfil med filendelsen .html eller .htm. For å lage en trenger du bare en enkel teksteditor, som Notisblokk. Åpner du filen i en nettleser, tolkes koden og innholdet vises slik det er beskrevet.
HTML ble laget av Tim Berners-Lee ved forskningssenteret CERN i 1991, og den første versjonen hadde bare rundt 18 tagger. Siden har språket utviklet seg gjennom flere versjoner, med HTML 4.01 fra 1999 som lenge var standard.
I dag er HTML5 den gjeldende versjonen. Den ble en offisiell W3C-standard i 2014 og vedlikeholdes nå som en «living standard» som oppdateres løpende. HTML5 ga blant annet støtte for innebygd video og lyd, bedre semantikk og mulighet for å lage avanserte webapplikasjoner rett i nettleseren.
Kunnskap om HTML er nyttig for alt fra blogging til å bygge en digital tilstedeværelse, for eksempel når du vil markedsføre deg gjennom Instagram eller følge med på hva som er nytt i nettverdenen.
Ofte stilte spørsmål
Hva betyr HTML?
HTML står for HyperText Markup Language. Det er et markeringsspråk som beskriver strukturen på en nettside, slik at nettleseren kan vise innholdet riktig.
Er HTML et programmeringsspråk?
Nei. HTML er et markeringsspråk. Det beskriver struktur og innhold, men inneholder ikke logikk slik ekte programmeringsspråk gjør. Til det brukes gjerne JavaScript.
Hva er forskjellen på HTML og CSS?
HTML bestemmer strukturen og innholdet på en side, mens CSS styrer utseendet – som farger, skrifttyper og avstander. De brukes sammen, men har hver sin oppgave.
Hva er en tagg?
En tagg markerer starten eller slutten på et element. De fleste elementer har en åpnings-tagg og en slutt-tagg, med innholdet imellom.
Trenger jeg spesielle programmer for å skrive HTML?
Nei. Du klarer deg med en enkel teksteditor, som Notisblokk. Filen lagres med endelsen .html og åpnes i en nettleser.
Hvilken HTML-versjon brukes i dag?
HTML5 er den gjeldende versjonen. Den ble offisiell W3C-standard i 2014 og oppdateres nå løpende som en «living standard».
