x

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.

Play Video

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.

<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=yes">


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.

<meta name="description" content="Das ist die index.html Datei aus dem SIFA Digital HTML Grundkurs.">


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

<meta name="keywords" content="html, grundkurs, tutorial, youtube, sifa digital">

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

<title>Index - HTML Grundkurs</title>

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:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=yes"> <meta name="description" content="Das ist die index.html Datei aus dem SIFA Digital HTML Grundkurs."> <meta name="keywords" content="html, grundkurs, tutorial, youtube, sifa digital"> <title>Index - HTML Grundkurs</title> </head> <body> test </body> </html>


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.

Verpasse keine neuen Inhalte!

Um keine zukünftigen Inhalte zu verpassen, kannst du dich kostenlos in unseren E-Mail Newsletter eintragen. Als Mitglied des E-Mail Newsletter bekommst du exklusive Inhalte sowie eine Übersicht der neuen Tutorials von uns zugesendet.
Du kannst jederzeit deine E-Mail-Adresse aus dem Newsletter wieder austragen.

Für aktuelle Inhalte und Neuigkeiten findest du uns auch bei YouTube, Facebook und Instagram.

E-Mail Newsletter:

Aktuell ist unser Newsletter deaktiviert.

Social Media: