Zoeken…


Invoering

Ankertags worden meestal gebruikt om afzonderlijke webpagina's te koppelen, maar ze kunnen ook worden gebruikt om te koppelen tussen verschillende plaatsen in een enkel document, vaak in de inhoudsopgave of zelfs om externe toepassingen te starten. In dit onderwerp wordt de implementatie en toepassing van HTML-ankertags in verschillende rollen uitgelegd.

Syntaxis

  • <a href="URL or anchor">Link Text</a>

parameters

Parameter Details
href Specificeert het bestemmingsadres. Het kan een absolute of relatieve URL zijn, of de name van een anker. Een absolute URL is de volledige URL van een website zoals http://example.com/ . Een relatieve URL verwijst naar een andere map en / of document op dezelfde website, bijvoorbeeld /about-us/ verwijst naar de map 'about-us' in de hoofdmap ( / ). Wanneer u naar een andere map verwijst zonder het document expliciet op te geven, retourneren webservers meestal het document "index.html" in die map.
hreflang Hiermee geeft u de taal op van de bron die is gekoppeld door het kenmerk href (deze moet aanwezig zijn). Gebruik taalwaarden van BCP 47 voor HTML5 en RFC 1766 voor HTML 4.
rel Specificeert de relatie tussen het huidige document en het gekoppelde document. Voor HTML5 moeten de waarden worden gedefinieerd in de specificatie of worden geregistreerd in de wiki van Microformats .
target Geeft aan waar de link moet worden geopend, bijvoorbeeld in een nieuw tabblad of venster. Mogelijke waarden zijn _blank , _self , _parent , _top en framename (verouderd). Het afdwingen van dergelijk gedrag wordt niet aanbevolen, omdat het de controle van de gebruiker over een website schendt.
title Specificeert extra informatie over een link. De informatie wordt meestal weergegeven als een knopinfo wanneer de cursor over de link beweegt. Dit kenmerk is niet beperkt tot links, het kan op bijna alle HTML-tags worden gebruikt.
download Geeft aan dat het doel wordt gedownload wanneer een gebruiker op de hyperlink klikt. De waarde van het kenmerk is de naam van het gedownloade bestand. Er zijn geen beperkingen op toegestane waarden en de browser detecteert automatisch de juiste bestandsextensie en voegt deze toe aan het bestand (.img, .pdf, enz.). Als de waarde wordt weggelaten, wordt de oorspronkelijke bestandsnaam gebruikt.

Dit is het basisgebruik van het element <a> ( een nchor-element) :

<a href="http://example.com/">Link to example.com</a>

Het maakt een hyperlink naar de URL http://example.com/ zoals gespecificeerd door het kenmerk href (hypertext reference), met de ankertekst "Link naar example.com". Het zou er ongeveer zo uitzien:

Link naar example.com


Om aan te geven dat deze link naar een externe website leidt, kunt u het type external link gebruiken:

<a href="http://example.com/" rel="external">example site</a>

U kunt een koppeling maken naar een site die een ander protocol dan HTTP gebruikt. Als u bijvoorbeeld een koppeling naar een FTP-site wilt maken, kunt u

<a href="ftp://example.com/">This could be a link to a FTP site</a>

In dit geval is het verschil dat deze ankertag vraagt dat de browser van de gebruiker verbinding maakt met example.com met behulp van het File Transfer Protocol (FTP) in plaats van het Hypertext Transfer Protocol (HTTP).

Dit kan een link naar een FTP-site zijn

<a href="example.com" target="_blank">Text Here</a>

Het target attribuut specificeert waar de koppeling te openen. Door het op _blank , vertelt u de browser om het in een nieuw tabblad of venster te openen (per gebruikersvoorkeur).

VEILIGHEID KWETSBAARHEID WAARSCHUWING!

Het gebruik van target="_blank" geeft de openingssite gedeeltelijke toegang tot het window.opener object via JavaScript, waardoor die pagina vervolgens de window.opener.location van uw pagina kan openen en wijzigen en gebruikers mogelijk kan omleiden naar malware- of phishing-sites.

Wanneer u dit gebruikt voor pagina's die u niet beheert, voegt u rel="noopener" aan uw link om te voorkomen dat het window.opener object met het verzoek wordt verzonden.

Momenteel ondersteunt Firefox geen noopener , dus u moet rel="noopener noreferrer" voor een maximaal effect.

Ankers kunnen worden gebruikt om naar specifieke tags op een HTML-pagina te springen. De tag <a> kan verwijzen naar elk element met een kenmerk id . Raadpleeg de documentatie over klassen en ID's voor meer informatie over ID 's . Ankers worden meestal gebruikt om naar een subsectie van een pagina te springen en worden gebruikt in combinatie met koptags.

