HTML Tipps: Elemente zur Textformatierung

Kategorie: HTML/CSS

Die HTML-Elemente mit denen Textabschnitte kursiv oder fett ausgezeichnet werden können sind allgemein bekannt. Es gibt jedoch auch einige weniger bekannte Elemente mit denen
Textelemente formatiert werden können.

Inhalt

• HTML mark-Tag
• HTML s-Tag
• HTML abbr-Element
• HTML q-Element
• HTML blockquote
• Häufige Fragen

HTML mark-Tag

Mit dem mark-Element können Begriffe wie mit einem Textmarker markiert werden. Ohne weitere CSS-Einstellungen werden die entsprechenden Textstellen in den meisten Browsern gelb markiert.

markierter <mark>Begriff</mark>

markierter Begriff
Mit der CSS-Eigenschaft background kann die Farbe der Markierung verändert werden.

mark{
background:#87cefa;
}

markierter Begriff

HTML s-Tag

Durch das s-Element können Textabschnitte durchgestrichen dargestellt werden. Ein mögliches Beispiel wäre die Verdeutlichung einer Preissenkung in einem Onlineshop.

<s>20 Euro</s> 
15 Euro

20 Euro 15 Euro

Die Farbe der durchgestrichenen Linie orientiert sich an der Textfarbe. Möchte man die Linie in einer anderen Farbe als den Text darstellen, muss man ein zusätzliches nicht semantisches span-Element einfügen. Das äußere s-Element bekommt nun die Farbe rot und das innere span-Element die Farbe schwarz. Der schwarze Text wird nun rot durchgestrichen.

<s><span>20 Euro</span></s> 
15 Euro

s{
 color:red;
}

s span{
 color:black;
}

20 Euro 15 Euro

HTML abbr-Element

Das abbr-Element umfasst die Abkürzung eines längeren Begriffs. Die Abkürzung wird im Browser mit einer gestricheltelten Linie dargestellt beim Hovern mit der Maus über dieses Element
wird dann das komplette Wort angezeigt.

<abbr title="World Wide Web">
 WWW
</abbr>

WWW

Damit dem User bewusst ist, dass sich hinter der Abkürzung eine weitere Information verbirgt, kann der Cursor beim Hovern mit der Maus über die Abkürzung, wie bei Links, in einen Pointer (Handsymbol) verändert werden.

abbr{
cursor:pointer;
}

WWW

HTML q-Element

Mit dem q-Element können kurze Zitate direkt in den Quelltext eingebunden werden. Im Gegensatz zum blockquote-Element handelt es sich beim q-Element um ein inline-Element. Daher bedeutet das q-Element auch keinen neuen Absatz.

<q>
Das Internet? 
Gibts diesen Blödsinn immer noch?
</q> 
Homer Simpson, Springfield

Das Internet? Gibts diesen Blödsinn immer noch? Homer Simpson, Springfield

HTML blockquote

Das blockquote-Element dient ebenso wie das q-Element zur Kennzeichnung von Zitaten. Das blockquote-Element ist ein block-Element und kann daher beliebig viele inline-Elemente enthalten und markiert in jedem Fall einen neuen Absatz.

<blockquote>
Das Internet? 
Gibts diesen Blödsinn immer noch?
</blockquote> 
Homer Simpson, Springfield

Häufige Fragen

Wie markiere ich Text in HTML?

In HTML gibt es das mark-Element. Hierdurch heben Sie bestimmte Begriffe hervor, die im Browsern dann meist gelb markiert erscheinen. Platzieren Sie das entsprechende Wort zwischen einem öffnendem und schließendem mark-Tag.

Wie stelle ich durchgestrichenen Text mit HTML dar?

Fügen Sie den durchzustreichenden Text zwischen zwei s-Tags (öffnend und schließend) ein.

Verwandte Beiträge