Wie du mit Hilfe von HTML oder CSS einen Text farblich hinterlegst
Durch das farbliche Hervorheben bestimmter Wörter auf einer Homepage kann, man den Fokus des Besuchers auf bestimmte oder wichtige Informationen lenken.
Lass es uns testen, dieser Text wurde gelb hinterlegt, ist er dir nicht als erstes ins Auge gesprungen ?
Um texte farblich zu markieren gibt es verschiedenste Möglichkeiten. Im folgenden drei einfache Möglichkeiten, wie du schnell die „Textmarker-Funktion“ auf deiner Homepage nutzen kannst.
Text-Markierung mittels HTML5 und dem Tag <mark>
In aktuellen HTML-Version gibt es den praktischen Tag <mark> , mit dem es super einfach ist den entsprechenden Text zu markieren.
Dieser Tag wird wie jeder andere HTML-Tag genutzt, in dem er die zu markierende Text-Passage umgibt. Analog zu den bekannten Befehlen wie <strong> für die Fett-Schrift.
Alle modernen Browser unterstützen diesen Befehl, wodurch es die einfachste und schnellste Möglichkeit ist.
Folgendes Beispiel hinterlegt das Wort
Beispiel HTML-Code:
Dies ist ein Beispiel für einen <mark>hervorgehobenen Text</mark> mit Hilfe des <mark> TagsBeispiel-Ergebnis:
Dies ist ein Beispiel für einen hervorgehobenen Text mit Hilfe des <mark> Tags
Alle modernen Browser unterstützen diesen Befehl, wodurch es die einfachste und schnellste Möglichkeit ist.
Text-Markierung mittels HTML + CSS-Attribut
Mit dem folgenden Möglichkeit ist sichergestellt, dass auch auch noch die älteren Browser die gewünschte Markierung richtig darstellen. Hierzu wird der Tag <span> genutzt, ergänzt um das Attribut background-color.
Beispiel HTML-Code:
<span style="background-color: yellow">Dieser Text ist gelb gemarkert</span>Beispiel-Ergebnis:
Dieser Text ist gelb gemarkert
Natürlich kannst du statt gelb auch alle möglichen weiteren Farben nutzen, in dem du den jeweiligen Hex-Code für die entsprechende Farbe hinterlegst.
Z.B. #00ff00 für ein „Neon-Grün“.
Text-Markierung mit CSS + HTML
Wenn du häufiger Texte farblich hinterlegen möchtest, wäre eine sauberer und schlankere Möglichkeit die o.g. background-color in eine eigene CSS-Klasse zu packen.
Dazu müsstest du folgende Definition in deiner CSS-Datei ergänzen.
Beispiel CSS-Code:
.marker-gelb { background-color:#FFFF00; }Nun kannst du dem entsprechendem SPAN-Tag die oben erstellte Klasse zugewiesen werden:
Beispiel HTML-Code:
<span class="marker-gelb">Dieser Text ist mit Hilfe von CSS gelb hinterlegt</span>
Beispiel-Ergebnis:
Dieser Text ist mit Hilfe von CSS gelb hinterlegt
Da du nun eine eigene CSS-Klasse hast, kannst du diese auch für andere Tags nutzen. So kannst du auch ganze Text-Passagen gelb hinterlegen:
Beispiel HTML-Code:
<p class="marker-gelb">Diese ist eine Textpassage komplett in gelb</span>
Beispiel-Ergebnis:
Diese ist eine Textpassage komplett in gelb
Fazit
Dies waren drei einfache Möglichkeiten, wie du Texte farblich hervorheben kannst, als wären diese von einem Textmarker markiert worden. Dank Formatierung mit Hilfe von CSS kannst du die Hintergrundfarbe des Textes beliebig gestalten.
Mit den <MARK> – Tags wurde sogar eine explizite Möglichkeit geschaffen, Texte zu „markieren“, weswegen ich diese Methode immer bevorzugen würde. So erkennen auch Maschinen (z.B. Suchmaschinen) , dass eine bestimmte Passage hervorgehoben wurde. Viel Spaß beim Ausprobieren.