HTML-Kurs / Links erstellen: Pfade, Sprungmarken und E-Mail-Adressen

Erstellen Sie einen HTML-Link mit dem Element a und setzen Sie sein Ziel in href. Das Ziel kann eine andere Seite, eine Datei, ein Ort in einem Dokument oder eine E-Mail-Adresse sein. Schreiben Sie einen Linktext, der den Lesern zeigt, wohin sie gehen werden.

Erstellen Sie einen Basislink mit a und href

Umschließen Sie den sichtbaren Linktext mit a und setzen Sie die Ziel-URL in href. Dieses Beispiel führt zum deutschen Kurs von Coding Factory über HTML-Listen. Die Arten der verlinkten Listen und die Verschachtelungsregeln werden in Listen: ul, ol, dl und Verschachtelte Listen erklärt.

<a href="https://www.codingfactory.net/de/18370">HTML-Listen-Tutorial</a>

„Tutorial über HTML-Listen“ ist der sichtbare Text; die URL ist das Ziel. Ein a ohne href ist kein normaler Navigationslink. Die Verwendung von href="#" als Platzhalter kann unerwartet zu einer Navigation nach oben auf der Seite führen.

Absolute und relative URLs verstehen

Eine absolute URL, die mit https:// beginnt, enthält die Domain des Ziels. Eine relative URL kann auf eine Datei vom aktuellen Dokumentstandort oder vom Stammverzeichnis der Website verweisen. Üben Sie, dasselbe Menü auf drei Dokumenten in Erstellen einer kleinen mehrseitigen Website beizubehalten.

Die folgenden Pfade about.html und ../contact.html sind Übungsbeispiele, keine derzeit auf Coding Factory existierenden Seiten. Angenommen, Sie schreiben die Links in lessons/index.html innerhalb dieser Ordnerstruktur:

site/

  contact.html

  lessons/

    index.html

    about.html

<a href="https://www.codingfactory.net/de/18370">Vollständige URL</a>

<a href="about.html">Vorstellungsseite in diesem Ordner</a>

<a href="../contact.html">Kontaktseite im übergeordneten Ordner</a>

<a href="/de/18370">HTML-Listen auf dieser Website</a>

about.html wird in Bezug auf das aktuelle Dokument aufgelöst. Ein Pfad, der mit / beginnt, wird vom Stammverzeichnis der Website aufgelöst. Lokale Dateien file:// haben einen anderen Stamm als eine bereitgestellte Website, testen Sie also relative Pfade nach der Bereitstellung erneut.

Link zu einem Ort in einem Dokument

Geben Sie dem Ziel-Element eine eindeutige id und verwenden Sie dann # gefolgt von diesem Wert im Link.

<a href="#contact">Zu den Kontaktdaten gehen</a>



<h2 id="contact">Kontakt</h2>

<p>Die Kontaktdaten befinden sich hier.</p>

Um zu einem Ort in einer anderen Datei zu gelangen, fügen Sie das Fragment zu ihrer URL hinzu: about.html#contact. Vermeiden Sie es, dasselbe id auf einer einzelnen Seite zu wiederholen.

Links zu E-Mails und neuen Tabs

Eine mailto:-URL fordert die E-Mail-Anwendung des Benutzers auf, eine Nachricht zu erstellen. Dies funktioniert möglicherweise nicht wie vorgesehen, wenn keine E-Mail-Anwendung konfiguriert ist.

<a href="mailto:hello@example.com">Eine E-Mail schreiben</a>

Um eine externe Website in einem neuen Tab zu öffnen, verwenden Sie target="_blank" und die rel="noopener noreferrer"-Richtlinie der Website.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"

   target="_blank" rel="noopener noreferrer">Referenz des a-Elements auf MDN</a>

Wählen Sie einen neuen Tab, wenn dies für die Aufgabe des Lesers geeignet ist, und klären Sie das Verhalten im Linktext oder in der nahegelegenen Erklärung.

Was das Attribut download bewirken kann

Das download-Attribut fordert den Browser auf, eine verknüpfte Datei herunterzuladen. Zum Beispiel kann es für dieses auf derselben Website gehostete Bild verwendet werden.

<a href="/wp-content/uploads/html-image-sample-lake-tree-1600-v1.webp" download>Beispielbild herunterladen</a>

download funktioniert mit URLs derselben Herkunft (gleiches Protokoll, gleicher Host und gleicher Port) und mit URLs blob: und data:. Es kann den Download einer regulären URL auf einer anderen Website nicht erzwingen. Selbst bei einer Datei derselben Herkunft können die Browsereinstellungen und die Serverantwort beeinflussen, was passiert.

MDN: Links und das download-Attribut

Testen Sie relative Pfade mit drei echten Dateien

Speichern Sie diese drei Dokumente in der vorherigen Ordnerstruktur site/. Diese Übung überprüft das Navigieren zwischen Dateien und nicht das Versenden einer echten Kontakt-Nachricht.

site/lessons/index.html

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Startseite der Übung über Pfade</title>
</head>
<body>
  <h1>Startseite der Übung über Pfade</h1>
  <nav aria-label="Übungsmenü">
    <a href="about.html">Präsentation</a>
    <a href="../contact.html">Kontakt</a>
  </nav>
</body>
</html>

site/lessons/about.html

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Präsentation</title>
</head>
<body>
  <h1>Präsentation</h1>
  <nav aria-label="Übungsmenü">
    <a href="index.html">Übungseinstieg</a>
    <a href="../contact.html">Kontakt</a>
  </nav>
</body>
</html>

site/contact.html

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kontakt</title>
</head>
<body>
  <h1>Kontakt</h1>
  <nav aria-label="Übungsmenü">
    <a href="lessons/index.html">Übungseinstieg</a>
    <a href="lessons/about.html">Präsentation</a>
  </nav>
</body>
</html>

Öffnen Sie jede Datei, folgen Sie ihren Links und vergleichen Sie die Ordner in der Adressleiste. ../ geht ein Verzeichnis nach oben. Wenn ein Link fehlschlägt, lösen Sie das Problem aus dem Ordner der Ausgangsdatei, anstatt einen anderen Dateinamen zu raten. Stellen Sie die Werte in der Tabelle wieder her, nachdem Sie experimentiert haben.

Überprüfen Sie die Links, bevor Sie sie veröffentlichen

• Verwenden Sie Text wie „HTML-Listen-Tutorial“ anstelle von „hier klicken“.
• Testen Sie die relativen Pfade vom tatsächlichen Speicherort des bereitgestellten Dokuments aus.
• Überprüfen Sie, ob ein #id-Fragment genau mit seinem Ziel übereinstimmt.
• Denken Sie daran, dass E-Mail- und Download-Links vom Browser und der Benutzerumgebung abhängen.

Siehe die Referenz des a-Elements von MDN für weitere Details zu URLs und Attributen.