H3 - Links maken

Je breidt de bestaande map www uit met Portfolio, Over en Contact. Aan het eind werken vier pagina’s samen. Er komt geen nieuw project naast je werk uit H1 en H2.

• Een link maak je met de <a>-tag.
• De letter a staat voor anchor. In het Nederlands betekent dat anker.
• Een link bestaat meestal uit een openingstag, zichtbare linktekst en een sluit-tag.
• Met het attribuut href geef je aan waar de link naartoe gaat.
• De tekst tussen de tags is klikbaar en moet duidelijk maken wat er gebeurt.

<a href="https://www.example.com">Bezoek deze website</a>

• Een goede linktekst is concreet, bijvoorbeeld Bekijk de contactpagina.
• Een zwakke linktekst is vaag, bijvoorbeeld klik hier.
• Zoekmachines en schermlezers gebruiken linkteksten om te begrijpen waar een pagina over gaat.
• Een paar gram SEO: gebruik normale woorden in je linktekst en maak duidelijk waar de link naartoe leidt.

• Een interne link verwijst naar een pagina binnen je eigen website.
• Een externe link verwijst naar een andere website.
• Voor interne links gebruik je vaak een relatief pad, zoals contact.html.
• Voor externe links gebruik je een volledig webadres, zoals https://www.example.com.

<a href="contact.html">Ga naar de contactpagina</a>
<a href="https://www.wikipedia.org">Bezoek Wikipedia</a>

• Een relatief pad kijkt vanaf de huidige pagina naar een bestand in je projectmap.
• Als index.html en contact.html in dezelfde map staan, kun je direct naar contact.html linken.
• Als een bestand in een submap staat, moet je het pad naar die submap opnemen.

• Het belangrijkste attribuut van een link is href.
• Met target="_blank" open je een link in een nieuw tabblad.
• Gebruik bij target="_blank" ook rel="noopener noreferrer".
• Het attribuut rel staat voor relationship. Je beschrijft hiermee de relatie tussen jouw pagina en de pagina waar je naartoe linkt.
• noopener voorkomt dat de nieuwe pagina via JavaScript controle krijgt over jouw oorspronkelijke pagina.
• noreferrer zorgt ervoor dat de nieuwe pagina niet meekrijgt vanaf welke pagina de bezoeker kwam.
• Daarom is rel="noopener noreferrer" een veilige standaard bij externe links die je opent met target="_blank".
• Met title kun je extra informatie geven, maar gebruik dit niet als vervanging voor duidelijke linktekst.
• Met download kun je aangeven dat een bestand gedownload mag worden.

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
    Open voorbeeldwebsite
</a>

<a href="bestanden/rooster.pdf" download>Download het rooster</a>

• Gebruik target="_blank" niet voor elke link. Het is vooral handig voor externe websites of documenten.
• Laat interne links meestal in hetzelfde tabblad openen en gebruik target="_blank" vooral bij externe links.

• Je kunt ook een afbeelding klikbaar maken.
• Daarvoor zet je een <img>-tag binnen een <a>-tag.
• De link zit dan om de afbeelding heen.
• Het alt-attribuut van de afbeelding blijft belangrijk.

<a href="portfolio.html">
    <img src="img/project-01.webp" alt="Bekijk mijn projecten">
</a>

• Zorg dat duidelijk is dat de afbeelding klikbaar is.
• Gebruik eventueel ook een tekstlink onder of naast de afbeelding.
• Maak het klikbare doel niet verwarrend: een productfoto moet bijvoorbeeld naar dat product gaan.

• Met mailto: maak je een klikbare e-maillink.
• Met tel: maak je een klikbaar telefoonnummer.
• Op een telefoon kan een tel:-link direct de bel-app openen.
• Op een computer werkt een telefoonlink alleen als er geschikte software is ingesteld.

<a href="mailto:info@example.com">Stuur ons een e-mail</a>

<a href="mailto:info@example.com?subject=Vraag%20via%20de%20website">
    Mail met onderwerp
</a>

<a href="tel:+31101234567">Bel 010 123 4567</a>

• Gebruik bij telefoonnummers in de code bij voorkeur de internationale vorm, zoals +31.
• Schrijf het telefoonnummer op de pagina wel leesbaar voor mensen.
• Gebruik geen persoonlijke e-mailadressen als dat niet nodig is.

• Gebruik duidelijke linkteksten.
• Controleer regelmatig of links nog werken.
• Laat interne links meestal in hetzelfde tabblad openen.
• Gebruik rel="noopener noreferrer" bij externe links die in een nieuw tabblad openen.
• Link niet naar bestanden of pagina's die nog niet klaar zijn.
• Zorg dat links goed zichtbaar zijn, bijvoorbeeld met kleur en onderstreping.
• Gebruik niet alleen kleur om aan te geven dat iets klikbaar is.
• Gebruik betekenisvolle bestandsnamen, zoals contact.html in plaats van pagina2.html.

W3C staat voor World Wide Web Consortium. Dit is een organisatie die meewerkt aan de standaarden voor het web, zoals HTML en CSS. W3C heeft ook een HTML-validator: een hulpmiddel waarmee je kunt controleren of je HTML-code netjes volgens de regels is geschreven.

• Een validator controleert de technische opbouw van je HTML.
• De validator zegt niet of je website mooi is.
• De validator helpt wel om fouten te vinden, zoals vergeten sluit-tags of verkeerd geplaatste elementen.
• Bij lokale bestanden is Direct Input vaak de makkelijkste manier.

Gebruik de W3C Markup Validator om je bestaande bestanden te controleren.

Krijg je veel meldingen tegelijk? Begin dan altijd bovenaan. Eén fout in HTML kan soms meerdere vervolgmeldingen veroorzaken.

Je gebruikt hieronder je bestaande vier pagina’s. aria-current="page" staat alleen bij de huidige pagina. Op Portfolio staat dit attribuut dus bij de Portfolio-link, op Over bij Over en op Contact bij Contact.

<nav>
    <a href="index.html" aria-current="page">Home</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="over.html">Over</a>
    <a href="contact.html">Contact</a>
</nav>