HTML Grundkurs: Der Head (Kopf) einer HTML-Datei
In diesem Beitrag erklären wir dir, was der Head (Kopf) einer HTML-Datei ist und warum du ihn bei deiner Webseite nicht vergessen darfst.
Was ist der Head?
Wenn du das HTML-Dokument für eine Webseite erstellen möchtest, kommst du um den Head nicht drum herum.
Das Head-Tag ist heute einer der wichtigsten Tags und ist daher auf jeder Webseite direkt nach dem öffnenden HTML-Tag zu finden.
Im Head werden Informationen abgespeichert, die zum Großteil vom Browser später nicht angezeigt werden. Du kannst zum Beispiel im Head neue Schriftarten einbinden und CSS-Dateien mit deinem HTML-Dokument verknüpfen.
In diesem Beitrag zeige ich dir ein paar wichtige Tags, die in deinem Head nicht fehlen sollten.
Zeichenkodierung und Viewport
Starten wir nun mit dem ersten zwei Meta-Tags.
Tippe dazu genau wie ich den folgenden Code direkt nach dem öffnenden Head-Tag ein.
Diese Tags sind sehr wichtig für den Browser.
Das Attribut „charset“ im ersten Tag gibt die Kodierung deines Dokuments an.
Das Attribut „name“ und „content“ im zweiten Tag ist vor allem für Benutzer an mobilen Geräten wichtig. Es gibt an, ob ein Benutzer am Smartphone oder am Tablet mit zwei Fingern die Webseite vergrößern darf und falls ja wie stark er diese vergrößern kann.
Die Meta Description
So kommen wir zum nächsten Meta-Tag.
Tippe dazu wieder denselben Code wie ich ein.
Das ist der Meta Description Tag.
Durch diesen Tag kannst du deiner Webseite eine Beschreibung hinzufügen, die später vor allem für die Suchmaschinen wichtig ist. Die Beschreibung wird nicht direkt auf deiner Webseite angezeigt.
Die Meta Keywords
Durch diesen Tag kannst du deiner Webseite Keyword hinzufügen.
Ehrlich gesagt ist dieser Tag aber nicht extrem wichtig, du kannst ihn also auch weglassen.
Der Title-Tag
Er ist mit einer der wichtigsten Tags in unserem HEAD Bereich und wird auch im Fenster unseres Browser wiedergegeben.
Die index.html Datei testen
Speicher jetzt dein HTML-Dokument ab.
Gehe anschließend in deinen HTML Grundkurs Ordner und öffne die index.html Datei.
Nun siehst du, dass sich fast nichts verändert hat und immer noch „test“ ganz links oben im Browser steht. Das einzige was sich verändert hat, ist der Text von unserem Tab.
Um zu überprüfen ob du dein Dokument abgespeichert hast und der Browser auch die richtige HTML-Datei geöffnet hat, mache einen Rechtsklick auf deinen Browser und klicke auf „Seitenquelltext anzeigen“.
Optional kannst du auch die Strg-Taste plus die U-Taste drücken.
Sollte der Browser nun unseren soeben erstellten Code im Head der HTML-Datei anzeigen, hast du alles richtig gemacht.
Die index.html Datei:
Im nächsten HTML Tutorial gehen wir genauer auf den Titel-Tag und auf die Meta Description ein, da hier häufig Fehler gemacht werden, die dann dafür sorgen, dass deine Webseite später nicht bei Google gefunden wird.
