x

HTML Grundkurs: Texte und Überschriften hinzufügen

In diesem Beitrag zeigen wir dir, wie du Texte und Überschriften mit HTML hinzufügst.

Play Video

Überschriften hinzufügen

Im HTML gibt es 6 verschiedene Überschriften.

Für die erste Überschrift verwendet man das h1-Tag. Das „h“ steht dabei für „headline“, was in der deutschen Sprache Überschrift bedeutet. Die „1“ gibt an, dass es die erste Überschrift ist.

Die erste Überschrift ist die Hauptüberschrift deiner Webseiten. Pro Seite bzw. HTML Datei solltest du nur eine Hauptüberschrift verwenden. Falls du für Suchmaschinen, wie zum Beispiel Google, deine Webseite auf eine bestimmtes Keyword optimieren möchtest, sollte dieses Keyword in deiner Hauptüberschrift vorkommen.

Für die zweite Überschrift verwendet man das h2-Tag, für die Dritte das h3-Tag und so weiter. Das h2-, h3-, h4-, h5- und h6-Tag kannst du beliebig oft auf deiner Webseite verwenden.

Jede Überschrift besitzt ein öffnendes und ein schließendes Tag.

Schreibe zur Übung genau wie ich die 6 verschiedenen Überschriften zwischen die div-Tags im Body deiner index.html Datei.

<h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <h3>Überschrift 3</h3> <h4>Überschrift 4</h4> <h5>Überschrift 5</h5> <h6>Überschrift 6</h6>

Texte bzw. Textabschnitte hinzufügen

Für Texte bzw. für einen Textabsatz verwendet man das p-Tag. Das „p“ steht dabei für „paragraph“, was auf Deutsch Paragraph oder Ansatz bedeutet.

Das p-Tag besitz ein öffnendes und ein schließendes Tag. Du kannst das p-Tag beliebig oft auf deiner Webseite verwenden.

Schreibe zur Übung genau wie ich zwei Textabschnitte in deine index.html Datei.

<p>Das ist der erste Textabschnitt</p> <p>Das ist der zweite Textabschnitt</p>

Die index.html Datei testen

Jetzt testen wir noch schnell unser HTML-Dokument. Gehe dazu in den HTML Grundkurs Ordner und öffne die index.html Datei mit deinem Browser.

Nun können wir 2 wichtige Dinge feststellen.
1. Die Überschriften werden verschieden groß dargestellt.
2. Nach jeder Überschrift und nach jedem Textabschnitt erfolgt ein Zeilenumbruch.

Wichtig: Wähle die verschiedenen Überschriften anhand der Wichtigkeit und nicht anhand der dargestellten Größe. Die Größe kannst du später mit CSS noch verändern.

 

Im nächsten Video des HTML Grundkurs zeigen wir dir, wie du Texte und Überschriften durch HTML Tags formatieren kannst.

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> <header></header> <div> <h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <h3>Überschrift 3</h3> <h4>Überschrift 4</h4> <h5>Überschrift 5</h5> <h6>Überschrift 6</h6> <p>Das ist der erste Textabschnitt</p> <p>Das ist der zweite Textabschnitt</p> </div> <footer></footer> </body> </html>

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: