HTML Befehle Teil 1: Text für deine Webseite

Was wäre eine Webseite ohne Text? Ein leeres Blatt Papier. Im fünften Kapitel des HTML Kurses zeige ich dir HTML Befehle, die für den Text auf deiner Webseite zuständig sind. Zu diesen HTML-Befehlen (oder auch HTML Tags genannt) gehören Überschriften, Fließtexte und die Formatierung einzelner Wörter oder Sätze.

Eine Überschrift in HTML

Erinnerst du dich an das HTML Grundgerüst aus Kapitel 4? Auf deiner ersten HTML Seite haben wir nämlich bereits eine Überschrift mit dem HTML Befehl <h1></h1> erstellt. Ich habe auch erwähnt, dass es mehrere Befehle für eine Überschrift in HTML gibt. Aber keine Angst, an dem Befehl ändert sich nicht viel:

Aus Sicht der Suchmaschinenoptimierung solltest du pro Unterseite maximal eine h1-Überschrift definieren. Es gibt aber auch viele Negativbeispiele von Webseiten, die mit den Überschriften jonglieren, wie es dem Webseitenbetreiber gerade passt.

Damit dir dieser Fehler nicht passiert gebe ich dir einen Tipp: Der Text deiner Webseite sollte strukturell aufgebaut sein. Du fängst also mit einer h1-Überschrift an gefolgt von 1-2 Absätzen, anschließend folgt die h2-Überschrift und dann wieder Fließtext.

Fließtexte in HTML schreiben

Mit Fließtext füllst du deine Webseite mit Inhalten. Dafür bedienen wir uns dem <p>Ein Absatz</p>-Tag. Das p in dem Befehl steht für Paragraph (dt. Absatz).

Text mit HTML formatieren

Mit HTML hast du auch die Möglichkeit, Textabschnitte mit dafür vorgesehenen HTML-Befehlen zu formatieren. In diesem Abschnitt zeige ich dir, wie du Text fett hervorhebst und Text in kursiv darstellst.

Text in Fett hervorheben

Um einen aufgewählten Text deiner Webseite fett hervorzuheben gibt es die folgenden zwei HTML Befehle:

Zwei HTML Befehle für die ein und dieselbe Formatierung? Fast richtig. In HTML wird unterschieden zwischen den physisch-visuellen und semantisch-logischen HTML-Befehlen. Physisch-visuell bedeutet, dass der HTML Befehl den Text nur fett hervorheben würde. Der semantisch-logische HTML Befehl hebt den Text fett hervor und ist von inhaltlicher Logik.

<b></b>Dieser HTML Befehl ist physisch-visueller Natur und hebt den Text fett hervor.
<strong></strong>Dieser HTML Befehl ist semantisch-logisch, hebt den Text fett hervor und ist von inhaltlicher Logik.

Text in Kursiv darstellen

Wenn du den Text deiner Webseite hingegen in Kursiv darstellen möchtest, dann gibt es diese zwei HTML Befehle:

Ähnlich wie bei dem Fett hervorheben von Text gibt es auch hier wieder die Unterscheidung zwischen physisch-visuell und semantisch-logisch. Es gibt nur einen Unterschied: Der Text wird nicht fett dargestellt.

<i></i>Dieser HTML Befehl ist von physisch-visueller Natur und stellt den Text in kursiv dar.
<em></em>Dieser HTML Befehl ist semantisch-logisch, stellt den Text kursiv dar und ist von inhaltlicher Logik.

Text unterstreichen

Mit der letzten Art der Textformatierungen kannst du Texte unterstreichen. Hier gilt es nichts spezielles zu beachten. Anders als beim Fett hervorheben oder Kursiv darstellen wird hier nicht zwischen physisch-visuell oder semantisch-logisch unterschieden. Es gibt somit nur einen HTML Befehl, mit dem sich Text unterstreichen lässt:

<u></u>Text, der zwischen dem HTML Befehl steht wird auf der Webseite unterstrichen dargestellt