Gå til innhold

Lenker

Lenker er det som gjør nettet til et "web" - de kobler sider sammen. I HTML lages lenker med <a>-elementet.

Grunnleggende lenke

<a href="https://nrk.no">Gå til NRK</a>
  • <a> - anchor (anker) elementet
  • href - adressen lenken peker til
  • Teksten mellom taggene er klikkbar

Typer lenker

Ekstern lenke

Lenker til andre nettsteder:

<a href="https://nrk.no">NRK</a>
<a href="https://yr.no">Yr</a>

Intern lenke

Lenker til andre sider på samme nettsted:

<a href="about.html">Om oss</a>
<a href="contact.html">Kontakt</a>
<a href="pages/info.html">Info</a>

Relativ vs. absolutt sti

<!-- Absolutt (full URL) -->
<a href="https://example.com/page.html">Lenke</a>

<!-- Relativ (fra nåværende mappe) -->
<a href="page.html">Samme mappe</a>
<a href="folder/page.html">Undermappe</a>
<a href="../page.html">Overordnet mappe</a>

Åpne i ny fane

<a href="https://nrk.no" target="_blank">NRK (ny fane)</a>

Target-verdier

Verdi Effekt
_self Samme fane (standard)
_blank Ny fane/vindu
_parent Foreldreramme
_top Hele vinduet

Sikkerhet

Når du bruker target="_blank", legg til rel="noopener" for sikkerhet: 

<a href="https://nrk.no" target="_blank" rel="noopener">NRK</a>

Lenke til seksjon

Du kan lenke til en spesifikk del av siden med # og id:

<!-- Lenken -->
<a href="#kontakt">Gå til kontakt</a>

<!-- Målseksjonen -->
<section id="kontakt">
    <h2>Kontakt oss</h2>
    <p>...</p>
</section>

Lenke til seksjon på annen side

<a href="about.html#team">Se teamet vårt</a>

Tilbake til toppen

<a href="#">Tilbake til toppen</a>

E-postlenke

<a href="mailto:hei@example.com">Send e-post</a>

<!-- Med emne -->
<a href="mailto:hei@example.com?subject=Hei!">Send e-post</a>

<!-- Med emne og innhold -->
<a href="mailto:hei@example.com?subject=Hei&body=Melding her">Send e-post</a>

Telefonlenke

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

Spesielt nyttig på mobil - telefonen tilbyr å ringe nummeret.

Nedlastingslenke

<a href="dokument.pdf" download>Last ned PDF</a>

<!-- Med egendefinert filnavn -->
<a href="dokument.pdf" download="rapport-2024.pdf">Last ned</a>

Bilde som lenke

<a href="https://nrk.no">
    <img src="nrk-logo.png" alt="NRK logo">
</a>

Hele bildet blir klikkbart.

Lenke med title

<a href="page.html" title="Klikk for mer informasjon">Les mer</a>

title vises som tooltip når du holder musen over lenken.

Lenketilstander (CSS)

Lenker har forskjellige tilstander som kan styles med pseudo-klasser:

/* Ikke besøkt */
a:link {
    color: blue;
}

/* Besøkt */
a:visited {
    color: purple;
}

/* Musepeker over */
a:hover {
    color: red;
}

/* Klikket på */
a:active {
    color: orange;
}

Rekkefølge

Husk rekkefølgen: Link, Visited, Hover, Active (LoVe HAte)

<nav>
    <ul>
        <li><a href="index.html">Hjem</a></li>
        <li><a href="about.html">Om oss</a></li>
        <li><a href="services.html">Tjenester</a></li>
        <li><a href="contact.html">Kontakt</a></li>
    </ul>
</nav>

Tilgjengelighet

Beskrivende lenketekst

<!-- Bra -->
<a href="prices.html">Se våre priser</a>

<!-- Dårlig -->
<a href="prices.html">Klikk her</a>

Skjermlesere leser ofte bare lenketeksten, så den bør gi mening alene.

Skip-lenke

For tilgjengelighet, la brukere hoppe over navigasjonen:

<a href="#main" class="skip-link">Hopp til hovedinnhold</a>

<nav>...</nav>

<main id="main">
    ...
</main>

.skip-link {
    position: absolute;
    top: -40px;
}

.skip-link:focus {
    top: 0;
}

Praktiske eksempler

Sosiale medier

<div class="social">
    <a href="https://facebook.com/..." target="_blank" rel="noopener">
        Facebook
    </a>
    <a href="https://twitter.com/..." target="_blank" rel="noopener">
        Twitter
    </a>
    <a href="https://instagram.com/..." target="_blank" rel="noopener">
        Instagram
    </a>
</div>

Brødsmulesti

<nav class="breadcrumb">
    <a href="/">Hjem</a> &gt;
    <a href="/produkter">Produkter</a> &gt;
    <span>Sko</span>
</nav>

<footer>
    <a href="privacy.html">Personvern</a> |
    <a href="terms.html">Vilkår</a> |
    <a href="mailto:post@example.com">Kontakt</a>
</footer>

Oppsummering

Type Eksempel
Ekstern href="https://nrk.no"
Intern href="../about.html"
Seksjon href="#kontakt"
E-post href="mailto:a@b.com"
Telefon href="tel:+4712345678"
Nedlasting href="../fil.pdf" download
Ny fane target="_blank"