Stel dat u een pagina ( page1.html ) hebt gemaakt over veel onderwerpen:

<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>

Als u eenmaal meerdere secties heeft, wilt u misschien een inhoudsopgave bovenaan de pagina maken met snelkoppelingen (of bladwijzers) naar specifieke secties.

Als u een id kenmerk aan uw onderwerpen hebt gegeven, kunt u er vervolgens naar linken

<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>

Nu kunt u het anker in uw inhoudsopgave gebruiken:

<h1>Table of Contents</h1>
    <a href='#Topic1'>Click to jump to the First Topic</a>
    <a href='#Topic2'>Click to jump to the Second Topic</a>

Deze ankers zijn ook gekoppeld aan de webpagina waarop ze zich bevinden ( page1.html ). U kunt dus van de ene pagina naar de andere over de site linken door naar de pagina en de ankernaam te verwijzen.

 Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.

Gebruik gewoon het javascript: -protocol om de tekst als JavaScript uit te voeren in plaats van deze als een normale link te openen:

<a href="javascript:myFunction();">Run Code</a>

U kunt ook hetzelfde bereiken met het kenmerk onclick :

<a href="#" onclick="myFunction(); return false;">Run Code</a>

De return false; is nodig om te voorkomen dat uw pagina naar boven schuift wanneer op de link naar # wordt geklikt. Zorg ervoor dat je alle code opneemt die je ervoor wilt uitvoeren, omdat het retourneren de uitvoering van verdere code zal stoppen.

Ook opmerkelijk, u kunt een uitroepteken toevoegen ! na de hashtag om te voorkomen dat de pagina naar boven schuift. Dit werkt omdat een ongeldige naaktslak ervoor zorgt dat de link nergens op de pagina schuift, omdat het het element waarnaar het verwijst niet kon vinden (een element met id="!" ). Je kunt ook gewoon een ongeldige slug gebruiken (zoals #scrollsNowhere ) om hetzelfde effect te bereiken. return false; in dit geval return false; is niet nodig:

<a href="#!" onclick="myFunction();">Run Code</a>

Moet je hier iets van gebruiken?

Het antwoord is vrijwel zeker nee . Het uitvoeren van JavaScript inline met het element als dit is een vrij slechte gewoonte. Overweeg het gebruik van pure JavaScript-oplossingen die zoeken naar het element op de pagina en er in plaats daarvan een functie aan koppelen. Luisteren naar een evenement

Overweeg ook of dit element echt een knop is in plaats van een link . Als dit het geval is, moet u <button> .

U kunt een relatief pad gebruiken om naar pagina's op dezelfde website te linken.

<a href="/example">Text Here</a>

Het bovenstaande voorbeeld zou gaan om het bestand example in de root directory ( / ) van de server.


Als deze link op http://example.com stond , zouden de volgende twee links de gebruiker naar dezelfde locatie brengen

<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>

Beide bovenstaande zouden naar het page in de hoofdmap van example.com .

Basis gebruik

Als de waarde van het href -attribuut begint met mailto: het probeert een e-mailclient te openen bij klik:

<a href="mailto:[email protected]">Send email</a>

Hiermee wordt het e-mailadres [email protected] als ontvanger voor de nieuw gemaakte e-mail geplaatst.


Cc en Bcc

U kunt ook adressen toevoegen voor cc- of bcc-ontvangers met behulp van de volgende syntaxis:

<a href="mailto:[email protected][email protected]&[email protected]">Send email</a>

Onderwerp en hoofdtekst

U kunt ook het onderwerp en de hoofdtekst invullen voor de nieuwe e-mail:

<a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>

Die waarden moeten URL-gecodeerd zijn .


Als u op een koppeling met mailto: klikt, wordt geprobeerd de standaard e-mailclient te openen die is opgegeven door uw besturingssysteem of wordt u gevraagd welke client u wilt gebruiken. Niet alle opties die zijn opgegeven na het adres van de ontvanger worden ondersteund in alle e-mailclients.

Als de waarde van het href -attribuut begint met tel: :, kiest uw apparaat het nummer wanneer u erop klikt. Dit werkt op mobiele apparaten of op computers / tablets met software - zoals Skype of FaceTime - die kunnen bellen.

<a href="tel:11234567890">Call us</a>

De meeste apparaten en programma's zullen de gebruiker op de een of andere manier vragen het nummer te bevestigen dat hij gaat bellen.



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow