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
  • stylesheet CSS-Datei laden
  • alternate Alternative Version der Seite,
  • author Informationen zum Autor,
  • help Hilfestellung zu dieser Seite,
  • canonical,
  • icon,
  • license,
  • nofollow,
  • noreferrer,
  • prefetch Resource in den Cache laden,
  • search Suche nach aktuellen / verwandten Dokumenten,
  • tag
  • next Kennzeichnet die Seite als Teil einer Serie, der Link in href ist die vorangehende Seite
  • prev Kennzeichnet die Seite als Teil einer Serie, der Link in href ist die nachfolgende Seite
rev
Reverse Link
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="//www.mediaevent.de/"> oder
<link rel="canonical" href="//mediaevent.de/">

oder 

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

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.