x

HTML Grundkurs: Text formatieren

In diesem Beitrag zeigen wir dir, wie du schnell und einfach einen Text bzw. einzelne Wörter aus deinem Text formatieren kannst.

Play Video

Text im HTML formatieren

Im HTML gibt es viele verschiedenen Tags, mit denen du Buchstaben, Wörter oder ganze Textabschnitte formatieren kannst.

Diese Tags ermöglichen es dir, die Schrift fett oder kursiv darzustellen. Auch kannst du damit Buchstaben durchstreichen oder unterstreichen.

Im HTML verwendet man diese Tags, um eine Struktur in einen Text zu bekommen. Darüber hinaus kannst du dadurch, das Skimming und Scanning für deine Webseitenbesucher ermöglichen bzw. vereinfachen.

Unter Skimming und Scanning versteht man, das Überfliegen und Durchsuchen eines Textes, um schnell eine Eindruck vom Inhalt zu bekommen und um schnell bestimmte Informationen zu finden.

Da wir im Internet mit Informationen überschüttet werden, überfliegen die meisten Besucher die Texte einer Webseite nur flüchtig. Durch das „fett“ schreiben bestimmter Wörter, können wir so den Blick der Besucher von A nach B führen.

Buchstaben „fett“ darstellen

Um im HTML Buchstaben „fett“ darzustellen gibt es zwei verschiedene Tags. Einmal das b-Tag und einmal das strong-Tag.

Beide Tags werden gleich dargestellt. Jedoch ist die Bedeutung jeweils eine andere.

Das b-Tag benutzt man, wenn man zum Beispiel ein Wort einfach „fett“ schreiben möchte. Das strong-Tag benutzt man hingegen, um zum Beispiel ein Wort stärker darzustellen bzw. um es du betonen.

Für die meisten eurer Webseitenbesucher macht es genaugenommen keinen Unterscheide, da beide Tags gleich dargestellt werden. Für einen Webcrawler, ein Roboter der das Internet nach Inhalten durchsucht, kann es jedoch einen Unterschied machen, welches Tag ihr verwendet.

Schreibe jetzt zur Übung denselben Code wie ich in deine index.html Datei.

b-Tag: <b>Test</b> strong-Tag: <strong>Test</strong>

Buchstaben „kursiv“ darstellen

Um im HTML Buchstaben „kursiv“ darzustellen, gibt es auch wieder mehrere Möglichkeiten. Zwei davon sind das i-Tag und das em-Tag.

Beide Tags werden gleich dargestellt. Jedoch ist die Bedeutung jeweils wieder eine andere.

In der Sprachsynthese werden Wörter mit dem i-Tag in einer anderen Stimme ausgesprochen und Wörter mit dem em-Tag werden leicht betont ausbesprochen.

Letztendlich macht es für die meisten Besucher deiner Webseite wieder keinen Unterschied.

Schreibe jetzt zur Übung wieder denselben Code wie ich in deine index.html Datei.

i-Tag: <i>Test</i> em-Tag: <em>Test</em>

Buchstaben „durchstreichen“ oder „unterstreichen“

Im HTML gibt es für das Durchstreichen und Unterstreichen von Buchstaben wieder mehrere Möglichkeiten. Mit dem u-Tag kannst du Buchstaben unterstreichen und mit dem s-Tag durchstreichen.

Schreibe jetzt zur Übung denselben Code wie ich in deine index.html Datei.

u-Tag: <u>Test</u> s-Tag: <s>Test</s>

Einen Zeilenumbruch erzwingen

Das letzte Tag, das wir dir heute zeigen möchten, ist das br-Tag.

Das br-Tag erzeugt einen Zeilenumbruch. Da das br-Tag ein Standalone-Tags ist, muss es nicht geschlossen werden.

Schreibe jetzt an die selben Stellen wie ich einen br-Tag um einen Zeilenumbruch zu erzwingen.

b-Tag: <b>Test</b> <br> strong-Tag: <strong>Test</strong> <br><br> i-Tag: <i>Test</i> <br> em-Tag: <em>Test</em> <br><br> u-Tag: <u>Test</u> <br> s-Tag: <s>Test</s> <br><br>

Wichtig: Wenn du eine Überschrift oder einen Text rein gestalterisch verändern möchtest, solltest du dafür CSS verwenden. Die soeben genannten Tags solltest du für inhaltliche Aussagen verwenden und nur vereinzelt für gestalterische Zwecke.

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> b-Tag: <b>Test</b> <br> strong-Tag: <strong>Test</strong> <br><br> i-Tag: <i>Test</i> <br> em-Tag: <em>Test</em> <br><br> u-Tag: <u>Test</u> <br> s-Tag: <s>Test</s> <br><br> </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: