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.
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.
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.
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.
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.
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.
