Hvordan lage en HTML-lenke

En HTML-lenke er koden som gjør tekst eller et bilde klikkbart, slik at leseren sendes videre til en annen nettside, en fil eller et bestemt sted på siden. Du trenger ikke være programmerer for å lage en – alt du behøver er ett enkelt HTML-element og noen få attributter. I denne guiden går vi gjennom hvordan du skriver en lenke fra bunnen av, hvilke attributter du kan bruke, og hvordan du unngår de vanligste feilene. Alle eksemplene er standard HTML, fungerer i alle moderne nettlesere og kan limes rett inn i bloggen eller nettsiden din.

Hva er en HTML-lenke?

En HTML-lenke (også kalt hyperlenke) lages med <a>-elementet, der «a» står for anchor – anker på engelsk. Lenker er selve bindeleddet mellom sidene på nettet: det er de som gjør det mulig å klikke seg fra én side til en annen. Uten lenker ville internett bare vært en samling frittstående dokumenter uten vei mellom seg.

Et <a>-element består av en start-tagg, selve teksten eller bildet som skal være klikkbart, og en slutt-tagg. Den viktigste delen er attributtet href, som bestemmer hvor lenken fører. For å få mest mulig ut av denne guiden er det en fordel å vite litt om hva HTML er fra før, men det er ikke noe krav – vi forklarer alt underveis.

Slik bygger du opp en lenke steg for steg

En enkel lenke består av fire deler. La oss se på en ferdig lenke som fører til VG, og deretter bryte den ned:

<a href="https://www.vg.no">VG Nett</a>

Her er hva hver del betyr:

• Start-taggen <a forteller nettleseren at en lenke begynner.
• Attributtet href="https://www.vg.no" er adressen (URL-en) som bestemmer hvor du havner når du klikker. Et attributt er en ekstra opplysning du gir til et HTML-element, og verdien skrives alltid inne i anførselstegn.
• Den klikkbare teksten VG Nett er det leseren faktisk ser og kan klikke på. Denne kalles ofte ankertekst.
• Slutt-taggen </a> markerer hvor lenken slutter.

Vil du lage din egen lenke, bytter du bare ut adressen og teksten. Her er en mal du kan fylle ut:

<a href="URL TIL DESTINASJON">KLIKKBAR TEKST</a>

Et konkret eksempel som fører leseren til forsiden til en søkemotor:

<a href="https://www.google.no">Søk på Google</a>

Prinsippet er det samme uansett hvor du vil lenke – du kan på samme måte også definere overskrifter med HTML eller legge til bilde med HTML med lignende enkle elementer.

Gjør et bilde om til en lenke

En lenke trenger ikke være tekst – du kan gjøre et bilde klikkbart ved å legge <img>-elementet inne i <a>-taggen i stedet for tekst. Dette brukes ofte til logoer, bannere og knapper:

<a href="https://www.vg.no"><img src="logo.png" alt="VG"></a>

Her peker src til bildefilen, mens alt er en kort tekstbeskrivelse av bildet. alt-teksten er viktig: den leses opp av skjermlesere og vises dersom bildet ikke lastes, og den fungerer da som ankertekst for lenken. Hopp derfor aldri over alt når bildet er klikkbart. Både selve bildet og et usynlig område rundt det blir klikkbart, så pass på at bildet ikke er større enn nødvendig.

Åpne lenken i en ny fane med target

Attributtet target styrer hvor den lenkede siden skal åpnes. Som standard åpnes lenken i samme fane, men legger du til target="_blank", åpnes den i en ny fane eller et nytt vindu:

<a href="https://www.vg.no" target="_blank">VG Nett</a>

target kan ha fire vanlige verdier:

• _self – åpner lenken i samme fane. Dette er standard og trenger ikke skrives.
• _blank – åpner lenken i en ny fane eller et nytt vindu.
• _parent – åpner lenken i det overordnede vinduet, nyttig når siden ligger i en ramme (frame).
• _top – åpner lenken i hele nettleservinduet og bryter ut av eventuelle rammer.

Når du bruker target="_blank", bør du av sikkerhetsgrunner også legge til rel="noopener noreferrer":

<a href="https://www.vg.no" target="_blank" rel="noopener noreferrer">VG Nett</a>

Grunnen er at en side som åpnes i ny fane historisk kunne få en referanse tilbake til siden din gjennom JavaScript-egenskapen window.opener, og i verste fall sende den opprinnelige fanen videre til en falsk side. Verdien noopener hindrer dette. Ifølge MDN gir moderne nettlesere nå denne beskyttelsen automatisk for alle target="_blank"-lenker, men å skrive rel="noopener" selv beskytter også brukere på eldre nettlesere og gjør hensikten tydelig i koden. Tenk ellers på brukervennligheten: uventede nye faner kan forvirre leseren, så bruk _blank med måte.

Relative og absolutte URL-er

Adressen i href kan skrives på to måter, og forskjellen er viktig å forstå. En absolutt URL inneholder hele adressen, inkludert https:// og domenet, for eksempel https://www.vg.no/sport. Den brukes når du lenker til en annen nettside enn din egen.

En relativ URL peker derimot til en side på ditt eget nettsted og utelater domenet, for eksempel /om-oss eller kontakt.html. Nettleseren fyller da automatisk inn resten ut fra hvor den lenkede siden ligger i forhold til gjeldende side. Relative lenker er praktiske fordi de fortsetter å virke selv om du bytter domene eller flytter nettstedet, men de kan bare brukes internt. Skal du lenke ut til andre sider, må du alltid bruke en absolutt URL med fullt domene.

Lenke til e-post, telefon, filer og et bestemt punkt på siden

En lenke trenger ikke å peke til en nettside. Ved å endre starten på href kan du lage lenker som utfører helt andre handlinger.

Lenke til e-post med mailto:

Skriver du mailto: foran en e-postadresse, åpner lenken leserens e-postprogram med et nytt, tomt utkast til den adressen:

<a href="mailto:[email protected]">Send oss en e-post</a>

Du kan også fylle ut emnefelt og meldingstekst på forhånd ved å legge til parametere, for eksempel mailto:[email protected]?subject=Hei.

Lenke til telefonnummer med tel:

Med tel: lager du en lenke som lar leseren ringe nummeret direkte – spesielt nyttig på mobil:

<a href="tel:+4712345678">Ring oss</a>

Oppførselen varierer med enheten: en mobil slår vanligvis nummeret, mens en datamaskin kan åpne et ringeprogram eller lagre nummeret. Skriv alltid nummeret med landskode (+47 for Norge) så det virker uansett hvor leseren befinner seg.

Lenke til et bestemt sted på siden (ankerlenke)

Du kan lenke til et bestemt avsnitt på samme side ved å gi målet en id og peke til den med en firkanttast (#) i href. Dette kalles en ankerlenke og brukes blant annet til innholdsfortegnelser og «tilbake til toppen»-lenker:

<a href="#priser">Hopp til priser</a>

Lenken over fører leseren til elementet som har id="priser" lenger nede på siden, uten at siden lastes på nytt. Vil du lenke til et bestemt punkt på en annen side, setter du firkanttasten etter adressen, for eksempel side.html#priser.

Lenke til en fil for nedlasting

Attributtet download ber nettleseren laste ned filen i stedet for å åpne den, og du kan foreslå et filnavn:

<a href="/filer/rapport.pdf" download="aarsrapport.pdf">Last ned rapporten</a>

Vær oppmerksom på at download først og fremst virker for filer som ligger på ditt eget domene (samme opphav).

rel-attributtet, SEO og betalte lenker

Attributtet rel beskriver forholdet mellom din side og siden du lenker til, og brukes særlig for å gi søkemotorer et hint om lenken. Google introduserte i 2019 flere verdier som i dag behandles som hint (ikke absolutte direktiver). De viktigste er:

• rel=»nofollow» – brukes når du ikke ønsker å gå god for lenken eller sende rangeringskreditt videre.
• rel=»sponsored» – for lenker som finnes på grunn av betaling, som annonser, sponsede innlegg og affiliate-lenker.
• rel=»ugc» – for lenker i brukergenerert innhold, som kommentarer og foruminnlegg.

Du kan kombinere flere verdier, for eksempel rel="ugc sponsored". For vanlige, redaksjonelle lenker trenger du derimot ingen rel-verdi i det hele tatt. Vil du forstå hvorfor lenker betyr så mye for synlighet i søk, kan du lese mer om hva backlinks er.

Slik skriver du god ankertekst

God ankertekst beskriver hvor lenken fører, både for lesere, søkemotorer og skjermlesere. Unngå intetsigende tekst som «klikk her» eller «les mer» alene – de forteller ingenting når de leses utenfor sammenhengen. Skriv heller <a href="/priser">se våre priser</a> enn «klikk her for priser».

Dette er samtidig et tilgjengelighetskrav: personer som bruker skjermleser kan hoppe mellom lenkene på en side, og da leses ankerteksten opp uten teksten rundt. Beskrivende ankertekst gjør derfor siden din lettere å bruke for alle, og hjelper samtidig søkemotorene å forstå hva den lenkede siden handler om. Du kan også legge til et title-attributt for en liten forklaringstekst som vises når leseren holder musepekeren over lenken, men ikke bruk det som erstatning for tydelig ankertekst.

Slik legger du inn lenken i WordPress og bloggverktøy

De fleste bloggsystemer har en innebygd lenkeknapp, så du slipper å skrive HTML for hånd i det daglige. I WordPress merker du teksten du vil gjøre klikkbar, klikker på lenkesymbolet (eller trykker Ctrl/Cmd + K), limer inn adressen og trykker Enter. En liten bryter lar deg velge om lenken skal åpnes i ny fane.

Noen ganger vil du likevel redigere HTML-en direkte – for eksempel for å legge til et rel-attributt eller rydde opp i koden. I WordPress finner du dette ved å bytte til «Rediger som HTML» i blokkredigeringen. Vil du se hvordan en lenke er bygd opp på en annen side, kan du lære hvordan du ser HTML-kilden til en side. Skal du jobbe mer med kode, finnes det flere gratis HTML- og CSS-editorer som gjør det enklere å skrive og teste lenker.

Vanlige feil når du lager HTML-lenker

Selv en enkel lenke kan slutte å virke hvis en liten detalj mangler. Her er feilene som går oftest igjen:

• Glemt slutt-tagg. Uten </a> fortsetter nettleseren å gjøre resten av teksten klikkbar. Hver <a> må alltid avsluttes.
• Manglende anførselstegn. Adressen i href skal stå inne i anførselstegn. Glemmer du ett av dem, kan hele lenken bli ødelagt.
• Glemt https:// i en ekstern lenke. Skriver du bare href="www.vg.no", tolker nettleseren det som en side på ditt eget nettsted. Eksterne lenker må ha fullt domene med https://.
• target=»_blank» uten rel. Husk rel="noopener noreferrer" når lenken åpnes i ny fane.
• Intetsigende ankertekst. «Klikk her» er dårlig både for brukere og for SEO – beskriv heller målet.
• Lenke til en side som ikke finnes. Kontroller alltid at adressen er riktig og at siden er oppe, så leseren ikke møter en 404-feil.

Vanlige spørsmål (FAQ)

Hva betyr href i en HTML-lenke?

href står for «hypertext reference» og er attributtet som bestemmer hvor lenken fører. Verdien er adressen (URL-en) som leseren sendes til når hen klikker, og den skrives alltid inne i anførselstegn.

Hvordan åpner jeg en lenke i en ny fane?

Legg til target="_blank" i <a>-taggen. Av sikkerhetsgrunner bør du samtidig legge til rel="noopener noreferrer". Bruk likevel ny fane med måte, siden det kan forvirre leseren.

Kan jeg gjøre et bilde til en lenke?

Ja. Du setter bare <img>-elementet inne i <a>-taggen i stedet for tekst, slik: <a href="https://www.vg.no"><img src="bilde.jpg" alt="VG"></a>. Da blir hele bildet klikkbart.

Hva er forskjellen på nofollow, sponsored og ugc?

Alle tre er verdier for rel-attributtet som gir søkemotorer et hint om lenken. sponsored brukes for betalte lenker, ugc for brukergenerert innhold som kommentarer, og nofollow når du ikke vil gå god for lenken. Vanlige redaksjonelle lenker trenger ingen av dem.

Må jeg kunne HTML for å lage en lenke i WordPress?

Nei. WordPress og de fleste bloggverktøy har en lenkeknapp der du merker teksten, limer inn adressen og trykker Enter. Du trenger bare HTML hvis du vil redigere lenken manuelt, for eksempel for å legge til et rel-attributt.