HTML-Überschriften
Eine Überschrift ist ein Titel am Anfang einer Seite oder eines Buchabschnitts. Es ist sehr wichtig, verschiedene Arten von Überschriften zu verwenden, um den Inhalt der Webseite zu strukturieren. Überschriften helfen Suchmaschinen, die Struktur der Webseite zu verstehen und zu indexieren.
Überschriften-Tags
In HTML gibt es 6 Ebenen von Überschriften: <h1>, <h2>, <h3>, <h4>, <h5> und <h6>.
Die Tags <h1> bis <h6> werden verwendet, um Überschriften nach ihrer Wichtigkeit zu kennzeichnen. Das Tag <h1> steht für die wichtigste Überschrift der Webseite, und <h6> steht für die unwichtigste und kleinste.
Beispiel für HTML-Überschriften-Tags <h1> - <h6>:
Wie verwendet man die HTML-Tags <h1>–<h6>?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Bedeutung von Überschriften
- HTML-Überschriften heben wichtige Themen und die Dokumentstruktur hervor, was die Benutzerbindung verbessert.
- Verwenden Sie auf jeder Webseite nur ein
<h1>-Tag. Das Tag muss beschreiben, worum es auf Ihrer Seite geht, und sollte auch ein Schlüsselwort enthalten, um das Ranking bei Google zu verbessern. - Suchmaschinen verwenden Überschriften, um die Struktur und den Inhalt der Webseite zu indexieren.
Überschriftengröße
Sie können die Standardgröße der Überschriften ändern. Legen Sie die Größe einer beliebigen Überschrift mit der CSS-Eigenschaft font-size fest:
Beispiel zum Ändern der Überschriftengröße mit der font-size-Eigenschaft:
So stylen Sie ein HTML-<h1>-Tag mit der CSS font-size-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>Wichtige Hinweise
- Verwenden Sie keine Überschriften-Tags, um die Textgröße zu erhöhen oder den Text fett darzustellen. Verwenden Sie stattdessen CSS-Eigenschaften wie font-weight und font-size. Denken Sie daran, dass Suchmaschinen Überschriften zur Strukturierung des Inhalts verwenden.
- Überspringen Sie keine Überschriftenebenen. Verwenden Sie
<h1>als Hauptüberschrift der Webseite, gefolgt von<h2>-Überschriften, dann den weniger wichtigen<h3>-Überschriften usw. - Vermeiden Sie die Verwendung von
<h1>mehr als einmal auf einer Seite.
HTML-Horizontalregeln
Das <hr>-Tag definiert einen thematischen Wechsel zwischen Elementen auf Absatz-Ebene in einer HTML-Seite. Das <hr>-Element wird verwendet, um Inhalte auf einer HTML-Seite zu trennen:
Beispiel für Überschriften, die mit dem <hr>-Element getrennt sind:
Beispiel für das HTML-<hr>-Element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<p>Lorem ipsum is simply dummy text...</p>
<hr />
<h2>This is heading 2</h2>
<p>Lorem ipsum is simply dummy text...</p>
<hr />
<h3>This is heading 2</h3>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>HTML-Head-Element
Das HTML-Element <head> enthält Metadaten (Dokumenttitel, Zeichensatz, Stylesheets, Links, Skripte), also spezifische Informationen zur Webseite, die nicht direkt für den Benutzer angezeigt werden.
Metadaten liefern Browsern und Suchmaschinen technische Informationen über die Webseite.
Beispiel zur Verwendung des <head>-Elements:
Beispiel für das HTML-<head>-Element
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>
<body>
<p>HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>Was ist ein Header?
Verwechseln Sie das HTML-Header-Tag nicht mit einem HTML-Überschriften-Tag, da Header ein Textabschnitt sind, der sich am oberen Rand der Seite wiederholt. Eine Überschrift ist ein Titel oder Untertitel, der auf der Webseite angezeigt wird.
Übungen
Welche der folgenden Aussagen über HTML-Überschriften sind wahr?