Erstellen von Links

Was ist ein Hyperlink?

Hyperlinks sind Merkmale eines HTML-Dokuments, die, wenn sie geklickt oder anderweitig aktiviert werden, den Browser veranlassen, zu anderen Dokumenten oder Ressourcen zu navigieren, manchmal zu bestimmten Teilen von Dokumenten. Hyperlinks sind eine der aufregendsten Innovationen, die das Web zu bieten hat. Sie sind seit Beginn des Webs ein Merkmal und machen das Web zu einem Netz. Jede Ressource im Web hat eine Adresse, die als URL (Uniform Resource Locator) bekannt ist, auf die Hyperlinks verweisen.

Zum Beispiel enthält die BBC-Homepage viele Links, die nicht nur auf mehrere Nachrichtenberichte, sondern auch auf verschiedene Bereiche der Website (Navigationsfunktionalität), Login-/Registrierungsseiten (Benutzerwerkzeuge) und mehr verweisen.

Anatomie eines Links

Ein einfacher Link wird erstellt, indem der Text oder andere Inhalte innerhalb eines <a>-Elements umschlossen werden und das href-Attribut verwendet wird, das auch als Hypertext-Referenz oder Ziel bekannt ist und die Webadresse enthält.

<p>
  I'm creating a link to
  <a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

Dies ergibt das folgende Ergebnis:

Ich erstelle einen Link zur Mozilla-Homepage.

Block-Level-Links

Wie bereits erwähnt, können fast alle Inhalte in einen Link umgewandelt werden, selbst Block-Level-Elemente. Wenn Sie ein Überschriftselement in einen Link verwandeln möchten, umschließen Sie es mit einem Anker (<a>)-Element, wie im folgenden Code-Snippet gezeigt:

<a href="https://developer.mozilla.org/en-US/">
  <h1>MDN Web Docs</h1>
</a>
<p>
  Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
</p>

Dies verwandelt die Überschrift in einen Link:

Bildlinks

Um ein Bild in einen Link zu verwandeln, umschließen Sie das <img>-Element mit einem <a>-Element. Das folgende Beispiel verwendet einen relativen Pfad, um auf eine lokal gespeicherte SVG-Bilddatei zu verweisen.

img {
  height: 100px;
  width: 150px;
  border: 1px solid gray;
}

<a href="https://developer.mozilla.org/en-US/">
  <img src="mdn_logo.svg" alt="MDN Web Docs" />
</a>

Dies macht das MDN-Logo zu einem Link:

Hinzufügen unterstützender Informationen mit dem title-Attribut

Möglicherweise möchten Sie auch ein title-Attribut zu Ihren Links hinzufügen. Der Titel enthält zusätzliche Informationen über den Link, wie z. B. welche Art von Informationen die Seite enthält oder Dinge, die auf der Website zu beachten sind.

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's mission and how to contribute">
    the Mozilla homepage</a
  >.
</p>

Dies ergibt das folgende Ergebnis, und das Schweben über den Link zeigt den Titel als Tooltip an:

Erstellen eigener Beispiel-Links

Okay, jetzt sind Sie an der Reihe!

1. Klicken Sie auf "Play" im Code-Block unten, um das Beispiel im MDN Playground zu bearbeiten, oder erstellen Sie eine Kopie unserer Startvorlage und kopieren Sie den folgenden Code dort hinein.
2. Verlinken Sie den Text "Eichhörnchen" und "Ostsibirisches Eichhörnchen" auf Wikipedia-Seiten, die die entsprechenden Arten beschreiben. Geben Sie jedem Link ein title-Attribut entsprechend dem wissenschaftlichen Namen der Art.
3. Verlinken Sie den Text "Wikipedia Eichhörnchen Seite" zur Haupt-Wikipedia-Seite für Eichhörnchen.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Zurücksetzen-Taste im MDN Playground löschen. Wenn Sie wirklich nicht weiterkommen, können Sie die Lösung unterhalb des Code-Blocks ansehen.

<h1>Squirrels</h1>

