HTML/Basiscursus/Links

Met links kunt uw pagina verbinden met een andere pagina of bestand. U kunt links in de inhoud van uw pagina zetten (hypertekst links) maar u kunt ook een relatie definiëren tussen uw gehele pagina en een andere pagina (document relaties).

Hypertekst links

U maakt een link in uw pagina met behulp van de a-tag in samenwerking met het href-attribuut. De tekst of afbeelding tussen de a-tags zal klikbaar worden voor de gebruiker.

Lokale links

U kunt in uw pagina lokale links maken naar documenten die zich op dezelfde website bevinden. U hoeft dan niet het volledige adres op te geven maar alleen de locatie van het bestand in verhouding met document. Alles tussen  is commentaar, daarover later meer.

HTML-code: Lokale links

<a href="pagina1.html">Pagina 1</a>
<!-- Link naar het bestand pagina1.html in dezelfde map -->

<a href="./pagina2.html">Pagina 2</a>
<!-- Link naar het bestand pagina2.html in dezelfde map -->

<a href="../pagina3.html">Pagina 3</a>
<!-- Link naar het bestand pagina3.html in de bovenliggende map -->

<a href="inhoud/pagina4.html">Pagina 4</a>
<!-- Link naar het bestand pagina4.html in de map inhoud -->

<a href="../inhoud/pagina5.html">Pagina 5</a>
<!-- Link naar het bestand pagina5.html in de map inhoud in de bovenliggende map -->

<a href="/pagina6.html">Pagina 6</a>
<!-- Link naar het bestand pagina6.html in de rootmap -->

<a href="/inhoud/pagina7.html">Pagina 7</a>
<!-- Link naar het bestand pagina7.html in de map inhoud in de root -->

Externe links

U kunt ook links maken naar andere websites, u moet dan het gehele internetadres opgeven.

Het is een goed gebruik om niet alleen de map aan te geven (bijvoorbeeld http://www.google.nl/) maar het complete adres (bijvoorbeeld http://www.google.nl/index.html). Op deze manier bezorgt u de betreffende server iets minder werk, omdat deze dan niet hoeft uit te zoeken wat het "indexbestand" is. Het had immers net zo goed index.php kunnen zijn, of index.xhtml. Door het daadwerkelijke bestand aan te geven, bespaart u een server extra load.

HTML-code: Externe links

<a href="http://www.wikipedia.org">Wikipedia</a>
<!-- Link naar de externe website Wikipedia -->

<a href="http://www.google.nl/search?q=wikibooks">Zoekresultaten "Wikibooks"</a>
<!-- Link naar een externe pagina van Google -->

Links naar id's

Links kunnen ook wijzen naar een bepaald deel van een pagina, als u dan op een link klikt verspringt de pagina naar de aangewezen tag. U kunt linken naar een plek in dezelfde pagina maar ook naar een plek in een andere pagina.

Eerst geeft u de tag waar u naartoe wil linken een naam met behulp van het id-attribuut, ook het name-atribuut kan gebruikt worden. Vervolgens kunt u in een link naar deze tag verwijzen met een hekje (#) gevolgd door het id (of name) van de tag.

HTML-code: Links naar een id

<p><a href="#inhoud">Naar de inhoud</a></p>
<p>Een lange inleiding...</p>
<p id="inhoud">Hier komt de inhoud</p>
<!-- Link naar een bepaald deel in dezelfde pagina -->

<a href="http://nl.wikibooks.org/wiki/HTML:_Semantiek#Het_semantisch_web">Het semantisch web</a>
<!-- Link naar een bepaald deel in een externe pagina -->

Document relaties

Met behulp van het link element kunt u linken naar documenten die een relatie hebben met de pagina. Voorbeelden hiervan zijn: het volgende of vorige hoofdstuk, de inhoudsopgave of een externe stylesheet.

Een link element gebruikt het rel en rev attribuut om aan te geven op welke manier de link verband houdt met de pagina. Het href attribuut wordt gebruikt om de locatie van het document aan te geven. De link tag mag alleen in het head element voorkomen.

HTML-code: Document relaties met het link element

<head>
  <link rel="index" href="inhoudsopgave.html">
  <link rel="next" href="hoofdstuk3.html">
  <link rel="prev" href="hoofdstuk1.html">

  <link rel="chapter" href="hoofdstuk7.html" title="Hoofdstuk 7">
  <link rel="section" href="hoofdstuk6.html#2" title="Hoofdstuk 6.2">

  <link rel="alternate" lang="en" href="chapter2.html">
  <link rel="alternate" type="print" href="print/hoofdstuk2.html">

  <link rel="stylesheet" href="normaal.css">
  <link rel="alternate stylesheet" href="slechtzienden.css">
  <link rel="alternate stylesheet" media="print" href="print.css">
</head>

Met het rel attribuut geeft u de relatie aan van het doel van de link en het huidige document, met het rev attribuut de relatie van het huidige document tot het doel van de link.

Er zijn enkele standaard link types die u kunt gebruiken in het rel en/of rev attribuut, dit zijn:

alternate: Wijst een plaatsvervangende versie voor het huidige document toe van waaruit de link voorkomt. Wanneer samen met het lang-attribuut gebruikt, verwijst het naar een vertaalde versie van het document. Wanneer samen met het media-attribuut gebruikt, verwijst het naar een versie ontworpen voor een ander medium (printen, telefoon, etc.).
stylesheet: Verwijst naar een externe style sheet.
alternate Stylesheet: Verwijst naar een alternative externe style sheet. Een user agent kan de gebruiker de optie geven deze stijl te kiezen.
start: Verwijst naar het eerste document in een collectie van documenten. Dit link type vertelt zoekrobots welk document door de auteur beschouwd wordt als het startpunt van de collectie.
next: Verwijst naar het volgende document in een reeks van documenten. User Agents kunnen er voor kiezen om deze documenten alvast te laden om zo de pagina later sneller te tonen.
prev: Verwijst naar het vorige document in een reeks van documenten. User Agents kunnen er voor kiezen om deze documenten alvast te laden om zo de pagina later sneller te tonen.
contents: Verwijst naar een document dat dienst doet als een inhoudstabel.
index: Verwijst naar een document dat dienst doet als startpagina.
glossary: Verwijst naar een document dat dienst doet als een lijst van begrippen voor termen die in het document voorkomen.
copyright: Verwijst naar een verklaring van auteursrechten voor het huidige document.
chapter: Verwijst naar een document dat dienst doet als een hoofdstuk in een collectie van documenten.
section: Verwijst naar een document dat dienst doet als een onderdeel in een collectie van documenten.
subsection: Verwijst naar een document dat dienst doet als een onderafdeling in een collectie van documenten.
appendix: Verwijst naar een document dat dienst doet als een appendix in een collectie van documenten.
help: Verwijst naar een document dat hulp biedt.
bookmark: Verwijst naar een bladwijzer. Een bladwijzer is een link naar een sleutelpositie binnen een uitgebreid document. Het title-attribuut mag gebruikt worden om de bladwijzer te labelen.

U kunt ook zelf nieuwe linktypes introduceren maar User Agents zullen de relatie dan niet begrijpen.