Der Titel im HTML5

Titel eines HTML5-Dokuments

Habe schon einen Artikel geschrieben fürs HTML: Der Titel in HTML

Jedes HTML-Dokument sollte einen Titel erhalten. Das ist aus folgenden Gründen besonders wichtig:

Der Titel wird bei der Anzeige im Web-Browser in der Titelzeile des Anzeigefensters oder in Browser-Tabs angezeigt.
Der Titel wird vom Web-Browser beim Setzen von Lesezeichen (Bookmarks, Favoriten) verwendet.
Der Titel wird im Web-Browser in der Liste der bereits besuchten Seiten angezeigt.
Der Titel hat bei Suchmaschinen im Web höchste Relevanz.
Wenn die Webseite zu den Suchtreffern einer Suche gehört, bieten die meisten Suchmaschinen den Titel der Datei als anklickbaren Verweis an.


<head>
	<title>HTML5 Lernen - Grundlagen und Tutorials</title>
 	<!-- ... andere Angaben im Dateikopf ... -->
</head>

Der Titel wird durch <title> ... </title> markiert. Auf jeder Webseite, also in jedem HTML-Dokument, muss der Titel innerhalb des Dokument-Kopfbereichs, also innerhalb von <head> ... </head>, notiert werden. Dort darf er genau einmal vorkommen. Zwischen <title> und </title> sind keine weiteren HTML-Elemente erlaubt.

Im Hinblick auf Suchmaschinenoptimierung (SEO) ist es empfehlenswert, für jede Webseite einen eigenen, aussagekräftigen Titel zu vergeben.

Titel sollten jedoch keine Sätze enthalten. Zu lange Titel stören bei der Anzeige und können sich bei der Indizierung durch Suchmaschinen sogar negativ auswirken. Wichtig ist, dass im Titel die entscheidenden Schlüsselwörter des Seiteninhalts vorkommen.

Den Seitentitel erstellen im HTML5

Jede HTML-Seite muss ein title-Element für den Seitennamen aufweisen. Ein Titel soll kurz, aussagekräftig und für jede Seite einmalig sein. Bei den meisten Browsern erscheint der Seitenname in der Titelleiste des Fensters. Außerdem taucht er im Reiter der Seite auf, wenn der Browser das Tabbed Browsing (Registernavigation) unterstützt – also praktisch bei allen großen Browsern, die in den vergangenen Jahren erschienen. Der Seitenname erscheint auch im Browserverlauf sowie in den Favoriten- bzw. Bookmark-Listen C.

Vielleicht noch wichtiger ist, dass der Titel von Suchmaschinen wie Google, Bing und Yahoo! herangezogen wird. Das dient einerseits als Hinweis, mit welchen Informationen auf Ihrer Seite zu rechnen ist, und andererseits erscheint der Titel auch im Link, der in den Suchergebnissen dargestellt wird.

Kurz gesagt verbessern Sie Ihre Suchmaschinen-Resultate und die Nutzererfahrung, wenn Sie das title-Element für jede Seite unverwechselbar und einmalig gestalten.

Das title-Element sollte im Header-Bereich platziert werden. Schreiben Sie es nach dem meta-Element, das die Zeichenkodierung angibt.


<!DOCTYPE html> 
<html lang="de">
<head>
	<meta charset="UTF-8" />
	<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
	...
</body>
</html>

Bei den meisten Browsern wird der Titel der Webseite sowohl in der Titelleiste des Fensters als auch im Tab (Reiter) gezeigt.

Einen Titel erstellen

Platzieren Sie den Cursor zwischen <title> und </title> im head des Dokuments.
Geben Sie den Namen Ihrer Webseite ein. Das title-Element muss vorhanden sein.

Ein Titel darf keine Formatierungen, HTML, Bilder oder Links auf andere Seiten enthalten.

Manche Code-Editoren füllen den title mit Standardtext, wenn Sie eine neue Seite beginnen, außer Sie haben – Ihren Editor so eingestellt, dass spezieller Startcode verwendet wird. Also achten Sie jeweils darauf und sorgen Sie ggf. dafür, Standardtext durch einen eigenen title zu ersetzen.

Wenn Ihr title Sonderzeichen wie Akzente oder Symbole enthält, müssen Sie diese entweder in Ihre Kodierung aufnehmen (bei UTF-8 normalerweise kein Problem) oder sie als Referenzen schreiben (eine Liste der verfügbaren Zeichen-Entity-Referenzen finden Sie unter HTML-Entities und Notation) und HTML- eigene Zeichen). Vergessen Sie außerdem nicht, Ihren Code-Editor so einzustellen, dass die Seiten mit der entsprechenden Kodierung gespeichert werden, also z.B. UTF-8, damit die Sonderzeichen korrekt gespeichert werden (siehe Webseiten mit UTF-8-Kodierung).

Seitentitel unter der Lupe

Viele Entwickler – darunter sogar wohlmeinende mit großer Erfahrung – schenken dem title-Element wenig Aufmerksamkeit. Sie geben einfach den Namen der Site ein und kopieren diesen dann auf alle anderen HTML-Seiten. Oder schlimmer noch – sie lassen einfach den title-Text stehen, den der Editor vielleicht standardmäßig einfügt. Wenn Sie es sich vorgenommen haben, Traffic auf Ihre Site zu leiten, leisten Sie sich und Ihren potenziellen Lesern einen riesengroßen Bärendienst, falls Sie genauso handeln.

Suchmaschinen arbeiten mit verschiedenen Algorithmen, um den Rang einer Seite zu bestimmen und dessen Inhalt zu indexieren.

Bei allen spielt der title dabei allerdings eine Schlüsselrolle. Suchmaschinen schauen sich den title an, um festzustellen, worum es bei der Seite geht, und indexieren den Inhalt einer Seite auf der Suche nach dazugehörigem Text. Ein effektiver title konzentriert sich auf eine Handvoll Schlüsselwörter, die für den Seiteninhalt zentral sind.

Die empfehlenswerte Vorgehensweise ist, einen title-Text zu wählen, der den Dokumentinhalt kurz zusammenfasst – davon profitieren sowohl die Nutzer von Screenreadern als auch Ihr Ranking bei den Suchmaschinen. Zweitens geben Sie optional den Namen Ihrer Site im title an. Den Namen einer Site sieht man üblicherweise am Anfang des title, aber besser noch ist es, den typischen, für die Seite spezifischen title-Text stattdessen an den Anfang zu setzen.

Ich rate Ihnen, die zentrale Botschaft des title in den ersten 60 Zeichen (inklusive Leerzeichen) unterzubringen. Denn als Faustregel kann man sagen, dass Suchmaschinen die Darstellung ihrer Resultate etwa nach dieser Zeichenzahl abschneiden. Browser stellen in der Titelleiste oben im Fenster verschieden viele Zeichen dar (aber nie mehr als 60), bevor sie den Text abschneiden. Bei Browser-Tabs wird der Titel sogar noch eher beschnitten, weil es weniger Platz gibt.

Dokument-Grundgerüst

Ein HTML-Dokument besteht grundsätzlich aus folgenden Teilen:

Dokumenttyp-Deklaration für die Angabe zur verwendeten HTML-Version
Kopfbereich, z. B. für Angaben zu Titel, Meta-Daten usw.
Dokumentkörper, also der anzuzeigende Inhalt, wie Text mit Überschriften, Verweise, Grafikreferenzen usw.


<!doctype html> 
<html>
<head>
	<meta charset="utf-8"> 
	<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head> 
<body>
	<! -- sichtbarer Inhalt --> 
</body>
</html>

Die erste Zeile ist eine Dokumenttyp-Deklaration (im obigen Schema diejenige für HTML5).

Der gesamte übrige Inhalt eines HTML-Dokuments wird in die Tags <html> bzw. </html> eingeschlossen. Das html-Element wird auch als Wurzelelement eines HTML-Dokuments bezeichnet. Hinter dem einleitenden HTML-Tag folgt das einleitende Tag für den Kopf <head>. Zwischen diesem Tag und seinem Gegenstück </head> werden die Kopfdaten des Dokuments notiert. Obligatorisch ist die Angabe eines Titels, markiert durch <title> bzw. </title>. Die andere Angabe im Kopfbereich des obigen Beispiels ist eine Angabe zur verwendeten Zeichenkodierung. Auch diese Angabe sollte in keinem HTML-Dokument fehlen.

Unterhalb der Kopfdaten folgt der Textkörper, begrenzt durch <body> bzw. </body>. Dazwischen wird der eigentliche Inhalt des Dokuments notiert, also das, was im Anzeigefenster des Browsers erscheinen soll.

XHTML

Wenn Sie HTML5 als XML-konformes Dokument, also als XHTML5-Dokument ausliefern wollen, benötigen Sie gar keinen Dokumenttyp. Der HTML5-typische Dokumenttyp <!doctype html> kann bei XHTML5 also einfach entfallen. Dagegen ist für eine XML-Verarbeitung in jedem Fall die sogenannte XML-Deklaration erforderlich.


<?xml version="1.0" encoding="utf-8"?> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
	<title>XHTML5-Dokument</title>
</head> 
<body>
	<!-- Inhalt --> 
</body>
</html>

Zunächst muss bei XHTML-Dokumenten, die mit einem XML-Parser verarbeitet werden sollen, der Bezug zu XML hergestellt werden. Dazu dient die erste Zeile mit den Fragezeichen hinter der öffnenden spitzen Klammer und vor der schließenden spitzen Klammer. Notieren Sie diese Zeile so wie im Beispiel angegeben. Es handelt sich um eine sogenannte XML-Deklaration.

Innerhalb der XML-Deklaration legen Sie die verwendete XML-Version und die im Dokument verwendete Zeichenkodierung fest. Bei der XML-Version sind derzeit die Angaben 1.0 oder 1.1 möglich. Bei der Zeichenkodierung ist die Angabe utf-8 empfehlenswert.

Im einleitenden <html>-Tag muss der verwendete XML-Namensraum mit einem Attribut namens xmlns angegeben werden. Benutzen Sie die Angabe wie im obigen Beispiel.

Der weitere Quelltext ist im Prinzip normales HTML. Allerdings müssen Sie, wenn Sie XHTML als XML ausliefern wollen, strikt die XML-Regeln einhalten. Beachten Sie dazu die Unterschiede zwischen XHTML und HTML. Befassen Sie sich mit diesen Unterschieden aber erst, wenn Sie schon etwas vertrauter mit HTML sind.

Weiter