HTML
Ankers en hyperlinks

Invoering

Syntaxis

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

parameters

Link naar een andere site

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

Open link in nieuw tabblad / venster

<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.

Link naar een anker

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.

Link die JavaScript uitvoert

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> .

Link naar een pagina op dezelfde site

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 .

Link die e-mailclient uitvoert

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.

Link die een nummer kiest

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.