Head-Bereich

Jede Webseite besteht aus einem Head- und einem Body-Bereich. Da der Body-Bereich alle sichtbaren Elemente beinhaltet, kann der Head-Bereich ja garnicht so wichtig sein, oder? Tatsächlich ist der gesamte Inhalt des <head></head> Elements genauso wichtig, wie der aus dem <body></body>.

Title

Das <title></title> Element ist eines der wohl bekanntesten, denn es ist oftmals eines der ersten Elemente, die wir beim Lernen von HTML zu Gesicht bekommen. Da sich dieses Element im <head></head> Bereich befindet, sollten wir davon ausgehen, dass es sich hierbei um eine nicht sichtbare Auszeichnung handelt. Allerdings stimmt dies nur bedingt:

Das <title></title> Element gibt einer Webseite ihren Namen und wird von den meisten Browsern im Tab angezeigt. Somit ist dieses Element nicht auf der Webseite sichtbar, sondern im Browser.

  • Html
  • Ergebnis
<html> <head> <title>Titel der Webseite</title> </head> <body></body> </html>

Styles definieren

Weiterhin haben wir mittels des <style></style> Elements und CSS die Möglichkeit Styles zu definieren, die sich lediglich auf das momentane Webdokument beziehen.

  • Html
  • Ergebnis
<html> <head> <title>Titel der Webseite</title> <style type="text/css"> h1{ color: red; } </style> </head> <body> <h1>Eine rote Überschrift</h1> </body> </html>

In dem obigen Code haben wir mithilfe von CSS definiert, dass jede Überschrift, die durch ein <h1></h1> Element ausgezeichnet ist, die Farbe Rot bekommen soll. Interessant ist das type="" Attribut, mit dem man früher angeben musste, um was für eine Art von Style es sich handelt. Dieses Attribut wird heutzutage nicht mehr benutzt, wurde hier jedoch noch mit angegeben.

Mehr zur Stylesheetsprache CSS findest Du in den dazugehörigen Tutorials.

Stylesheets einbinden

Möchte man Styles für mehrere Dokumente und eine größere Anzahl an Elementen definieren, so weist man diese bekanntlich in ein sogenanntes Stylesheet aus. Eine Datei mit der Endung .css, die nun sämtliche Regeln beinhaltet. Wollen wir diese einbinden, so können wir das mithilfe des <link /> Elements:

  • Html
  • Ergebnis
<html> <head> <title>Titel der Webseite</title> <link href="LINK_ZUM_STYLESHEET.css" rel="stylesheet" type="text/css" /> </head> <body></body> </html>

<link /> ist ein leeres Element und wird standardmäßig mit drei Attributen angegeben.

  • Das rel="" Attribut steht für "relation" (Beziehung) und gibt an, was für eine Art von Dokument wir einbinden wollen:
  • Das type="" Attribut gibt an, um was für eine Spezifikation des Dokuments es sich handelt. (Es gibt nicht nur Stylesheets, die in CSS geschrieben sind)
  • Das href="" Attribut steht für "hyper reference" und gibt den Verweis bzw. Link zum tatsächlichen Dokument an.

Skripte ausführen

Skripte machen unsere Seite dynamisch. Oftmals wird bei Webseiten Javascript oder eines seiner zahlreichen Frameworks, wie jQuery, AngularJs oder Node.Js benutzt.

Möchten wir Javascript direkt ausführen, so gibt es dafür das <script></script> Element:

  • Html
  • Ergebnis
<html> <head> <title>Titel der Webseite</title> <script type="text/javascript"> alert("Javaskript wird ausgeführt"); </script> </head> <body></body> </html>

Ein paar wichtige Sachen gibt es zu diesem Element noch zu wissen. Zunächst fällt das type="" Attribut auf, welches heutzutage von den Parsern nicht mehr gebraucht wird, hier aber noch angegeben wurde. Ruft man den obigen Code auf, so bemerkt man, dass alle Inhalte aus dem <script></script> Element sofort ausgeführt werden.

