Links machen einen normalen Text zu einem Hypertext. Mit Links werden Verweise zu anderen Webseiten realisiert. Man kann auch innerhalb einer Webseite einen Link setzen. Link ist eine Abkürzung für Hyperlink. Mit einem Link kann man neben einem HTML-Dokument auch andere Dateien verlinken und so zum Beispiel einen Download anbieten.

Beispiel

Links ist der Code zu sehen, rechts das passende Rendering. 

<a href="http://info.cern.ch/hypertext/WWW/TheProject.html">
Hier geht es zur ersten Website des World Wide Webs...</a>
Hier geht es zur ersten Website des World Wide Webs...

The Anchor element: <a>

Das a-Element (auch anchor-Element genannt) kann sehr vielseitig eingesetzt werden. Man muss zwingend die Zieladresse mithilfe des href-Attributs (Abkürzung für hyper reference) angeben. Das Ziel kann sehr unterschiedlich sein. Beispiele:

  • Ein HTML-Dokument der gleichen Website.
  • Eine andere Webseite.
  • Die ID eines HTML-Elements (Sprung innerhalb der Webseite).
  • Eine E-Mail-Adresse.

Zwischen den Tags muss der Name des Links notiert werden. Dieser wird dann anstelle der Zieladresse angezeigt. Wenn man auf den Text klickt, wird dann die Zieladresse aufgerufen. 

<a href="http://info.cern.ch/hypertext/WWW/TheProject.html">Erste Website</a>
<a href="lebenslauf.html">Lebenslauf</a>
<a href="mailto:info@info.ch">Nachricht schicken</a>
<a href="#apfelbaum">Springe zum Element mit der ID apfelbaum</a>
Erste Website
Lebenslauf
Nachricht schicken
Springe zum Element mit der ID apfelbaum
Link zu einem HTML-Dokument

Mit href="DATEINAME.html" wird eine HTML Datei mit dem Namen DATEINAME.html im gleichen Ordner wie die gerade angezeigte Webseite aufgerufen.

Link zu einem HTML-Element

Mit href="#ID-NAME" kann man einen Link zu einem beliebigen Element mit der identischen ID erzeugen. Dazu muss man einfach das id-Attribut des Elements auf den passenden Wert setzen. Das Rautezeichen (#) zeigt an, dass es sich um eine ID handelt. Die ID muss pro Webseite einmalig sein. 

<h1 id="apfelbaum">Mein Apfelbaum</h1>
<p>
    Dies ist ein Text mit einem <a href="#apfelbaum">Link</a> zur Überschrift.
</p>

Im Beispiel besitzt <h1> die ID apfelbaum. Das Attribut im a-Element muss dann href="#apfelbaum", damit der Link zur Überschrift erstellt wird.

Kombination

Man kann beides natürlich auch kombinieren: href="index.html#apfelbaum"

Links
MDN Web Docs
SELFHTML