HTML-links: ankers, knoppen, afbeeldingen en nieuwe tabbladen
Gids voor HTML-links
HTML-links: ankers, links als knop, afbeeldingslinks, nieuwe tabbladen | We.Inc
Bouw HTML-links die werken: ankerlinks met smooth scroll onder een sticky header, nieuwe tabbladen, links die eruitzien als knoppen, afbeeldingslinks, mailto-, tel- en downloadlinks.
Een HTML-link is een <a>-element met een href: <a href="/pricing">See pricing</a>. Laat href wijzen naar een pagina, naar #id om binnen de pagina te springen, of naar mailto: en tel: om een e-mail of gesprek te starten. Voeg target="_blank" toe voor een nieuw tabblad, en gebruik een <button>, geen link, voor acties die iets veranderen.
Elk linkpatroon dat een kleine site nodig heeft, elk met code die u kunt bewerken en een live resultaat. De demo met ankerlinks toont het probleem met een sticky header en de oplossing in één regel, en de sectie over knoppen maakt duidelijk wanneer een link eruit moet zien als een knop en wanneer hij er een moet zijn.
Kies in de secties hieronder het soort link dat u nodig hebt.
Bewerk het voorbeeld. Het resultaatframe is een echte pagina, dus ankerlinks scrollen en focusringen verschijnen als u op Tab drukt.
Kopieer het fragment en vervang het adres en de linktekst door die van uzelf.
Controleer of de linktekst op zichzelf goed leesbaar is, want gebruikers van schermlezers bladeren vaak door een lijst met links zonder de woorden eromheen.
Schrijf linktekst die de bestemming noemt, zoals Download het voorjaarsmenu, niet klik hier. Dat helpt mensen die scannen en helpt zoekmachines de doelpagina te begrijpen.
Gebruik relatieve paden (/contact) voor pagina's op uw eigen site, zodat links blijven werken op een voorbeeldadres of een nieuw domein.
Geef links naar een nieuw tabblad een hint in de tekst, zoals (opent in een nieuw tabblad), zodat niemand verrast is als de terugknop niets doet.
Houd de ids van ankerlinks kort, in kleine letters en stabiel. Anderen gaan ze als bladwijzer bewaren en delen.
Veelgestelde vragen
Heb ik nog rel="noopener" nodig bij target="_blank"?
Huidige browsers passen het gedrag van noopener automatisch toe op links met target="_blank", zodat de geopende pagina via window.opener niet bij de uwe kan. rel="noopener" toevoegen is nog steeds onschuldig en beschermt heel oude browsers. Voeg ook noreferrer toe als u niet wilt dat de andere site ziet welke pagina de bezoeker heeft gestuurd.
Moet ik een link of een knop gebruiken?
Gebruik <a href> wanneer de klik iemand naar een nieuw adres brengt dat hij als bladwijzer kan bewaren of in een nieuw tabblad kan openen. Gebruik <button> wanneer de klik iets doet op de huidige pagina, zoals een menu openen, een formulier verzenden of iets aan een winkelmandje toevoegen. U kunt elk van beide zo stylen dat het eruitziet als de ander.
Waarom verbergt mijn ankerlink de kop onder mijn sticky header?
De browser scrolt het doel naar de bovenkant van het venster, en daar staat uw vaste header. Voeg scroll-margin-top toe aan de doelen, ingesteld op de hoogte van de header plus wat ruimte, en de kop belandt net eronder.
Waarom werkt het download-attribuut niet voor mijn bestand?
Browsers respecteren download alleen voor bestanden op dezelfde origin als de pagina, of voor blob:- en data:-adressen. Een bestand op een ander domein wordt door de link gewoon geopend, tenzij die server een Content-Disposition-header stuurt die de browser vertelt het op te slaan.
Hoe voeg ik een onderwerp toe aan een mailto-link?
Voeg het toe als querystring: mailto:[email protected]?subject=Booking%20request&body=Hi. Spaties en speciale tekens moeten met percentcodering worden geschreven, dus een spatie wordt %20.
De anatomie van een link
Een <a> zonder href is alleen een tijdelijke plaatshouder: hij is niet met het toetsenbord te bereiken en doet niets bij een klik. Het is de href die er een link van maakt. De tekst tussen de tags is de toegankelijke naam, en bij een afbeeldingslink speelt de alt-tekst van de afbeelding die rol.
Andere attributen verfijnen de link. target bepaalt waar hij opent, rel beschrijft de relatie met de doelpagina (nofollow, noopener, noreferrer, sponsored), download vraagt de browser het bestand op te slaan in plaats van te tonen, en hreflang of type beschrijven de bestemming.
Knoppen en links zijn verschillende bedieningselementen
Toetsenbordgebruikers drukken op Enter om een link te volgen, en op Enter of Spatie om een knop in te drukken. Schermlezers kondigen ze verschillend aan, en alleen links krijgen een contextmenu met Openen in nieuw tabblad. Wordt een link gebruikt voor een actie, of een div voor een van beide, dan verdwijnt een deel van dat gedrag.
De visuele stijl is vrij. Een link Aanmelden in de header kan eruitzien als een volle knop, en een knop Verwijderen in een lijst kan eruitzien als gewone onderstreepte tekst. Kies het element op basis van wat er gebeurt en style het daarna zoals het ontwerp vraagt.
Links toegankelijk maken
Links moeten herkenbaar zijn zonder alleen op kleur te leunen. Een onderstreping doet dat in lopende tekst; in navigatiebalken maakt de lay-out het meestal duidelijk. Houd een zichtbare focusrand, en als u de standaard van de browser vervangt, zorg dan dat de nieuwe genoeg contrast heeft.
Vermijd meerdere links met dezelfde tekst die naar verschillende plekken gaan, zoals een rij links Lees meer. Schrijf verschillende teksten of voeg een visueel verborgen span toe die de zin afmaakt voor gebruikers van schermlezers.
De basislink
Absolute, relatieve en fragmentadressen
Relatieve paden worden opgelost ten opzichte van de huidige pagina; een pad dat met / begint, start bij de root van de site.
Ankerlinks, smooth scroll en sticky headers
Geef het doel een id en link ernaar met #id. scroll-behavior: smooth animeert de sprong, en scroll-margin-top voorkomt dat een sticky header de kop bedekt.
Ankerlinks onder een sticky header
Klik op een link in de balk. Elke sectie belandt net onder de header dankzij scroll-margin-top. Verwijder die regel om het probleem te zien dat hij oplost.
Een link openen in een nieuw tabblad
target="_blank" met een zichtbare hint
Huidige browsers gaan al uit van noopener, maar het kost niets om het te laten staan. noreferrer verbergt bovendien het adres van uw pagina voor de andere site.
Links die eruitzien als knoppen, en echte knoppen
Welk element
De klik…
Element
Voorbeeld
Gaat naar een ander adres
<a href>
Aanmelden, Abonnementen bekijken, Lees de gids
Verzendt een formulier
<button type="submit">
Bericht versturen, Nu betalen
Verandert iets op deze pagina
<button type="button">
Menu openen, In winkelmandje, Meer tonen
Een link gestyled als knop naast een echte knop
Ze zien er hetzelfde uit. Alleen de link kan in een nieuw tabblad worden geopend; alleen de knop hoort bij een formulieractie.
Afbeeldingslinks
Een afbeelding als link
De alt-tekst noemt de bestemming, omdat het de enige tekst van de link is. Hier is de afbeelding een kleine inline SVG, zodat de demo offline werkt.
E-mail-, telefoon- en downloadlinks
mailto en tel
Schrijf telefoonnummers in de href in internationaal formaat zonder spaties. De zichtbare tekst kunt u opmaken zoals u wilt.
Het download-attribuut
De waarde, als die is opgegeven, stelt een bestandsnaam voor. Het geldt alleen voor bestanden op uw eigen origin of voor blob:- en data:-adressen.