Falls Javascript nicht sofort ausgeführt wird, so kann das an verschiedenen Einstellungen des Browsers liegen. Entweder der Benutzer hat eingestellt, dass er vor einer Ausführung gefragt werden möchte, er hat Javascript in den Einstellungen blockiert oder benutzt ein Plugin, welches alle oder bestimmte Skripte auf einer Webseite blockt.

Skripte einbinden

Ähnlich, wie bei den Stylesheets, hat man die Möglichkeit Skripte in separate Dateien auszulagern. Diese kann man ebenfalls mithilfe des <script></script> Elements einbinden:

  • Html
  • Ergebnis
<html> <head> <title>Titel der Webseite</title> <script src="LINK_ZUR_SKRIPTDATEI.js" type="text/javascript"></script> </head> <body></body> </html>

An dem obigen Beispiel kann man deutlich erkennen, dass wir dem <script></script> Element lediglich das src="" Attribut (kurz für: "source" = Quelle) hinzufügen müssen. Was passiert aber, wenn wir eine Datei einbinden und im gleichen Element Javascript-Code einfügen:

  • Html
  • Ergebnis
<html> <head> <title>Titel der Webseite</title> <script src="LINK_ZUR_SKRIPTDATEI.js" type="text/javascript">alert("Inline-Skript");</script> </head> <body></body> </html>

Ruft man den obigen Code auf, so wird lediglich der Inhalt aus der Javascript-Datei ausgeführt und das alert("Inline-Skript"); ignoriert.

Meta-Elemente

Das Wort "meta" kommt aus dem griechischen und bedeutet "danach" oder auch "jenseits". Einen durchaus guten Kompromiss kann man bei der Übersetzung ins Deutsche schließen, wenn man dieses Wort mit "über" übersetzt. Die Metaphysik bezeichnet einen Bereich, der mit seinen Überlegungen über die Physik hinaus (jenseits) geht. Auf ähnliche Weise sorgen <meta /> Elemente dafür, dass wir Informationen über unsere Webseite angeben können.

Die Rede ist tatsächlich von mehreren Elementen, da wir dieses eine Element - ähnlich dem Formular-Element <input /> - durch Attribute eine ganz andere Bedeutung zukommen lassen können.

Bevor wir mit den grundlegenden Arten des <meta /> Elements anfangen, möchte ich hier klar betonen, dass das Thema SEO zu groß wäre, als dass wir es hier ausführlich besprechen könnten. Einen kleinen Tipp möchte ich aber in Bezug auf die <meta /> Elemente doch verlieren:

Wer ein gutes Ranking erzielen möchte, der braucht heutzutage allen voran einen sehr guten und großen Inhalt, viel Zeit für Backlinks und viel Zeit damit die Suchmaschinen registrieren können, dass eine Webseite gute Qualität aufweist (über längere Zeit immer wieder aufgerufen wird) und ein großes Stück des Sprichworts: Weniger ist mehr!, wenn es um das Meta-Thema geht.

Zurück zu dem <meta /> Element. Es gibt unzählige Varianten, die alle mehr oder weniger von Nutzen sind. Deswegen möchte ich hier auf die wichtigsten verweisen:

  • <meta name="description" content="Inhalt" />
  • <meta name="keywords" content="Stichwort 1, Stichwort 2" />
  • <meta name="author" content="Autorenname" />
  • <meta name="robots" content="all" />
  • <meta http-equiv="content-type" content="text/html; charset=utf-8" />

Meta-Description

Das Meta-Description Element sollte auf keiner einzigen Webseite fehlen. Es ist zweifellos eines der gravierendsten Arten von Meta-Elementen, da es der Seite eine Beschreibung gibt (vom eng. description = Beschreibung). Die meisten Suchmaschinen benutzen dieses Element in der Regel für ihre Auflistung an gefundenen Webseiten:

Meta-Description-Tag Beispiel - CodingLab

Das obige Bild zeigt dieses Element im Einsatz auf Facebook. Google zeigt den Inhalt dieses Elements also ausnahmslos unter dem direkten Link zur Webseite an. Ein paar wichtige Regeln gibt es allerdings, auf die man achten sollte:

  • Es wird empfohlen zwischen 150 und 160 Zeichen für die Beschreibung zu benutzen.
  • Es sollte kurz und knapp auf den wesentlichen Inhalt eingegangen werden.
  • Es sollte möglichst für jedes einzelne Webdokument eine andere Beschreibung benutzt werden.
  • Html
  • Ergebnis
<meta name="description" content="Auf dieser Seite wird das Head-Element umfassend behandelt. Neben Stylesheets und Skripten geht es vor Allem um Meta-Elemente." />

Meta-Keywords

Mit dem Meta-Keywords Element gibt man Schlagwörter (vom eng. keyword = Stichwort) an, die auf den Inhalt der Webseite zutreffen. Früher hatte dieses Element wesentlich mehr Gewichtung als heutzutage. Allerdings ist dieses Element immer noch unentbehrlich, denn es gibt nicht nur Google als Suchmaschine. Folgende Kriterien sind für dieses Element wichtig:

  • Es werden alle Stichwörter durch ein Komma getrennt.
  • Es sollten knapp 50 bis 200 Zeichen bzw. 10 bis 30 Stichwörter angegeben werden.
  • Es sollten Stichwörter gewählt werden, die dem Inhalt so genau wie möglich entsprechen.
  • Html
  • Ergebnis
<meta name="keywords" content="HTML5, HTML, Tutorial, Anleitung, Head, Meta Elemente" />

Meta-Author

Das Meta-Author Element ist ein "Nice-To-Have" Element. Für die Suchmaschinen-Optimierung bringt es rein gar nichts. Dennoch ist dieses Element nicht ganz unwichtig, denn immerhin gibt man damit den Autor des Inhalts einer Webseite an. Sucht man also nach einer bestimmten Person, könnte dieses Element bei einigen (nicht ganz so bekannten) Suchmaschinen und Crawlern helfen. Des Weiteren können Sprachsynthesizer und Braille-Geräte diese Daten auslesen und es Menschen mit Handicap erleichtern, den Autor eines Artikels herauszufinden.

  • Html
  • Ergebnis
<meta name="author" content="CodingLab" />

Meta-Robots

Das Meta-Robots Element macht schon wesentlich mehr Sinn, wenn man ein bestimmtes Ziel verfolgt. Es kann die folgenden Werte für das Attribut content="" annehmen und ist in erster Linie für Google von Bedeutung:

WertBeschreibung
noindexGoogle soll die Seite nicht indexieren
nofollowGoogle soll die Unterlinks dieses Dokuments nicht berücksichtigen
indexGoogle soll die Seite indexieren
followGoogle soll die Unterlinks dieses Dokuments berücksichtigen
allGoogle soll die Seite indexieren und die Unterlinks berücksichtigen

Der Wert all ist standardmäßig für jedes Webdokument von Google angenommen, falls wir es nicht ausdrücklich anders deklarieren. Im folgenden Beispiel weisen wir Google an, dass er unser Dokument lediglich indexieren, jedoch nicht deren Unterlinks folgen soll:

  • Html
  • Ergebnis
<meta name="robots" content="index, nofollow" />

Meta-Http-Equiv

Das Meta-HTTP-Äquivalent Element wird in der Regel benutzt um einen Antwort-Header zu simulieren (eng. response header). Aber was ist nun ein Antwort-Header?

HTTP-Header senden und empfangen - CodingLab

Teil des HTTP's ist ein sogenannter "Headerblock". In diesem Block von Kopfdaten, werden Informationen über den Transfer geschickt. Fragen wir eine Webseite an, so sendet der Browser an den Zielserver einen Header, der immer aus einer Anfragen-Zeile und den dazugehörigen Header-Informationen besteht. Eine Anfrage an genau diesen Artikel könnte also folgenden Anfrage-Header haben:

  • Html
  • Ergebnis
GET /tutorials/html/head/ HTTP/1.1 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding:gzip, deflate, sdch Accept-Language:de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4 Cache-Control:max-age=0 Connection:keep-alive Host:www.coding-lab.de Referer:https://www.google.de/ Upgrade-Insecure-Requests:1 User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.97 Safari/537.36

Ohne näher drauf eingehen zu wollen, sollte hier jedoch erwähnt werden, dass es sich bei der ersten Zeile um die Anfragen-Zeile handelt und bei den restlichen Daten, um die HTTP-Header.

