Sie sind hier: Startseite -> HTML-Grundlagen -> head (Inhalt -> Kopfteil)

Kopfteil der HTML-Webseite mit dem head-Tag

Zentrale Einstellungen der HTML-Seite

Jede HTML-Seite, also nicht nur die Startseite, sondern auch jede Unterseite, hat ein fixes Schema: das beginnt mit dem HTML-Tag, mit dem das Dokument eröffnet wird, dann folgt der head-Tag, dem Kopfteil und dann folgt der Body-Tag, in dem sich der eigentliche Inhalt befindet. Der head-Tag ist dabei nicht nur einfach ein Kopfteil, weil es ihn geben muss, denn er hat wichtige Funktionen.

Dazu gehören etwa die Meta-Tags und der Titel der Seite, der dann im Browser oben angezeigt wird und der für das Auffinden in der Suchmaschine wichtig ist. Die Meta-Tags stellen weitere Spielregeln dar und auch das Einbinden der CSS-Datei(en) für die Darstellung der Seite erfolgen genau hier im Kopfteil.

Kopfteil der HTML-Webseite mit dem head-Tag

Dabei darf man den head-Tag nicht mit der Definition Header verwechseln. Während der Header ein sichtbarer Kopfteil auf der Webseite ist, beispielsweise mit einem Logo und einem Werbespruch oder einer Navigation, ist der head-Tag nicht sichtbar und beinhaltet zentrale Einstellungen, die für die Darstellung der Seite nötig sind.

Zu den Einstellungen im head-Tag gehört in erster Linie der title-Tag, also der Titel der Seite. Dieser Title-Tag ist für die Suchmaschinenoptimierung wesentlich und es passiert häufig, dass sogenannte Experten eine ganze Latte an Schlüsselwörter (Keywords) in die Meta-Tags einbauen, aber der title-Tag bleibt leer. Umgekehrt wäre es sinnvoller.

Wenn der title-Tag nicht ausgefüllt ist, erkennt man das daran, dass im Browser statt der Schlüsselwörter bzw. des Seitentitels nur "Unbenannt" oder "Unbenanntes Dokument" steht. Im Sinne einer guten Position in den Suchmaschinen ist das wenig ratsam, denn gerade der Titel liefert die Kernaussage, worum es auf dieser einen Seite speziell gehen soll.

Der head-Tag beinhaltet aber mehr als den title-Tag. Es gibt auch die bereits angesprochenen Meta-Tags, in denen beispielsweise festgelegt werden können, wer der Autor der Seite ist, wie oft die Suchmaschinen, vor allem die Google-Bots vorbeischauen sollen, um die neueste Version abzuholen oder auch welche Sprache diese Seite aufweist. Manche dieser Tags sind nicht mehr sehr aktuell, funktionieren können sie aber immer noch. Es gibt Seiten mit unglaublicher Liste von Meta-Tags im head-Tag, andere haben die Pflicht-Tags, meist drei oder vier Stück.

Besonders wichtig sind zentrale Einstellungen im Head-Bereich. Dazu zählt der Link zur verwendeten CSS-Datei, mit der die Formatierungen (Spalten, Links, Rahmen, Abstände) festgelegt werden sollen. Außerdem werden im Head-Bereich auch gerne zentrale Links zu Javascript-Dateien festgelegt, wenn viel mit Javascript gearbeitet wird, beispielsweise für statistische Zwecke.

Buchtipp: Einstieg in HTML und CSS (Thalia)*
* = Affiliate-Link; bei Kauf unterstützen Sie diese Plattform

Lesen Sie auch

Die Einführung in die Beschreibungssprache HTML beginnt damit, dass man verstehen muss, wie die Tags eingesetzt werden, die den Befehlsatz darstellen. Es braucht ein Grundgerüst für jede Seite mit der Deklaration, unter welchen Spielregeln man arbeiten möchte und mit welchem Zeichensatz man die Seite aufbaut.

Jede Seite sollte über einen Kopfteil verfügen und über den eigentlichen Inhalt mit dem body-Tag, in dem sich Text, Bilder und Videos befinden. Im Kopfteil gibt es die Meta-Tags mit Grundeinstellungen für die Suchmaschinen, den Titel der Seite sowie auch die Links zu den CSS-Dateien.

Außerdem sollte man das Grundverständnis haben, warum die alte Methode mit direkten HTML-Formatierungen nicht so gut ist wie die moderne mit der CSS-Datei als externe Formatierungsquelle.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

Kopfteil auf der WebseiteArtikel-Thema: Kopfteil der HTML-Webseite mit dem head-Tag
Beschreibung: Kopfteil oder 🌍 head-Tag auf einer HTML-Webseite mit seiner ✅ Bedeutung auch für SEO und für die Verarbeitung im Browser bei Aufruf der Seite.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel