HTML Tipps: Elemente zur Textformatierung

Kategorie: HTML

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

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

Das Internet?
Gibts diesen Blödsinn immer noch?

Homer Simpson, Springfield