HTML/Textauszeichnung/a

Aus SELFHTML-Wiki
< HTML‎ | Textauszeichnung(Weitergeleitet von Href)
Wechseln zu: Navigation, Suche

Mit einem a-Element können Sie einen Link zu einem anderen Dokument oder zu einem Anker (anchor) setzen. Hyperlinks, auch „Verweise“ genannt, sind ein entscheidender Bestandteil jedes Hypertext-Projekts und der „intelligente Mehrwert“ des World Wide Web.

Ursprünglich war ein a-Element mit einem name-Attribut ein Sprungziel eines Verweises, dies ist jedoch mittlerweile obsolet. Heute kann jedes beliebige Element mit einem id-Attribut als Verweisziel fungieren.

Anwendungsbeispiel[Bearbeiten]

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
Beispiel: eine kleine Verweissammlung ansehen …
<p> <a href="http://www.tagesschau.de/">ARD Tagesschau</a> - ein externer Verweis<br> <a href="./Beispiel:HTML_a-Element2.html">SelfHTML</a> - ein interner Verweis<br> <a href="https://wiki.selfhtml.org/images/9/99/1000px-Internet_map_1024.jpg"> <img src="https://wiki.selfhtml.org/images/9/99/1000px-Internet_map_1024.jpg" width="100"> </a> </p> <a id="tipp" href="https://validator.w3.org/"> <aside> <h3>Validator</h3> <p>Überprüfen Sie Ihre Webseiten auf mögliche Fehler!</p> </aside> </a>
Der erste der obigen Verweise führt zu einem anderen Web-Angebot. Der andere Verweis führt zu einem „lokalen“ Ziel innerhalb des Selfthtml-Wiki.
Anstelle eines Linktextes können auch Bilder verwendet werden und andere Bilder (hier eine Großansicht) referenzieren.
Unten sehen Sie ein Beispiel für einen Link, der mehrere HTML-Elemente enthält. Hier sind dies ein aside-Element, das eine Überschrift und einen Absatz enthält. Damit die Box als Verweis erkennbar ist, wurde sie mit CSS farbig gestaltet.

Als Inhalt des a-Elements, also zwischen <a> und </a>, notieren Sie den Text, der dem Anwender als Verweis angeboten wird (bei den meisten Web-Browsern andersfarbig, meist unterstrichen).

In HTML4 konnten nur Klartext, inline-Elemente wie span oder Grafiken verlinkt werden.
In HTML5 können Sie das a-Element als Elternelement für beliebig viele Kindelemente (auch Blockelemente wie aside, etc.) verwenden.


Attribute[Bearbeiten]

accesskey[Bearbeiten]

href[Bearbeiten]

Das href-Attribut (href = hyper reference = Hyper(text)-Referenz) verwandelt das a-Element in einen Verweis, indem Sie ihm das gewünschte Verweisziel als Wert zuweisen.

Beachten Sie, dass Sie den genauen Speicherort im href-Attribut richtig referenzieren, wenn Sie eine Datei einbinden. Ansonsten produzieren Sie einen toten Link, der Benutzer verärgert.
Empfehlung: Achten Sie darauf, dass Verweise immer als solche erkennbar sind.

hreflang[Bearbeiten]

Mit dem hreflang-Attribut können Sie abweichend von der Sprachangabe des Linktexts die Sprache des Linkzieles angeben. Der Attributwert ist ein IANA-Sprachkürzel.

Beispiel: Sprachangaben bei Links ansehen …
<p lang="en">
  This text represents the primary language of the linking ressource<br>
  It contains a link to another Ressource
  <a href="http://example.org" lang="en" hreflang="de">Ressource in German</a>
</p>
Der Absatz in englischer Sprache erhält eine entsprechende Sprachangabe.
Der Linktext ist zwar auch in Englisch, was über das lang-Attribut ausgezeichnet wird. Die Sprache der Ressource ist aber Deutsch, was mit dem hreflang-Attribut ausgezeichnet wird.
Hauptartikel: Internationalisierung

rel[Bearbeiten]

Mit dem rel-Attribut können Sie bei einem Verweis angeben, in welcher logischen Beziehung er zu seinem Verweisziel steht. Welche Angaben hier möglich sind, wird unter HTML/Kopfdaten/Link beschrieben (die Besonderheit des Firefox zu „next“ greift nicht beim a-Element). Daneben sind auch Rückverweise mit dem rev-Attribut möglich, das aber unter HTML5 deprecated ist.

  • HTML 4.0
  • XHTML 1.0