<p>
  Squirrels are commonly thought of as tree-dwelling mammals, but the squirrel
  family extends far beyond that to include ground-dwelling rodents such as
  chipmunks and prairie dogs, and flying squirrels.
</p>

<p>Two of the most common and best-known squirrel species are the:</p>

<ul>
  <li>Red squirrel</li>
  <li>Eastern gray squirrel</li>
</ul>

<p>
  For a good starting point on squirrel information, see the Wikipedia Squirrel
  page.
</p>

<h1>Squirrels</h1>

<p>
  Squirrels are commonly thought of as tree-dwelling mammals, but the squirrel
  family extends far beyond that to include ground-dwelling rodents such as
  chipmunks and prairie dogs, and flying squirrels.
</p>

<p>Two of the most common and best-known squirrel species are the:</p>

<ul>
  <li>
    <a
      href="https://en.wikipedia.org/wiki/Red_squirrel"
      title="Sciurus vulgaris">
      Red squirrel
    </a>
  </li>
  <li>
    <a
      href="https://en.wikipedia.org/wiki/Eastern_gray_squirrel"
      title="Sciurus carolinensis">
      Eastern gray squirrel
    </a>
  </li>
</ul>

<p>
  For a good starting point on squirrel information, see the
  <a href="https://en.wikipedia.org/wiki/Squirrel">Wikipedia Squirrel page</a>.
</p>

Ein kurzer Überblick über URLs und Pfade

Linkziele sind URLs. Eine URL oder Uniform Resource Locator ist eine Textzeichenfolge, die angibt, wo sich etwas im Web befindet. Zum Beispiel befindet sich die englische Homepage von Mozilla unter https://www.mozilla.org/en-US/.

Ein Webserver empfängt Anfragen für URLs und antwortet mit der entsprechenden Ressource. Die meisten Ressourcen werden als Dateien im Dateisystem des Servers gespeichert, daher ähneln die URLs für diese Ressourcen oft Dateipfaden.

Schauen wir uns ein Beispiel für eine Server-Verzeichnisstruktur an:

Die Wurzel dieser Verzeichnisstruktur heißt creating-hyperlinks. Wenn Sie lokal mit einer Website arbeiten, haben Sie ein Verzeichnis, das die gesamte Website enthält. Innerhalb der Wurzel haben wir eine index.html-Datei und eine contacts.html. In einer echten Website wäre index.html unsere Homepage oder Zielseite (eine Webseite, die als Einstiegspunkt für eine Website oder einen bestimmten Abschnitt einer Website dient).

Es gibt auch zwei Verzeichnisse in unserer Wurzel — pdfs und projects. Diese enthalten jeweils eine Datei — ein PDF (project-brief.pdf) und eine index.html-Datei. Beachten Sie, dass Sie mehrere index.html-Dateien in einem Projekt haben können, solange sie sich an unterschiedlichen Dateisystem-Standorten befinden. Die zweite index.html wäre möglicherweise die Hauptzielseite für projektbezogene Informationen.

Schauen wir uns einige Beispiele für Links zwischen einigen verschiedenen Dateien in dieser Verzeichnisstruktur an, um verschiedene Pfadtypen zu demonstrieren.

Gleiches Verzeichnis

Wenn Sie einen Hyperlink innerhalb der index.html der obersten Ebene einfügen möchten, der auf contacts.html verweist, können Sie den Pfad einfach als den Dateinamen angeben, auf den Sie verlinken möchten, da er sich im gleichen Verzeichnis wie die aktuelle Datei befindet. Die URL, die Sie verwenden würden, ist contacts.html:

<p>
  Want to contact a specific staff member? Find details on our
  <a href="contacts.html">contacts page</a>.
</p>

Sie können einen Pfad zu einer Datei im gleichen Verzeichnis auch mit einem einzelnen Punkt gefolgt von einem Schrägstrich beginnen: ./. Das folgende Beispiel ist äquivalent zum vorherigen, aber einige Leute mögen es, das ./ trotzdem einzubeziehen, weil sie glauben, dass es mehr Klarheit bietet:

<p>
  Want to contact a specific staff member? Find details on our
  <a href="./contacts.html">contacts page</a>.
</p>

Tiefer in Unterverzeichnisse gehen

Wenn Sie einen Hyperlink innerhalb der index.html der obersten Ebene einfügen möchten, der auf projects/index.html verweist, müssen Sie in das projects-Verzeichnis gehen, bevor Sie die Datei angeben, auf die Sie verlinken möchten. Dies geschieht, indem Sie den Namen des Verzeichnisses angeben, dann einen Schrägstrich, dann den Namen der Datei. Die URL, die Sie verwenden können, ist projects/index.html:

<p>Visit my <a href="projects/index.html">project homepage</a>.</p>

Zurück in übergeordnete Verzeichnisse gehen

Wenn Sie einen Hyperlink innerhalb von projects/index.html einfügen möchten, der auf pdfs/project-brief.pdf verweist, müssen Sie eine Verzeichnisebene nach oben gehen, dann wieder hinunter in das pdfs-Verzeichnis. Um ein Verzeichnis nach oben zu gehen, verwenden Sie zwei Punkte — .. — also ist die URL ../pdfs/project-brief.pdf:

<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

Verlinkung relativ zum Wurzelverzeichnis

Die obigen URLs funktionieren, aber bedenken Sie, dass Sie den Link brechen, wenn Sie entweder die verlinkende Datei oder die verlinkte Datei an einen anderen Ort verschieben.

Wenn Sie einen Link zu einem bestimmten Ort erstellen möchten, der nicht bricht, wenn Sie die verlinkende Datei verschieben, können Sie dies tun, indem Sie einen einzelnen Schrägstrich am Anfang des Pfades setzen — dies zeigt an, dass der Pfad im Wurzelverzeichnis der Site beginnt. Zum Beispiel könnte der vorherige Link innerhalb von projects/index.html umgeschrieben werden als:

<p>A link to my <a href="/pdfs/project-brief.pdf">project brief</a>.</p>

Jetzt beginnt der Pfad immer im Wurzelverzeichnis (creating-hyperlinks), wechselt ins pdfs-Verzeichnis und findet die project-brief.pdf-Datei. Dies funktioniert weiterhin, wenn Sie die verlinkende Datei an einen anderen Ort verschieben, beispielsweise a/b/c/d/e/index.html.

Wenn Sie die verlinkte project-brief.pdf-Datei an einen anderen Ort verschieben, brechen Sie dennoch den Link.

Zwei Begriffe, auf die Sie im Netz stoßen werden, sind absoluter Pfad und relativer Pfad.

• Absoluter Pfad: Verweist auf einen Standort, der durch seinen absoluten Standort in Ihrer Site (oder anderswo im Web) definiert ist. Beispielsweise können Sie einen absoluten Link erstellen, der immer auf denselben Ort relativ zum Wurzelverzeichnis der Site verweist, indem Sie den Schrägstrich am Anfang des Pfads verwenden, wie wir es zuvor gesehen haben: /pdfs/project-brief.pdf.
• Relativer Pfad: Verweist auf einen Standort, der relativ zu der Datei ist, von der Sie verlinken. In unserem früheren Beispiel verwendeten wir projects/index.html, um einen relativen Link zwischen der aktuellen Datei und einer Datei namens index.html herzustellen, die sich in einem projects-Unterverzeichnis befindet. Wenn Sie die aktuelle Datei an einen anderen Ort verschieben würden, wäre der Pfad weiterhin relativ zu dieser Datei, würde aber auf einen anderen absoluten Standort verweisen.

Diese Begriffe werden nicht immer konsistent verwendet. Zum Beispiel ist /pdfs/project-brief.pdf absolut in Bezug auf den Standort der aktuellen Datei, aber relativ zum Domainnamen. Eine URL, die den vollständigen Domainnamen enthält, wie https://example.com/pdfs/project-brief.pdf, ist absolut im Bezug auf das gesamte Web.

Verlinken mit vollen URLs

Sie können eine vollständige URL als Pfad angeben, die immer auf denselben Ort im Web zeigt, egal wo sie verwendet wird. Zum Beispiel:

<a href="https://www.example.com/projects/">projects</a>

Dieser Link wird immer auf https://www.example.com/projects/ verweisen, auch wenn Ihre Site auf eine andere Domain verschoben wird.

Interne und externe Links

Wenn ein Link auf eine Ressource auf Ihrer Site verweist, wird er als interner Link bezeichnet. Wenn ein Link auf eine Ressource auf einer anderen Site verweist, wird er als externer Link bezeichnet.

Beim Spezifizieren eines externen Links müssen Sie immer die vollständige URL als Pfad angeben, beispielsweise:

<a href="https://www.some-other-site.com">projects</a>

Sie können nicht mit einem Pfad wie /pdfs/project-brief.pdf oder projects/index.html auf eine Position auf einer anderen Site verweisen, da sie beide relativ zu einem Standort auf Ihrer eigenen Site sind, und der Browser benötigt den Domainnamen der Website, um ihn finden zu können.

Beim Spezifizieren eines internen Links können Sie einen relativen oder absoluten Pfad oder eine vollständige URL verwenden. In unserem Beispiel sind diese Links gleichwertig:

<a href="https://www.example.com/projects/">projects</a>

<a href="projects">projects</a>

Wir empfehlen Letzteres ohne den vollständigen Domainnamen, aufgrund der Portabilität. Wie wir bereits gesagt haben, wenn Sie https://www.example.com/projects/ angeben, wird es immer auf https://www.example.com/projects/ verweisen. Wenn Sie dann Ihre Website auf eine andere Domain verschieben, zum Beispiel another-example.com, müssten alle Ihre vollständigen URL-Links geändert werden. Wenn Sie Pfade wie /projects angeben, funktionieren diese immer noch, da sie immer noch relativ zur Verzeichnisstruktur sind.

Dokumentfragmente

Es ist möglich, an einen bestimmten Teil eines HTML-Dokuments, bekannt als Dokumentfragment, zu verlinken, anstatt nur an den oberen Rand des Dokuments. Elemente mit einem id-Attribut im Dokument erstellen automatisch ein Dokumentfragment, auf das verlinkt werden kann.

Der häufigste Anwendungsfall besteht darin, auf eine bestimmte Überschrift zu verlinken, die so aussieht:

<h2 id="mailing_address">Mailing address</h2>

Um auf diese spezifische id zu verlinken, fügen Sie sie am Ende des Pfades ein, vorangestellt von einem Hash/Pfund-Symbol (#), beispielsweise:

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#mailing_address">mailing address</a>.
</p>

Sie können sogar das Dokumentfragment-Referenzierung auf sich selbst verwenden, um auf einen anderen Teil des aktuellen Dokuments zu verlinken:

<p>
  The <a href="#mailing_address">company mailing address</a> can be found at the
  bottom of this page.
</p>

Wie übersetzen sich URLs in Dateipfade?

Alle bis jetzt gesehenen Linkziele sind URLs, die von einem Webserver verarbeitet werden, um die relevante Ressource zu finden. Kein Webinhalt kann direkt das Dateisystem des Servers sehen.

Der bisher betrachtete Server erstellt eine statische Website. Der Server nimmt einfach den Pfadnamen-Teil der URL und sucht direkt nach der entsprechenden Datei in seinem Dateisystem.

Wenn wir einen Webserver starten (siehe Wie richten Sie einen lokalen Testserver ein?), der unser Beispielseitenverzeichnis als Wurzel verwendet, und der Domainname der Website auf example.com gesetzt ist, wäre unsere pdfs/project-brief.pdf-Datei unter https://www.example.com/pdfs/project-brief.pdf verfügbar.

Alle Links werden relativ zur URL des aktuellen Dokuments aufgelöst, so dass:

• Für alle Seiten auf der Domain https://example.com ein Link zu /pdfs/project-brief.pdf immer einen Link zu https://www.example.com/pdfs/project-brief.pdf erstellt, dessen Pfadname /pdfs/project-brief.pdf ist. Der Server sucht im Wurzelverzeichnis nach dem pdfs-Verzeichnis und dann nach der project-brief.pdf-Datei in diesem Verzeichnis.
• Ein Link zu projects/index.html würde einen Link zu https://www.example.com/projects/index.html erstellen, jedoch nur, wenn er in einer Datei im Wurzelverzeichnis enthalten ist, wie die index.html-Datei der obersten Ebene oder contacts.html. Wenn Sie ihn zum Beispiel in einer HTML-Datei unter pdfs/index.html einfügen würden, würde er zu https://www.example.com/pdfs/projects/index.html verlinken, dessen Pfadname /pdfs/projects/index.html ist, der nicht existiert, und Sie hätten einen defekten Link.

Die Standard-index.html-Seite

Wenn Sie auf eine index.html-Datei verweisen, müssen Sie in der Regel das index.html nicht in die URL/den Pfad einfügen, da Webserver nach einer Standardzielseite namens index.html suchen, wenn kein Dateiname angegeben ist.

Nochmals unseren projects/index.html-Pfad betrachtend, könnten wir den Pfad einfach als projects schreiben, und dies würde einen Link zu https://www.example.com/projects/index.html erstellen. Wenn wir zur Seite navigieren, könnten wir die URL als https://www.example.com/projects/ schreiben, und es würde uns trotzdem zum richtigen Ort bringen.

Beste Praktiken für Links

Es gibt einige Best Practices, die Sie befolgen sollten, wenn Sie Links schreiben. Schauen wir uns diese nun an.

Verwenden Sie klare Link-Formulierungen

Es ist einfach, Links auf Ihre Seite zu stellen. Das reicht nicht aus. Wir müssen unsere Links zugänglich für alle Leser machen, unabhängig von ihrem aktuellen Kontext und den bevorzugten Werkzeugen. Zum Beispiel:

• Screenreader-Benutzer mögen es, von Link zu Link auf der Seite zu springen und Links aus dem Kontext zu lesen.
• Suchmaschinen verwenden Linktexte, um Zieldateien zu indexieren, daher ist es eine gute Idee, Schlüsselwörter in Ihren Linktext aufzunehmen, um effektiv zu beschreiben, worauf verlinkt wird.
• Visuelle Leser überfliegen die Seite eher, als jedes Wort zu lesen, und ihre Augen werden auf Seitenmerkmale gezogen, die auffallen, wie Links. Sie finden beschreibende Linktexte nützlich.

Schauen wir uns ein spezifisches Beispiel an:

Guter Linktext: Laden Sie Firefox herunter

<p><a href="https://www.firefox.com/en-US/">Download Firefox</a></p>

Schlechter Linktext: Klicken Sie hier, um Firefox herunterzuladen

<p>
  <a href="https://www.firefox.com/en-US/">Click here</a> to download Firefox
</p>

Weitere Tipps:

• Wiederholen Sie nicht die URL als Teil des Linktextes — URLs sehen hässlich aus und klingen noch hässlicher, wenn ein Screenreader sie Buchstabe für Buchstabe vorliest.
• Sagen Sie nicht "Link" oder "verlinkt mit" im Linktext — es ist nur unnötiger Lärm. Screenreader sagen den Benutzern, dass es einen Link gibt. Visuelle Benutzer werden auch wissen, dass es einen Link gibt, da Links im Allgemeinen in einer anderen Farbe und unterstrichen sind (diese Konvention sollte im Allgemeinen nicht durchbrochen werden, da sich Benutzer daran gewöhnt haben).
• Halten Sie Ihren Linktext so kurz wie möglich — dies ist hilfreich, da Screenreader den gesamten Linktext interpretieren müssen.
• Minimieren Sie Instanzen, in denen mehrere Kopien desselben Textes an verschiedene Orte verlinkt sind. Dies kann Probleme für Screenreader-Benutzer verursachen, wenn es eine Liste von Links aus dem Kontext gibt, die mit "Klicken Sie hier", "Klicken Sie hier", "Klicken Sie hier" gekennzeichnet sind.

Verlinken von nicht-HTML-Ressourcen — klare Wegweiser setzen

Wenn Sie auf eine Ressource verlinken, die nicht auf der aktuellen Seite als "normale Navigation" geöffnet wird, sollten Sie klare Formulierungen zum Linktext hinzufügen, was passieren wird. Zum Beispiel, wenn Sie eine Ressource herunterladen oder streamen, oder wenn der Link dazu führt, dass ein Popup geöffnet wird oder eine andere potenziell unerwartete Aktion ausgeführt wird, sollte dies im Text angegeben werden. Das ist wichtig für Benutzer mit langsamen Internetverbindungen, die möglicherweise vermeiden möchten, mehrere Megabyte große Assets herunterzuladen. Es hilft auch, Erwartungen für Screenreader-Benutzer zu setzen, die sonst nicht wissen könnten, was passiert.

Schauen wir uns einige Beispiele an, um zu sehen, welche Art von Text hier verwendet werden kann:

<p>
  <a href="/large-report.pdf" download>
    Download the sales report (PDF, 10MB)
  </a>
</p>

<p>
  <a href="https://www.example.com/video-stream/" target="_blank">
    Watch the video (stream opens in separate tab, HD quality)
  </a>
</p>

Verwenden Sie das download-Attribut beim Verlinken auf einen Download

Beim Verlinken auf eine Ressource, die heruntergeladen und nicht im Browser geöffnet werden soll, können Sie das download-Attribut verwenden, um einen standardmäßigen Dateinamen zum Speichern bereitzustellen. Hier ist ein Beispiel mit einem Download-Link zur neuesten Windows-Version von Firefox:

<a
  href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
  download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

Wann Links in einem neuen Tab öffnen

Links öffnen sich standardmäßig im gleichen Tab wie die Seite, auf der sie sich befinden, was dem Benutzer ermöglicht, mit der Zurück-Taste des Browsers zur vorherigen Seite zurückzukehren. Viele Seiten (einschließlich MDN) entscheiden sich jedoch dafür, bestimmte Links, insbesondere externe Links, in einem neuen Tab zu öffnen. Dies wird erreicht, indem das target-Attribut auf "_blank" gesetzt wird.

Firefox is developed by the
<a href="https://www.mozilla.org/en-US/" target="_blank">Mozilla Foundation</a>.

Ob Links in einem neuen Tab geöffnet werden, sollte eine bewusste Entscheidung sein, basierend auf Benutzererfahrungsdesign-Überlegungen. Hier sind einige Dinge, über die nachgedacht werden sollte:

• Das Öffnen von Links in einem neuen Tab präsentiert die beiden Dokumente gleichzeitig, was für eine "parallele" Navigationserfahrung nützlich ist. Andererseits sind Links, die sich im gleichen Tab öffnen, eher eine Fortführung der aktuellen Seite.
• Das Öffnen von Links in einer neuen Registerkarte kann für Benutzer, die gewohnt sind, die Zurück-Taste zu verwenden, verwirrend sein.
• Auch wenn Links standardmäßig im gleichen Tab geöffnet werden, können Benutzer dennoch wählen, sie in einem neuen Tab zu öffnen, indem sie Tastenkombinationen oder Kontextmenüoptionen verwenden. Andererseits sind Links, die in einem neuen Tab geöffnet werden, schwer im gleichen Tab zu öffnen.
• Screenreader-Benutzer können durch Links, die in einem neuen Tab geöffnet werden, verwirrt sein, da sie möglicherweise nicht merken, dass ein neuer Tab geöffnet wurde, und sie können den Kontext über ihren Standort auf der Seite verlieren.

Ein gängiger Ansatz ist, externe Links in neuen Tabs zu öffnen und interne Links im gleichen Tab. Einige Designer ziehen es vor, alle Links im gleichen Tab zu öffnen. Wenn Sie Links in neuen Tabs öffnen, wird empfohlen, Hinweise für diese Links bereitzustellen, wie ein Symbol neben dem Linktext.

Erstellen eines Navigationsmenüs

Für diese Übung möchten wir, dass Sie einige Seiten mit einem Navigationsmenü verlinken, um eine Website mit mehreren Seiten zu erstellen. Dies ist eine übliche Methode, um eine Website zu erstellen — dieselbe Seitenstruktur wird auf jeder Seite verwendet, einschließlich desselben Navigationsmenüs, sodass es den Eindruck erweckt, dass Sie sich am selben Ort befinden und andere Inhalte angezeigt werden.

Sie müssen lokale Kopien der folgenden vier Seiten erstellen, alle im gleichen Verzeichnis. Für eine vollständige Dateiliste siehe das navigation-menu-start-Verzeichnis:

• index.html
• projects.html
• pictures.html
• social.html

Sie sollten:

1. Fügen Sie eine ungeordnete Liste an der angegebenen Stelle auf einer Seite hinzu, die die Namen der zu verlinkenden Seiten enthält. Ein Navigationsmenü ist normalerweise nur eine Liste von Links, daher ist dies semantisch in Ordnung.
2. Ändern Sie jeden Seitennamen in einen Link zu dieser Seite.
3. Kopieren Sie das Navigationsmenü auf jede Seite.
4. Entfernen Sie auf jeder Seite den Link zu genau dieser Seite — es ist verwirrend und unnötig, wenn eine Seite einen Link zu sich selbst enthält. Und das Fehlen eines Links dient als gute visuelle Erinnerung daran, auf welcher Seite Sie sich gerade befinden.

Das fertige Beispiel sollte ähnlich der folgenden Seite aussehen:

E-Mail-Links

Es ist möglich, Links oder Buttons zu erstellen, die beim Anklicken eine neue ausgehende E-Mail-Nachricht öffnen, anstatt auf eine Ressource oder Seite zu verlinken. Dies geschieht mit dem <a>-Element und dem mailto:-URL-Schema.

In seiner grundlegendsten und am häufigsten verwendeten Form gibt ein mailto:-Link die E-Mail-Adresse des vorgesehenen Empfängers an. Zum Beispiel:

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

Dies ergibt einen Link, der so aussieht: E-Mail an Nirgendwo senden.

In der Tat ist die E-Mail-Adresse optional. Wenn Sie sie weglassen und Ihr href "mailto:" lautet, wird ein neues ausgehendes E-Mail-Fenster von der E-Mail-Client des Benutzers mit keiner Zieladresse geöffnet. Dies ist oft nützlich als "Teilen"-Links, die Benutzer anklicken können, um eine E-Mail an eine Adresse ihrer Wahl zu senden.

Spezifizieren von Details

Zusätzlich zur E-Mail-Adresse können Sie andere Informationen hinzufügen. Tatsächlich können alle Standard-Mailheader-Felder zu der mailto-URL, die Sie angeben, hinzugefügt werden. Die am häufigsten verwendeten sind "subject", "cc" und "body" (was kein echtes Header-Feld ist, aber Ihnen ermöglicht, eine kurze Inhaltsnachricht für die neue E-Mail anzugeben). Jedes Feld und sein Wert werden als Abfragebegriff angegeben.

Hier ist ein Beispiel, das ein cc, bcc, Betreff und einen Nachrichtentext enthält:

<a
  href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

Hier sind einige andere Beispiel-mailto-URLs:

• mailto:
• mailto:nowhere@mozilla.org
• mailto:nowhere@mozilla.org,nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject

Zusammenfassung

Das war es vorerst für Links! Sie werden später im Kurs zu Links zurückkehren, wenn Sie beginnen, sie zu stylen. Als nächstes werden wir Ihnen einige Tests geben, die Sie verwenden können, um zu überprüfen, wie gut Sie die Informationen, die wir zu den Links bereitgestellt haben, verstanden und behalten haben.

• Zurück
• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter