Länkar & ankarlänkar

Utan länkar, ingen webb

Du har redan skrivit länkar. I navigationsmenyn la du <a href="..."> utan att vi stannade upp och förklarade vad de faktiskt gör. Nu gör vi det, för länken är inte vilken tagg som helst. Den är hela idén bakom webben.

Ordet webb betyder nät. Det som gör webben till ett nät, och inte bara en hög med lösa dokument, är att sidor pekar på varandra med länkar. Utan länken vore varje sida en isolerad ö.

En länk kan peka på tre ställen: en annan sajt, en annan sida på din egen sajt, eller en bestämd plats på sidan du redan står på. Den sista, ankarlänken, är den du behöver för innehållsförteckningen i Gutenberg-projektet. Och den bygger på något du redan sett: id.

Ankaret: `<a>` och `href`

En länk består av två delar: elementet <a> (anchor, alltså ankare) och attributet href (hypertext reference, alltså målet).

<a href="https://sv.wikipedia.org">Läs mer på Wikipedia</a>

Texten mellan taggarna är det synliga och klickbara. href är vart klicket leder. Byter du ut texten ändras inte målet, och tvärtom. Håll isär de två: texten är för människan, href är för webbläsaren.

Interna och externa länkar

En länk pekar antingen inåt, på din egen sajt, eller utåt, på någon annans.

En intern länk pekar på en annan fil i ditt eget projekt. Ligger om.html i samma mapp som sidan du skriver i räcker filnamnet:

<a href="om.html">Om projektet</a>

En extern länk pekar på en annan webbplats och behöver hela adressen, inklusive https://:

<a href="https://www.gutenberg.org">Project Gutenberg</a>

Glömmer du https:// på en extern länk tror webbläsaren att du menar en fil på din egen sajt, och länken går sönder. Hur du pekar mellan mappar tar vi på djupet i Tema 2. Här räcker filnamn i samma mapp.

Ankarlänkar: hoppa inom sidan

Ibland vill du inte byta sida, du vill hoppa till en viss plats på sidan du redan står på. Det är precis vad en innehållsförteckning gör. Till det använder du en ankarlänk.

Den bygger på id. Minns du att vi sa att ett id är unikt och att vi inte stylar med det? Här får det sitt riktiga jobb: att vara ett mål att hoppa till.

Först sätter du ett id på det du vill kunna hoppa till:

<h2 id="kapitel-1">Kapitel 1</h2>

Sedan länkar du dit med en fyrkant (#) framför exakt samma namn:

<a href="#kapitel-1">Kapitel 1</a>

Klickar du på länken hoppar sidan till rubriken, och adressen i webbläsaren får ett tillägg: .../index.html#kapitel-1. Det är fragmentet, delen efter #, som pekar ut var på sidan du befinner dig.

Länktext som betyder något

En skärmläsaranvändare kan be om en lista över alla länkar på sidan, precis som du snabbt skummar med ögat. Då läses bara länktexten upp, utan meningen runt omkring.

En sida full av “Läs mer” och “Klicka här” blir då en meningslös ramsa: “Läs mer, Klicka här, Läs mer”. Skriv i stället länktext som säger vart den leder: “Läs mer om kapitel 1”, eller bara “Kapitel 1”. Bra länktext fungerar även utryckt ur sitt sammanhang.

Pröva i DevTools

Öppna en sida med minst en länk och tryck F12.
Markera ett <a>-element i Element-trädet. Hitta attributet href i taggen, det är länkens mål.
Har sidan en ankarlänk? Klicka på den och titta i webbläsarens adressfält. Ser du hur #... läggs till på slutet?
Dubbelklicka på ett id i Elements-panelen och stava om det till något annat. Klicka på ankarlänken igen. Hoppar sidan fortfarande?
Ställ tillbaka id:t och kontrollera att hoppet funkar igen.

Uppgift: Bygg en innehållsförteckning

Vi förbereder det du behöver till Gutenberg-projektet, direkt i din övningssida.

Ge din <main> två avsnitt, vart och ett med en <h2>. Sätt ett unikt id på varje, t.ex. <h2 id="avsnitt-1"> och <h2 id="avsnitt-2">.
Skapa en innehållsförteckning högst upp i <main>: en <ol> med ett <li> per avsnitt, där varje <li> innehåller en ankarlänk (<a href="#avsnitt-1">) till rätt rubrik.
Lägg till en extern länk i din <footer> till en sajt du gillar. Kom ihåg hela adressen med https://.
Öppna sidan och testa: hoppar innehållsförteckningen till rätt avsnitt? Leder den externa länken rätt?

Vad händer om…

Ändra href="#avsnitt-1" till href="#avsnitt-ett" men lämna id="avsnitt-1" orört. Klicka på länken. Hoppar sidan? Öppna DevTools Console, ser du något felmeddelande? Det gör du inte, och det är just därför tysta fel är lömska. Ställ tillbaka så att de matchar igen.

Motivera & reflektera

I din readme.md, förklara med egna ord skillnaden mellan en intern länk, en extern länk och en ankarlänk. Ge ett eget exempel på när var och en är rätt val.

Nästa nivå

En ankarlänk kan göra en sida mer tillgänglig, inte bara navigerbar. Bygg en skip-link: allra först i <body>, lägg en länk <a href="#main">Hoppa till innehåll</a> och ge din <main> ett id="main". En tangentbordsanvändare kan då hoppa förbi hela menyn direkt till innehållet med en enda tangenttryckning. Testa: ladda om sidan och tryck Tab en gång. Dyker länken upp? Det är exakt den här länken du får användning för i Gutenberg-projektets utmaning.