Du har lagt inn et bilde på nettsiden, men nettleseren viser bare et tomt ikon. Du har skrevet en lenke, men den åpner seg i samme fane i stedet for en ny. Problemet ligger i HTML-attributtene. Elementer alene bestemmer hva som skal vises. Attributtene bestemmer hvordan det skal oppføre seg. Uten riktige attributter gjør elementene sjelden det du forventer.
Hva er HTML-attributter?
En HTML-attributt er en innstilling du legger til i åpnetaggen på et element. Den gir nettleseren ekstra informasjon om elementet: hvor et bilde skal hentes fra, hvor en lenke skal peke, eller hvor bredt et bilde skal være. Attributter endrer aldri hva elementet er, men de styrer hva det gjør og hvordan det ser ut.
Alle HTML-attributter følger samme mønster: attributtnavnet, et likhetstegn, og verdien i doble anførselstegn. For eksempel: src="bilde.jpg". Fire regler gjelder alltid:
- Attributtnavn skrives med små bokstaver.
- Verdien settes i doble anførselstegn.
- Attributter står alltid i åpnetaggen, aldri i lukketaggen.
- Flere attributter skilles med mellomrom.
Bryter du disse reglene, kan koden fortsatt fungere i noen nettlesere. Men den blir uforutsigbar og vanskeligere å vedlikeholde. Hold deg til konvensjonen.
Bildeelementet: src, alt, width og height
Bildeelementet <img> er et godt sted å se attributter i praksis. Det er et tomt element (ingen lukketag), og uten attributter viser det ingenting. Du trenger minst src for å angi bildefilen.
src (source) peker til bildefilen, enten som en relativ sti til en lokal fil eller en full URL til et bilde på en annen server. Uten src har nettleseren ingenting å vise.
alt er en tekstbeskrivelse av bildet. Hvis bildet ikke laster, vises denne teksten i stedet. Skjermlesere leser alt-teksten høyt for brukere med synshemning. Søkemotorer bruker den for å forstå hva bildet viser. En god alt-tekst er kort og beskrivende: "Rød sykkel parkert foran kafeen" er bedre enn "bilde" eller en tom verdi.
width og height angir bredde og høyde i piksler. Mange hopper over disse, men det er en feil. Når nettleseren laster en side, bygger den opp layouten før alle bildene er hentet. Uten width og height vet den ikke hvor mye plass bildet trenger. Resultatet er at innholdet hopper rundt når bildet endelig laster inn. Dette kalles layout shift, og det er frustrerende for brukeren og negativt for Googles Core Web Vitals.
Med width og height reserverer nettleseren riktig plass fra starten. Siden føles stabil, og brukeren slipper at teksten plutselig flytter seg mens de leser. Du trenger ikke å angi de eksakte pikslene bildet vises i. Det holder å oppgi bildets faktiske dimensjoner. CSS kan skalere bildet etterpå, mens nettleseren bruker forholdet mellom width og height til å beregne riktig plass.
Lenkeelementet: href, target og rel
Lenkeelementet <a> gjør tekst og bilder klikkbare. Den viktigste attributten er href (hypertext reference), som angir hvor lenken peker. Verdien kan være en full URL til en ekstern side, en relativ sti til en annen side på samme nettsted, eller en ankertag som peker til en spesifikk seksjon på samme side.
target="_blank" åpner lenken i en ny fane. Uten target åpnes lenken i samme fane. Bruk target="_blank" for eksterne lenker der du ikke vil at brukeren forlater siden din. For interne lenker, la brukeren bli i samme fane.
rel beskriver forholdet mellom din side og siden du lenker til. Tre verdier er spesielt vanlige:
- nofollow forteller søkemotorer at de ikke skal følge lenken eller overføre "linkjuice". Brukes typisk for betalte lenker eller lenker du ikke går god for.
- noreferrer hindrer at mottakersiden ser hvor besøkende kom fra.
- noopener er et sikkerhetstiltak. Uten noopener kan en side åpnet med target="_blank" i teorien manipulere den opprinnelige siden gjennom JavaScript.
Du kan kombinere flere rel-verdier med mellomrom: rel="nofollow noreferrer noopener". Publiseringsverktøy som WordPress legger ofte til disse automatisk når du oppretter eksterne lenker, nettopp fordi det er lett å glemme dem manuelt.
Vanlige feil med HTML-attributter
Den hyppigste feilen er å glemme anførselstegnene rundt verdien. src=bilde.jpg kan fungere i noen tilfeller, men src="bilde.jpg" fungerer alltid. Bruk alltid anførselstegn.
En annen vanlig feil er å plassere attributter i lukketaggen. Skriver du </a href="side.html">, ignorerer nettleseren attributten fullstendig. Attributter hører hjemme i åpnetaggen, uten unntak.
Å utelate alt-tekst på bilder er også utbredt. Siden fungerer visuelt uten alt, og det virker som en unødvendig detalj. Men for tilgjengelighet og SEO er alt-teksten en av de viktigste HTML-attributtene du kan sette. Gjør det til en vane å alltid legge inn en beskrivende alt-tekst.
Pass også på rekkefølgen av attributter. Den spiller ingen teknisk rolle, men en konsistent rekkefølge gjør koden lettere å lese. En vanlig konvensjon for img er å skrive src først, deretter alt, og til slutt width og height. For lenker skriver du href først, deretter target og rel. Konsistens gjør det enklere å oppdage feil når du leser gjennom koden.
Neste steg
Nå som du forstår hvordan HTML-attributter fungerer, er neste steg å lære hvordan elementer oppfører seg i layouten. Artikkelen om block vs inline i HTML forklarer forskjellen mellom elementer som tar hele bredden og elementer som flyter ved siden av hverandre. For mer om hvordan du strukturerer tekst og lenker på en nettside, kan du lese videre under Tekst og lenker.
Denne artikkelen bygger på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset jobber du praktisk med alle de vanligste HTML-attributtene, fra bilder og lenker til skjemaelementer og mediafiler.
