Du har en nettside med godt innhold, men den lever i isolasjon. Ingen veier fører til andre sider, ingen knapper sender brukeren videre. Det som gjør nettet til et nett er lenker, og i HTML lager du dem med a-taggen. Med riktig bruk av href, target og rel styrer du hvor lenken peker, hvordan den åpnes, og hvilken informasjon som deles med mottakersiden.
Slik lager du en HTML-lenke med a-taggen
En lenke i HTML bruker ankerpunktelementet, skrevet som a. Mellom åpnings- og lukketaggen skriver du teksten brukeren ser. Attributtet href forteller nettleseren hvor lenken skal peke.
<a href="https://utdannet.no">Besøk Utdannet</a>
Brukeren ser teksten «Besøk Utdannet» som en klikkbar lenke. Når de klikker, navigerer nettleseren til adressen i href. Uten href er a-taggen bare tekst uten funksjon.
Du kan lenke til mye mer enn nettsider. href godtar ulike typer adresser:
- Nettsider: href="https://utdannet.no"
- E-postadresser: href="mailto:hei@utdannet.no" (åpner e-postklienten)
- Telefonnummer: href="tel:+4712345678" (starter et anrop på mobil)
- Filer: href="dokument.pdf" (laster ned eller åpner filen)
- Steder på samme side: href="#kontakt" (hopper til et element med id="kontakt")
Hver href-type utløser ulik oppførsel i nettleseren. En mailto-lenke åpner e-postprogrammet, en tel-lenke starter et telefonanrop, og en vanlig URL navigerer til en ny side. Nettleseren vet hva den skal gjøre basert på prefikset.
Åpne lenker i ny fane med target
Som standard åpner alle lenker i samme fane. Brukeren navigerer bort fra siden din. Noen ganger vil du at lenken skal åpne i en ny fane i stedet, for eksempel når du lenker til en ekstern side og ikke vil at brukeren skal forlate din.
<a href="https://utdannet.no" target="_blank">Besøk Utdannet</a>
target="_blank" åpner lenken i en ny fane. target="_self" er standardverdien og åpner i samme fane. Du trenger ikke skrive target="_self" fordi det er standardoppførselen.
Bruk target="_blank" med omhu. Hvis hver lenke på siden åpner en ny fane, ender brukeren opp med 15 åpne faner og mister oversikten. En god tommelfingerregel er å bruke ny fane for eksterne lenker der brukeren forventes å komme tilbake, og samme fane for intern navigasjon.
Styr relasjonen med rel-attributtet
rel forteller nettleseren hva slags forhold din side har til siden du lenker til. Dette attributtet er valgfritt for de fleste lenker, men det finnes situasjoner der det er viktig å bruke.
De tre vanligste verdiene er:
- nofollow signaliserer til søkemotorer at du ikke går god for den lenkede siden. Google skal ikke gi SEO-kreditt til mottakersiden basert på din lenke. Brukes typisk for betalte lenker, brukerkommentarer, og innhold du ikke kan kontrollere kvaliteten på.
- noreferrer hindrer at mottakersiden ser hvor besøkende kom fra. Uten noreferrer kan mottakersiden se i sin trafikkstatistikk at brukeren klikket fra din side.
- noopener hindrer at den nye fanen får tilgang til vinduet som åpnet den. Dette er en sikkerhetsmekanisme som beskytter mot ondsinnede sider som prøver å manipulere opprinnelsessiden.
Du kan kombinere flere verdier i samme rel-attributt, adskilt med mellomrom:
<a href="https://eksempel.no" target="_blank" rel="nofollow noreferrer noopener">Ekstern side</a>
Publiseringssystemer som WordPress legger automatisk til noreferrer og noopener på alle eksterne lenker med target="_blank". Det er en sikkerhetspraksis som de fleste moderne nettsider følger. Skriver du ren HTML, bør du gjøre det manuelt.
Skriv lenketekst som fungerer
Teksten mellom a-taggene kalles lenketekst (eller ankertekst). Den bør fortelle brukeren hva som skjer når de klikker. "Klikk her" og "Les mer" er dårlig lenketekst fordi den ikke gir informasjon uten konteksten rundt.
Sammenlign disse to:
- For å lære mer om CSS, <a href="/kurs/css-kurs">klikk her</a>
- Lær mer i <a href="/kurs/css-kurs">CSS-kurset</a>
Den andre versjonen er bedre av to grunner. Skjermleserbrukere navigerer ofte gjennom en liste over lenker på siden. Da ser de bare lenketeksten uten kontekst. "CSS-kurset" gir mening alene, "klikk her" gjør det ikke. I tillegg bruker Google lenketeksten for å forstå hva mottakersiden handler om. Beskrivende lenketekst er bra for intern lenkebygging og SEO.
Forskjellen på interne og eksterne HTML-lenker
Interne lenker peker til andre sider på samme nettsted. Eksterne lenker peker til andre nettsteder. Forskjellen i HTML er ofte bare adressen i href, men praksisen rundt dem er ulik.
For interne lenker bruker du vanligvis relative URL-stier og åpner i samme fane. For eksterne lenker bruker du den fulle adressen (absolutt URL) og vurderer target="_blank" sammen med rel="noopener noreferrer".
Interne lenker er viktige for brukeropplevelsen fordi de hjelper besøkende med å finne relatert innhold. De er også viktige for søkemotorer som bruker dem til å oppdage og forstå strukturen på nettstedet ditt.
Vanlige feil med HTML-lenker
Lenker uten href. En a-tagg uten href-attributt ser ut som en lenke i koden, men fungerer ikke som en i nettleseren. Brukeren kan ikke klikke den, og skjermlesere ignorerer den. Har du en a-tagg, gi den alltid en href.
Lenke til en side som ikke finnes. Døde lenker frustrerer brukere og skader SEO. Test lenkene dine jevnlig. Verktøy som W3C Markup Validation Service kan hjelpe deg med å finne problemer i HTML-koden din.
target="_blank" uten rel. Når du åpner en ekstern lenke i ny fane uten noopener, kan mottakersiden i teorien manipulere vinduet ditt. Moderne nettlesere har begynt å legge til noopener automatisk, men det er god praksis å sette det selv.
Neste steg
Nå som du kan lage HTML-lenker med a-taggen, href, target og rel, kan du koble sider sammen og navigere brukere rundt i innholdet ditt. For å forstå forskjellen mellom absolutte og relative adresser i href, les om URL-stier i HTML. Strukturer du teksten riktig med HTML-overskrifter, blir navigasjonen innenfor en side også bedre.
Denne artikkelen er basert på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset lærer du også å lage navigasjonsmenyer, lenke til e-post og ressurser, og jobbe med URL-fragmenter.
