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.

<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
eine gültige URL des anderen Dokuments. Das Attribut ist erforderlich.
hreflang
Sprache des Dokuments an, auf das der Link zielt.
media
gibt an, auf welches Medium sich der Link bezieht. Gültige Werte sind all, aural, braille, handheld, print, projection, screen, tty und tv.
rel
ist eine durch Leerzeichen getrennte Liste von Werten, mit denen die Art der Verwandschaft zur aktuellen Webseite erklärt wird. Die Werte können alternate, author, bookmark, canonical, help, icon, license, nofollow, noreferrer, prefetch, search, stylesheet, tag sowie next und prev sein.
sizes (neu in HTML5)
Größe der gelinkten Resource. Gilt nur für rel="icon".
charset (nicht mehr in HTML5 enthalten)
Zeichencodierung in der Zieldatei. Die Zeichencodierung legt die Darstellung der Zeichen auf dem Monitor fest.
rev (nicht mehr in HTML5 enthalten)
ist eine durch Kommas getrennte Liste von Werten, mit denen die Art der Verwandschaft zwischen dem Zieldokument und dem Quelldokument des Links erklärt wird. Es beschreibt einen Rückwärtslink. Zu den vorgeschlagenen Werten gehören appendix, bookmark, chapter, contents, copyright, glossary, help, index, next, prev, section, stylesheet und subsection.
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='http://www.mediaevent.de/' /> oder
<link rel='canonical' href='http://mediaevent.de/' />

oder 

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

Favicon einbinden

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

<link rel="shortcut icon" href="http://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="" />