Als nächstes sendet der Server Daten zurück. Diese bestehen in der Regel aus einer Status-Zeile, weiteren HTTP-Headern und dem Inhalt. Eine HTTP-Antwort könnte bei dem obigen Beispiel also wie folgt aussehen:

  • Html
  • Ergebnis
HTTP/1.x 200 OK Connection:Keep-Alive Content-Type:text/html Date:Mon, 01 Feb 2016 20:28:21 GMT Keep-Alive:timeout=2, max=195 Server:Apache Transfer-Encoding:chunked X-Powered-By:PHP/5.4.45 <!DOCTYPE html> <html> <head> <title>HTML - Head | CodingLab</title> <meta charset="utf-8"> <meta name="description" content="Auf dieser Seite wird das Head-Element umfassend behandelt. Neben Stylesheets und Skripten geht es vor Allem um Meta-Elemente."> <meta name="keywords" content="CodingLab, Tutorials, Anleitung, Beispiel, Example, HTML, HTML5, Head, Meta Elemente, Meta Tags, Kopfbereich"> <meta name="robots" content="all"> <!-- Hier würde der restliche HTML-Code folgen -->

Auch hier haben wir wieder die Status-Zeile von den restlichen Headern und dem darauf folgenden Inhalt getrennt. Wir bekommen einen Code: 200 (OK) vom Server, weitere Daten wie beispielsweise den Typ des Inhalts text/html und schließlich den gesamten Inhalt.

Aber was hat das ganze denn jetzt mit dem Meta-HTTP-Äquivalent Element zu tun?

Mit dem obigen Verständnis können wir wesentlich besser verstehen, was es mit dem Antwort-Header-Simulieren auf sich hat. Die HTTP-Header Daten, wie Content-Type können wir nun selbst beeinflussen:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Mit dem obigen Beispiel haben wir dem Browser mitgeteilt, dass es sich um text/html handelt und haben dabei allerdings den Zeichensatz utf-8 mit angegeben. Dieser ist für eine Reibungsfreie anzeige aller Zeichen auf der Webseite von großer Bedeutung. Allerdings gibt es eine Tücke dahinter. Früher war es eben genau für diesen Zweck angedacht, dass Browser sich aus dem geparsten Inhalt Header selber basteln können. Heutzutage hat jeder gleichnamige Header Vorrang und überschreibt unsere Meta-Äquivalente kompromisslos. Insofern möchte ich hier lediglich in kürze auf die Möglichkeiten dieses <meta /> Elements eingehen:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Wie bereits besprochen haben wir mit dieser Variante die Möglichkeit den Typ des angefragten Inhalts zu beeinflussen. Dabei muss es sich keineswegs immer um text/html handeln. Zugelassen sind alle MIME-Types der IANA

<meta http-equiv="refresh" content="5" />

Mit dieser Variante können wir den Browser anordnen das Dokument in einem beliebigen Sekundenintervall neu zuladen. Doch hier ist Vorsicht geboten. Aktualisierungen wirken sich leider schlecht auf die Webseitenbesucher aus, denn dabei handelt es sich um eine Aktion, die der Benutzer nicht steuern kann. Während dieses Element bei E-Mail Webseiten eventuell Sinn machen könnte, sollte es in anderen Zusammenhängen weggelassen werden.

<meta http-equiv="expires" content="0" />

Der Browser lädt eine Webseite oftmals in einen sogenannten "Cache". Eine Art Datenbank, in der die aktuelle Webseite gespeichert und für schnelleres laden und teilweise Offline-Anzeigen benutzt wird. Das ganze hat leider den Nachteil, dass die Benutzer hin und wieder eine Seite zu Gesicht bekommen, die veraltet ist. Das passiert zum Beispiel dann, wenn der Inhalt der richtigen Seite sich ändert, der Browser jedoch die Seite aus dem Cache lädt. Mit dieser Variante geben wir an, wann eine Datei im Cache veraltet und neu geladen werden sollte. Mit dem Wert "0" weißen wir den Browser an, jedes Mal die Seite neu zuladen.