tabindex[Bearbeiten]

Es ist möglich, mit Hilfe der Tabulator-Taste die Verweise einer HTML-Datei anzuspringen (mit der Return-Taste ist der Verweis dann ausführbar). Normalerweise werden die Verweise dabei in der Reihenfolge angesprungen, in der sie in der Datei definiert sind. Sie können jedoch mit dem Universalattribut tabindex eine andere Reihenfolge festlegen.

  • HTML 4.0
  • XHTML 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<a href="http://german.imdb.com/" tabindex="4">Movie Database</a>
<a href="http://www.theonlineblues.com/" tabindex="2">Chart Lyrics</a>
<a href="http://www.meinestadt.de/" tabindex="1">Meine Stadt</a>
<a href="http://paperball.fireball.de/" tabindex="3">Paperball</a>
Mit dem Universalattribut tabindex können Sie Angaben zur Tabulator-Reihenfolge machen. Beim Anspringen der Verweise mit der Tabulator-Taste wird zuerst der Verweis mit der niedrigsten Tabindex-Nummer angesprungen, dann der mit der zweitniedrigsten usw. und als letztes der Verweis mit der höchsten Tabindex-Nummer. Im obigen Beispiel wird also zuerst der dritte Verweis angesprungen, dann der zweite, dann der vierte und zuletzt der erste.

Tabindizes beziehen sich stets auf das gesamte angezeigte Dokument. Dabei werden auch Formulare sowie Verweisbereiche in Grafiken und Objekten mit einbezogen. Wenn Sie außer normalen Verweisen auch solche Elemente in Ihrer Datei haben, sollten Sie die Tabulator-Reihenfolge für alle Elemente gemeinsam festlegen. Das bedeutet aber auch, dass es in den meisten Fällen sinnvoll ist, auf eine geänderte Tabulatorreihenfolge zu verzichten.

target[Bearbeiten]

Der Titel dieses Artikels ist mehrdeutig. Für


Mit dem target-Attribut können Sie ein Zielfenster für Verweise festlegen, so dass ein Verweisziel im aktuellen oder einem neu geöffneten Browserfenster oder Tab (Registerkarte) angezeigt wird.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 4.0
  • XHTML 1.0

Folgende Werte sind möglich:

  • _self: öffnet im aktuellen Fenster (Standardwert)
  • _blank: öffnet in neuem Fenster
  • _parent: Elternfenster
  • _top: oberstes Fenster
  • <name>: eigener Fenstername für vorhandenes oder neues Fenster
Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>Verweis in neuem Fenster</title>
  </head>
  <body>
    <p>
      <a target= "_blank" href="https://www.heise.de/newsticker/" rel="noopener">Heise Newsticker</a> 
      in einem neuen Fenster
    </p>
  </body>
</html>

Ursprünglich war das target-Attribut für eine effektive Arbeit mit Framesets gedacht und Sie konnten mit target festlegen, in welchem Frame das Linkziel dargestellt werden soll.

Per Voreinstellung werden alle Verweise im aktuellen Browserfenster geöffnet. Wenn Sie dieses Verhalten für Ihre Internetdokumente nicht wünschen, können Sie in den Kopfdaten der HTML-Datei eine andere Zielfensterbasis angegeben.

pro und kontra target-Attribut[Bearbeiten]

Das Öffnen neuer Browserfenster ist eine umstrittene Angelegenheit. Während die einen es lieber sehen, wenn ein anderes Angebot oder auch nur ein anderer Bereich einer Website sich in einem neuen Fenster öffnet und somit das ursprüngliche Dokument im Hintergrund geöffnet bleibt, sehen es andere als eine Bevormundung an, dem Nutzer ohne seinen ausdrücklichen Wunsch ein neues Browserfenster zu öffnen. Ein neues Fenster verhindert auch das Nutzen von Navigationselementen zum Blättern, die jeder Browser mitbringt, oder zusätzlichen Vorwärts- und Zurück-Tasten auf Tastaturen oder Mäusen. In den Strict-Varianten von HTML 4.01 und XHTML 1.0 ist aus diesen Gründen das target-Attribut nicht enthalten. In HTML5 ist es wieder erlaubt.[1]

Empfehlung: Wenden Sie target="_blank" nur dann an, wenn das Öffnen im gleichen Tab zu einem gravierenden Datenverlust für den User führen würde. In einem solchen Kontext würde ein User sehr wahrscheinlich sowieso einen neuen Tab öffnen.
Beachten Sie: Wenn Sie target="_blank" einsetzen, sollten Sie aus Gründen des Sicherheit[2] auch rel="noopener" zum betreffenden a-Element hinzufügen – oder ganz auf das Öffnen von neuen Tabs (externer Seiten) verzichten.

Eine Unterscheidung zwischen Fenstern und Tabs / Registerkarten oder Ähnlichem ist im HTML-Standard nicht vorgesehen. Ob sich ein Fenster oder ein Tab öffnet, ist lediglich im Browser einstellbar. In einigen Browsern kann man über eine Konfigurationseinstellung das Öffnen neuer Fenster/… auch grundsätzlich verbieten.

Nutzer können beim Klicken auf den Link das Verweisziel

  • mit gedrückter Shift-Taste in einem neuen Fenster …
  • mit gedrückter Strg-Taste in einem neuen Tab …

öffnen.

title[Bearbeiten]

Der Titel dieses Artikels ist mehrdeutig. Für das gleichnamige Element siehe HTML/Kopfdaten/title.


  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 4.0

Das title-Attribut soll dem Betrachter einen inhaltlichen Hinweis darauf geben, was er hinter dem Link zu erwarten hat. In den meisten aktuellen Browsern wird das title-Attribut als Tooltip dargestellt, also als kleiner Kasten, der auftaucht, sobald der Mauszeiger einen Moment über dem Element verweilt. Das ist insbesondere dann sinnvoll, wenn der Inhalt nicht eindeutig aus dem Verweistext (oder Bild), also dem, was zwischen den a-tags steht, klar wird, zum Beispiel bei Verweisen im Fließtext.

Beispiel
<!doctype html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>Titel in Verweisen</title>
  </head>
  <body>
    <p>
      Auf folgender Seite haben wir für Sie 
      <a title="Startseite des Selfhtml-Wikis" href="https://www.wiki.selfhtml.org">
          allgemeine Informationen zum Selfhtml-Wiki 
      </a>
      zusammengestellt.
    </p>
  </body>
</html>
Verwenden Sie stets aussagekräftige Linktexte. (Wie sieht ein guter Verweis aus?)
Beachten Sie: Auf mobilen Geräten mit Touch-Bildschirm bleibt das title-Attribut unwirksam, da es dort ja kein Hovern mit der Maus gibt. Verzichten Sie folglich auf das title-Attribut!

Spezielle Verweisziele[Bearbeiten]

Download-Verweise[Bearbeiten]

Durch die Angabe von Download öffnet sich ein Fenster, bei dem sich der Benutzer entscheiden kann, die Zieldatei im Browser (mit einem vom Browser vorgeschlagenen Programm) zu öffnen oder auf der Festplatte zu speichern. Aber auch Browser, die das download-Attribut nicht kennen, erkennen manche Dateiendungen wie .zip oder .pdf und öffnen eine Dialog-Box mit Optionen.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
  • HTML5

Details: caniuse.com

Beispiel ansehen …
<h1>Ein Download-Link-Verweis</h1> 
<figure> 
    <a href="https://wiki.selfhtml.org/images/3/31/Hund.gif" download>
        <img src="https://wiki.selfhtml.org/images/3/31/Hund.gif" alt="Hund.">
    </a> 
    <figcaption>Klicken Sie zum Download (GIF, 2.268 Byte)</figcaption>
</figure> 
<hr>
<p> 
    Das Template Nr. 12 können Sie kostenfrei 
    <a href="http://…" download="SELFHTML-Template12.zip">
        downloaden 
    </a>. (ZIP, 97kB, MD5-Prüfsumme: 7fe40233ae8350fbbe46001e0d9c372b)
</p>

Beim Ausführen der Links wird in Abhängigkeit von den Browsereinstellungen die Ressource direkt gespeichert oder zum Download angeboten. Für den zweiten Link wird durch den Wert des download-Attributes ein Dateiname vorgeschlagen. Bis auf die Microsoft-Browser Edge und Internet Explorer verhalten sich derzeit (April 2017) alle aktuellen Browser-Versionen spezifikationsgemäß, nur Edge ignoriert einen vorgeschlagenen Dateinamen, der Internet Explorer kennt das download-Attribut gar nicht.

Wenn man Zugriff auf den Server hat, kann man HTTP-Header senden, die dem Browser vorgaukeln, es handle sich um eine Binärdatei unbekannten MIME-Typs.

Beispiel
$path = './download/mp3/song.mp3';
$filename = preg_replace('~^.*/~', '', $path);

// this header forces a download dialog in the browser
header('Content-Type: application/octet-stream');

header(sprintf(
  'Content-Disposition: attachment; filename="%s"',
  $filename
));

header('Content-Transfer-Encoding: binary');
header('Content-Description: File Transfer');
header('Content-Length: '.fsize($path));
header('Accept-Ranges: bytes');

readfile($path);

exit;

Verweise auf beliebige Dateien[Bearbeiten]

Sie können auf jede beliebige Datei (Audio-Dateien, Tabellenkalkulations-Dateien, CAD-Dateien, Videodateien, Grafikdateien, Textverarbeitungs-Dateien, Programmdateien, und auch Datenbankdateien) einen Verweis setzen. Aus Sicht von HTML ist das kein Problem.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0

Das Problem besteht darin, was der Web-Browser des Anwenders mit den Dateien anfangen kann, bzw. wie er ihren Inhalt korrekt anzeigen oder abspielen lassen kann. Um dem Browser die Aufgabe zu erleichtern, um welche Art von Datei es sich handelt, können Sie den MIME-Typ der Datei angeben, auf die Sie verweisen.

Beispiel
<p>
  <a href="einsundeins.xls" type="application/msexcel">einsundeins.xls</a> 
  Ein Verweis auf eine Excel-Datei
</p>
Durch die Angabe des MIME-Types application/msexcel erkennt der Browser, dass es sich um eine Tabellenkalkulation handelt.

Andere Protokolle[Bearbeiten]

Neben den hier zumeist beschriebenen Protokollen http:// bzw. https:// (Server, bei denen die Datenübertragung von und zum Browser verschlüsselt stattfindet, z.B. bei Internet-Banking) können Sie auch andere Internet-Protokolle adressieren, beispielsweise FTP-Adressen mit ftp:// oder Telnet-Adressen mit telnet://. Auch Newsgroups im Usenet können Sie adressieren, nämlich mit news: (ohne die beiden sonst charakteristischen Schrägstriche). Dabei kommt es auf den Web-Browser an, wie er damit umgeht. Nahezu alle modernen Browser beherrschen zumindest FTP und stellen entsprechende Adressen in ihrem Anzeigefenster dar. Bei Protokollen, die der Browser nicht unterstützt, versucht er, auf dem Rechner des Anwenders ein Programm auszuführen, das für das entsprechende Internet-Protokoll zuständig ist. Bei Telnet wird beispielsweise ein auf dem Rechner installierter Telnet-Client aufgerufen, und bei Verweisen auf Newsgroups ein Newsreader oder das Newsreader-Modul eines E-Mail-Programms. Bei Newsgroups muss jedoch ein News-Server im Newsreader des Anwenders eingerichtet sein, der die adressierte Newsgroup anbietet.

Es gibt neben den angesprochenen Internet-Protokollen auch noch andere, etwa wais oder irc. Ferner gibt es das „Un-Protokoll“ file, über das sich lokale Rechner und Netzwerkadressen absolut adressieren lassen, mit Angaben wie <a href="file://localhost/">...</a>. Dies wird von moderneren Browsern jedoch aus Sicherheitsgründen nicht mehr oder nur noch eingeschränkt unterstützt und ist auch nicht besonders sinnvoll, da es heute wirklich kein Problem mehr ist, für lokale Zwecke einen Web-Server lokal einzurichten.

Quellen[Bearbeiten]

  1. W3C: target - valid-browsing-context-name-or-keyword
  2. Mathias Bynens: About rel=noopener – What problems does it solve?

Siehe auch[Bearbeiten]

  1. Hypertext
  2. Referenzieren in HTML
    • Mit vollständigen URIs referenzieren
    • Mit relativen Pfadangaben referenzieren
  3. Seiteninterne Verweise
    • Sprungmarken zum Seitenanfang
    • unsichtbare Anker
  4. Gestaltung mit CSS
    • Wie sieht ein guter Verweis aus?
    •  :hover und :focus
    • Text-Links mit CSS gestalten
    • externe Links kennzeichnen
  5. Verweise auf Mailadressen
  6. klickbare Telefonnummern
  7. Tastaturkürzel als Verweise