Impressum
< Text strukturieren Inhalt Listen >

Text hervorheben (fett, kursiv und unterstrichen)

Um Teile eines Text hervorzuheben, verwendet man als Formatierung kursiv, fett oder unterstrichen.
Das umschließende Tag für fett gedruckten Text ist <b>...</b> (b für engl. bold).
Das umschließende Tag für kursiven Text ist <i>...</i> (i für engl. italic).
Das umschließende Tag für unterstrichenen Text ist <u>...</u> (u für engl. underline).
Es wird oft empfohlen auf Unterstreichung zu verzichten, da diese auch verwendet wird um Links hervorzuheben.
Bei unterstrichenem Text nimmt der Betrachter oft an, dass es sich um einen Link handelt und wenn er auf unterstrichenen Text klickt passiert aber nichts.

Beispiel:

<p>
Dieser <b>Text</b> beinhaltet <i>wichtige</i> Wörter.<br>
Eine <b><i>sehr</i></b> wichtige Sache ist, dass man die
<u>öffnenden</u> Tags in der <i><b>richtigen</b></i>
Reihenfolge schließt.
</p>

Dieser Text beinhaltet wichtige Wörter.
Eine sehr wichtige Sache ist, dass man die öffnenden Tags in der richtigen Reihenfolge schließt.

Block-Elemente und Inline-Elemente

Eine Überschrift (<h.>), ein Absatz (<p>) und ein <hr> sind sogenannte Block-Elemente. Sie bilden im Browser-Layout einen festen Block.
Block-Elemente können keine Bloock-Elemente enthalten. Ein Paragraph darf also keinen Paragraph enthalten. Auch vor einem <hr> muss ein Absatz zuerst mit </p> geschlossen werden.
In Überschriften darf ebenfalls kein anderer Block aufgemacht werden.
<i>, <b>, <u>, ... sind keine Block-Elemente und dürfen in Blockelementen auftreten.
Wenn Blöcke zusammengefasst werden sollen muss das <div>-Tag statt einem <p>-Tag verwendet werden, da es als Flow-Block-Element dies ermöglicht. Ein P, H1-H6, etc. Tag wird automatisch geschlossen, wenn ein nächster Block startet.

Beispiel: Hier werden Blöcke nicht ordentlich geschlossen

Der Browser macht durch seine Fehlerkorrektur aus:
<p>hallo
<p>
Dieser Text ist wichtig.
<hr> Aber das HTML ist fehlerhaft!
</p>
</p>
folgendes:
<p>hallo
</p>
<p> Dieser Text ist wichtig. </p>
<hr>
Aber das HTML ist fehlerhaft!
<p></p>
<p></p>

Aufgaben

Nehmen Sie einen Texteditor ihrer Wahl und kopieren Sie das HTML-Gründgerüst hinein.
Speichern Sie die Seite als .html-Datei.
  1. Holen Sie sich da s HTML-Grundgerüst.
    Erzeugen Sie eine Überschrift mit dem Text „Was ich weiß“
    Der Absatz unter der Überschrift soll so aussehen:
    Ich weiß, wie man fetten, kursiven und unterschrichen Text erzeugt.
    Ich weiß auch wie man alles zusammen macht: übertriebene Hervorhebung.

    Speichern Sie Ihre Datei und überprüfen Sie das Ergebnis im Browser.

  2. Holen Sie sich das HTML-Grundgerüst.
    Kopieren Sie unten stehenden Text in den <body>-Bereich und <Text>
    HTML-Dateien
    In HTML kann man Text mit Tags hervorheben.
    Fettgedruckter Text
    Das Tag für fett gedruckten Text ist b. Dieses Tag braucht ein schließendes Tag.
    Kursiver Text
    Das Tag für kursiven Text ist i.
    Hinweis
    Auf Unterstreichungen sollte man verzichten.
    Man kann fett und kursiv auch verschachteln zu fettem und kursivem Text.
    </Text>

    HTML-Dateien

    In HTML kann man Text mit Tags hervorheben.

    Fettgedruckter Text

    Das Tag für fett gedruckten Text ist b. Dieses Tag braucht ein schließendes Tag.

    Kursiver Text

    Das Tag für kursiven Text ist i.

    Hinweis

    Auf Unterstreichungen sollte man verzichten.

    Man kann fett und kursiv auch verschachteln zu fettem und kursivem Text.