Links i HTML og CSS
Når man laver links i HTML er der en række overvejelser man bør gøre sig, læs hvilke her i artiklen.
Edited: 2020-07-01 10:37
I HTML kan man lave et link ved at bruge a elementet. A står for anchor, og bliver brugt til, at lave et link som brugerne kan klikke på. Ofte vil man lave et tekst-link, men det er også muligt, at lave billede links med a elementet.
A elementer skal have en href attribut. Href bliver brugt til, at angive destinationen for linket. Hvis man linker til en side på samme domænenavn, kan man nøjes med at angive en relativ sti i href attributten. Hvis man derimod linker til en side på et andet domænenavn, skal man angive den absolutte sti.
Se også: Absolutte og Relative Stier
a elementet skal selvfølgelig både have et åbnings tag og et lukke tag. Desuden er a elementet et såkaldt inline element, hvilket betyder, at det typisk vil blive placeret i et block element. Det kan enten være et liste element (li), eller et p element (til tekstafsnit).
HTML koden til et rent link kan ses nedenfor:
<a href="https://beamtic.dk/">Link til Beamtic</a>
Ændring af udseende på links med CSS
Ved at bruge de såkaldte CSS pseudo-classes kan man styre hvad der sker med et element, når musen holdes over elementet. Det gælder ikke kun for links, men også for andre elementer. Når ønsker at ændre på links, skal man dog gøre det i en bestemt rækkefølge, som vist nedenfor:
a:link {}
a:visited {}
a:hover {}
a:active {}
Det er meget normalt, at man fjerner understregningen på links. Det kan man gøre ved at angive text-decoration:none; på :link reglen. Samtidig kan man vælge at angive en standard farve for linket.
a:link {color:#4A5def;text-decoration:none;}
Hvis man ønsker at linket skal skifte farve når musen føres over, skal man have fat i :hover reglen. Den færdige CSS kode kan eksempelvis se således ud:
a:link {color:#4a5def;text-decoration:none;}
a:visited {color:#4a5def;}
a:hover {color:#000;}
a:active {color:#4a5def;}
CSS koden vist ovenfor vil påvirke alle links på en side.
Avancerede CSS selectors
Hvis man i stedet ønsker, at det kun skal være de links som er placeret i et nav element, kan man skrive det ind foran de enkelte regler.
nav a:link {color:#4a5def;text-decoration:none;}
nav a:visited {color:#4a5def;}
nav a:hover {color:#000;}
nav a:active {color:#4a5def;}
Samme fremgangsmåde kan benyttes når det handler om ID og classes. Her vil man så bare skrive firkant (#) for IDer, og punktum (.) for classes.
#right_nav a:link {color:#4a5def;text-decoration:none;}
#right_nav a:visited {color:#4a5def;}
#right_nav a:hover {color:#000;}
#right_nav a:active {color:#4a5def;}
Placeringen af links i HTML
Hvordan man skal placere et link i HTMLen, afhænger af hvad type link der er tale om. Navigations links vil man typisk placere i en ul eller ol liste, som igen bliver placeret i et nav element. Begge dele kan hjælpe med at gøre siden mere tilgængelig for skærmoplæsere.
Det er generelt dårligt, kun at adskille en liste af links med mellemrum eller linjeskift, da det kan gøre det svære for brugere af skærmoplæsere at forstå siden. Derfor bruger benytter man enten en usorteret- eller sorteret liste (ul og ol.
Desuden skal man selvfølgelig placere sine links i body området af HTMLen.
En korrekt kodet navigations-menu vil altså ligne, den som er vist nedenfor:
<nav>
<ol>
<li><a href="/om">Om Beamtic</a></li>
<li><a href="/kontakt">Kontakt</a></li>
<li><a href="/privatliv">Privat Politik</a></li>
</ol>
</nav>
Det er meget normalt, at man placere en navigations menu i header eller footer elementet på en side. Dog vil man generelt placere den udenfor article.
Fortæl os hvad du tænker: