CSS, HTML und Javascript mit {stil}

HTML link-Tag – CSS-Datei einbinden

HTML link-Tag

Das HTML link-Tag erzeugt eine Verbindung zwischen dem aktuellen und einem verwandten bzw. benötigten Dokument. Wenn Stylesheets in einer .css-Datei gespeichert sind, wird z.B. die CSS-Datei durch ein link-Tag in das aktuelle Dokument eingebunden.

Das link-Tag kann mehrmals benutzt werden – um genau zu sein, ein Mal pro Link. Jedes Vorkommen des Tags muss dabei innerhalb des head-Elements liegen. Der Wert für das href-Attribut ist erforderlich.

Microdata erweitert das HTML link-Tag um das itemprop-Attribut. Wenn das itemprop-Attribut gesetzt ist, kann das link-Tag auch im body des Dokuments benutzt werden (und das rel-Attribut darf nicht eingesetzt werden).

Also: mit rel-Attribut nur im head, mit itemprop-Attribut auch im body.

<link rel="stylesheet" href="style.css" media="screen">

link ist ein leeres Tag. In XHTML muss noch ein Schrägstrich am Ende des link-Tags gesetzt werden, in HTML5 kann der abschließende Schrägstrich entfallen (muss aber nicht). Ebenso entfallen kann text/css für Links zur css-Datei.

Link rel, media, sizes

href (erforderlich)
eine gültige URL des gelinkten Dokuments.
crossorigin
wie crossorigin-Anfragen behandelt werden
hreflang
Sprache des gelinkten Dokuments.
media
gibt an, auf welches Medium sich der Link bezieht. Gültige Werte sind all, aural, braille, handheld, print, projection, screen, tty und tv oder Querys wie screen and max-wdith:640.
rel
ist eine durch Leerzeichen getrennte Liste von Werten, mit denen die Art der Verwandschaft zur aktuellen Webseite erklärt wird. Mögliche Werte
  • author Informationen zum Autor,
  • alternate Alternative Version der Seite (z,B. Sprachversion, mobile Version),
  • canonical, eindeutige URL (Adresse) der Webseite,
  • help Hilfestellung zu dieser Seite,
  • icon, importiert ein Icon für den besseren Wiedererkennungswert der Seite in Bookmarks,
  • license, Informationen zum Copyright der Seite,
  • next / prev Kennzeichnet die Seite als Teil einer Serie, der Link in href ist die vorangehende / folgende Seite,
  • prefetch Resource in den Cache laden,
  • preload Navigations-Elemente im Voraus und im Cache speichern,
  • search Suche nach aktuellen / verwandten Dokumenten,
  • stylesheet CSS-Datei laden.
rev
Reverser Link (nicht HTML5)
sizes (neu in HTML5)
Größe der gelinkten Resource als [width] x [height], z.B. 32x64. Gilt nur für rel="icon".
<link href="favicon.ico" rel="icon" sizes="32x32 64x64">
type
gibt den MIME-Typ (Multipurpose Internet Mail Extension) des gelinkten Dokuments an. Die beiden möglichen Werte sind text/css und text/javascript.

link rel="canonical"

link rel="canonical" kennzeichnet eine kanonische Seite als bevorzugte Version, wenn es mehrere Seiten mit ähnlichen oder gleichen Inhalten. Kanonische Links lösen das Problem unterschiedlicher URLs oder Adressen, hinter denen ein und dieselbe Webseite sitzt. Ein klassisches Beispiel ist

<link rel="canonical" href="https://www.mediaevent.de/"> oder
<link rel="canonical" href="https://mediaevent.de/">

oder 

<link rel="canonical" href="https://www.mediaevent.de/index.html"> oder
<link rel="canonical" href="https://www.mediaevent.de/">

link hreflang

hreflang meldet die Sprachversion der Webseite. Wenn eine Webseite in mehrere Sprachen übersetzt ist, können die Inhalte dennoch teilweise gleich sein – z.B. wenn Seiten nicht übersetzt sind (etwa bei österreichischen und einer deutschen Ausgabe der Seite). Das führt zu Duplicated Content und einer Abwertung im Suchmaschinen-Rang.

<link rel="alternate" hreflang="de-de" href="https://myshop.de/">
<link rel="alternate" hreflang="de-at" href="https://myshop.at/">
<link rel="alternate" hreflang="en-en" href="https://myshop.com/">

Diese Einträge im Seitenkopf zeigen den Suchmaschinen, dass es mehrere Sprachversionen der Seite gibt. Am besten führt der internationale Internet-Auftritt die link hreflang-Tags für jede einzelne URL auf.

<link rel="alternate" hreflang="de-de" href="https://myshop.de/produkt-1">
<link rel="alternate" hreflang="de-at" href="https://myshop.at/produkt-1">
<link rel="alternate" hreflang="en-en" href="https://myshop.com/product-1">

Mehr zum richtigen Einsatz des hreflang-Attributs für mehrsprachige Webseiten: hreflang: Die 9 häufigsten Fehler

Favicon einbinden

Ein anderes Beispiel für das link-Tag ist der Link zum Favicon.

<link rel="shortcut icon" href="https://www.mediaevent.de/favicon.ico">

Zusätzliche Datenquellen angeben – RSS- oder Atom:

<link rel="alternate" type="application/rss+xml" title="" href="">
<link rel="alternate" type="application/atom+xml" title="" href="">

link rel="next" / rel="prev"

Mit dem rel-Attribut kann das link-Tag die Beziehung zu anderen Seiten innerhalb des Internet-Auftritts aufzeigen, typischerweise next und previous, nächste und vorangehende Seite. Der praktische Nutzen dieser Angabe ist allerdings zweifelhaft, denn der Benutzer oder Besucher der Seite sieht von diesen Angaben nichts.