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

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

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

CSS transform für Anfänger erklärt

Mit CSS transform verändern Sie die Objekte auf Ihrer Website. Verschieben, vergrößern, verkleinern, drehen oder scheren Sie HTML-Elemente. Inhalt CSS transform:translate – Objekte verschieben CSS transform:rotate – Objekte drehen CSS

CSS3 Animationen: transition erklärt

Animationen bringen Bewegung auf die Seite und sorgen für das gewisse Etwas, um sich sich von der Konkurrenz abzuheben. Wählen Sie dezente Effekte und reduzieren Sie die Animationen auf wenige

HTML: Block- und Inline-Elemente

Es gibt in HTML zwei grundsätzliche Arten von Elementen: Block und Inline-Elemente. Beide Arten von Elementen haben unterschiedliche Eigenschaften. Die Kenntnis dieser Eigenschaften ist die Grundlage für einen korrekten HTML-Code

HTML Tipps für besseren Quellcode

Der HTML-Quellcode einer Internetseite sollte übersichtlich, möglichst schmal und selbsterklärend sein. Ein übersichtlicher Quellcode kann leichter und vor allem schneller verändert werden. Je schmaler der Quellcode ist, umso geringer ist

Kontaktdaten auf der Homepage mit HTML

Auf jeder gewerblichen Webseite befinden sich die Adressdaten der Firma, zu der die Webseite gehört. Die Daten können auf verschiedene Weise durch HTML-Code dargestellt werden. Im folgenden Artikel wird kurz