HTML står for Hypertext Markup Language og er et markeringsspråk som beskriver strukturen i et dokument slik at nettleseren kan vise innholdet på en forståelig og brukervennlig måte.
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. Hva er HTML benyttes til å organisere tekst, bilder, lenker og andre komponenter slik at nettleseren kan tolke og vise dem korrekt. Alle artiklene på teknodag.com er for eksempel strukturert med hva er HTML. Nettleseren leser hva er HTML-koden og presenterer innholdet på skjermen slik det er ment å vises.
Elementer
HTML-dokumenter består av ulike elementer, som hver har sin spesifikke funksjon. Et element starter med en åpnings-tagg og avsluttes med en slutt-tagg. For eksempel brukes <p> for avsnitt, og et enkelt avsnitt kan skrives slik: <p>Dette er et eksempel på et avsnitt.</p>. De mest brukte HTML-elementene inkluderer blant annet <h1> til <h6> for overskrifter, <a> for lenker, <img> for bilder og <table> for tabeller. Elementene kan kombineres og nestes for å lage mer komplekse strukturer.
Attributter
Attributter gir ekstra informasjon om hva er HTML-elementet skal tolkes eller vises. De skrives i åpnings-taggen og har alltid en verdi. For eksempel brukes attributtet href i en lenke for å angi adressen det skal lenkes til: <a href=»https://edicra.no/»>Besøk Edicra</a>. Et annet vanlig attributt er alt for bilder, som gir en tekstlig beskrivelse av bildet for brukere som ikke kan se det: <img src=»bilde.jpg» alt=»Et eksempelbilde»>. Attributter er viktige for både tilgjengelighet og søkemotoroptimalisering, fordi de gir ekstra informasjon som ikke nødvendigvis vises direkte på nettsiden.
Noen elementer krever bestemte attributter for å fungere korrekt. For eksempel må <img> alltid ha et src-attributt som peker til bildefilen, og det anbefales alltid å bruke alt-attributtet for å beskrive bildet. Attributter kan også brukes til å angi stil, id, klasse og andre egenskaper som påvirker hvordan elementet vises eller oppfører seg.
Selvavsluttende elementer
Noen HTML-elementer inneholder ikke innhold mellom start- og slutt-tagg, og kalles derfor selvavsluttende. Eksempler på slike elementer er <img>, <br> (linjeskift) og <hr> (horisontal linje). Disse taggene skrives uten slutt-tagg og brukes ofte for å sette inn bilder, lage linjeskift eller skille innhold med en linje. Selvavsluttende elementer gjør det enklere å skrive og lese hva er HTML-koden, og de brukes ofte sammen med andre elementer for å lage mer avanserte oppsett.
HTML-syntaks og dokumentstruktur
Et HTML-dokument følger en bestemt struktur. Helt øverst står alltid en doctype-erklæring, som forteller hva er HTML- versjonen dokumentet bruker. For HTML5 skrives dette som <!DOCTYPE html>. Etter doctype kommer selve HTML-koden, som er delt inn i to hoveddeler: <head> og <body>. <head>-delen inneholder informasjon om dokumentet, som tittel, tegnsett og eventuelle stilsett. <body>-delen inneholder selve innholdet som skal vises på nettsiden, som tekst, bilder, lenker og annet.
Overskrifter
Overskrifter brukes til å strukturere innholdet på en nettside og gjøre det mer oversiktlig for brukeren. HTML har seks nivåer av overskrifter, fra <h1> til <h6>, der <h1> er viktigst og brukes for hovedtittelen på siden. Underskrifter bruker <h2>, <h3> og så videre. Riktig bruk av overskrifter gjør det enklere for både brukere og søkemotorer å forstå innholdet. En nettside bør alltid ha én <h1>, som ofte brukes til sidens hovedtittel. Deretter kan man bruke <h2> for underoverskrifter, og <h3> for enda mindre overskrifter.
Lenker
En lenke lages med <a>-taggen, og må alltid ha et href-attributt som angir adressen det skal lenkes til. For eksempel: <a href=»https://edicra.no/»>Edicra</a>. Lenker kan også brukes til å navigere internt på samme side, ved å bruke såkalte ankerlenker. Dette gjøres ved å gi et element et id-attributt, og deretter lage en lenke til dette id-et. For eksempel: <a href=»#seksjon2″>Gå til seksjon 2</a>. Dette gjør det enklere å lage oversiktlige og brukervennlige nettsider.
Lenker kan også åpne e-postklienter eller starte nedlasting av filer, avhengig av hvordan href-attributtet er satt opp. Beskrivende lenketekster gjør nettsiden tilgjengelig og brukervennlig.
Semantisk HTML
Semantisk HTML gjør det lettere for både mennesker og maskiner å forstå innholdet. For eksempel bør man bruke <header> for topptekst, <nav> for navigasjon, <main> for hovedinnhold, og <footer> for bunntekst. Semantisk HTML er viktig for tilgjengelighet, søkemotoroptimalisering og vedlikeholdbarhet. Ved å bruke riktige elementer kan søkemotorer lettere indeksere innholdet, og brukere med hjelpemidler får en bedre opplevelse.
Semantiske elementer gjør det også enklere å vedlikeholde og oppdatere nettsiden, fordi strukturen blir tydeligere og mer logisk.
HTML-liste og tabeller
Lister og tabeller presenterer informasjon på en strukturert måte. HTML har to hovedtyper lister: ordnede lister (<ol>) og uordnede lister (<ul>). Hver liste består av flere listeelementer (<li>). For eksempel kan en uordnet liste se slik ut: <ul><li>Første punkt</li><li>Andre punkt</li></ul>. Tabeller lages med <table>, og består av rader (<tr>) og celler (<td> for data, <th> for overskrifter). Tabeller brukes ofte til å vise data, statistikk eller annen informasjon som egner seg for oppstilling i rader og kolonner.
Stilsett og CSS
HTML bestemmer strukturen på innholdet, men utseendet styres av CSS (Cascading Style Sheets). CSS brukes til å angi farger, skrifttyper, marger, avstander og mye mer. Ved å bruke CSS kan man gjøre nettsider både penere og mer brukervennlige, uten å endre selve hva er HTML-koden. CSS kan legges til på flere måter: direkte i HTML-elementene, i <head>-delen av dokumentet, eller i egne filer. Den mest brukte metoden er å lage en egen CSS-fil, som deretter kobles til HTML-dokumentet med <link>-taggen. Dette gjør det enkelt å endre utseendet på mange sider samtidig, og gir bedre oversikt og kontroll.
CSS gjør det også mulig å tilpasse nettsider for ulike enheter, som mobiltelefoner og nettbrett. Dette er viktig for å sikre at nettsiden ser bra ut og fungerer godt uansett hvilken enhet brukeren har.
HTML-fil og versjoner
En HTML-fil er en vanlig tekstfil med filendelsen .html eller .htm. For å lage en HTML-fil trenger du bare en enkel teksteditor, som Notisblokk eller lignende. Når filen åpnes i en nettleser, tolkes koden og innholdet vises slik det er beskrevet i hva er HTML-dokumentet. Den første spesifikasjonen kom i 1991, og siden har det kommet flere oppdateringer. HTML4 var lenge standarden, men i dag gir HTML5 støtte for mange nye funksjoner, blant annet innebygd video og lyd, bedre semantikk, og mulighet for å lage avanserte webapplikasjoner direkte i nettleseren.
