Das Hervorheben von Text auf einer Webseite hilft, wichtige Informationen sofort ins Bewusstsein des Lesers zu bringen. Dieser Text ist zum Beispiel gelb hervorgehoben und ist Ihnen wahrscheinlich zuerst ins Auge gefallen. Es gibt mehrere Methoden zum Hervorheben von Text. Um fortzufahren, wählen Sie eine Methode aus der folgenden Liste aus und folgen Sie den Anweisungen.
Hervorheben mit dem HTML5-Tag <mark>
Wenn Sie an einer HTML5-Seite arbeiten, kann der Tag <mark> Text schnell hervorheben. Unten sehen Sie ein Beispiel für die Verwendung des mark-Tags und sein Ergebnis. Wenn Ihr Browser das <mark>-Tag unterstützt, sollte der „hervorgehobene Text“ einen gelben Hintergrund haben.
Beispielcode
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Beispielergebnis
Hier ist ein Beispiel für hervorgehobenen Text mit dem <mark>-Tag.
Text nur mit HTML-Code hervorheben
Um Text mit HTML-Code und Unterstützung für alle Browser hervorzuheben, setzen Sie den Stil „background-color“, wie im Beispiel unten gezeigt, mit dem HTML-Tag <span>.
Beispielcode
<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>
Beispielergebnis
Dieser Text ist gelb hinterlegt.
Im obigen Beispiel hat das <span> HTML-Tag eine Hintergrundfarbe mit dem Code #FFFF00, also gelb. In diesem Fall könnte das Wort „gelb“ anstelle des Farbcodes oder eines anderen Farbnamens verwendet werden.
Mit demselben Code können Sie auch ein oder mehrere Wörter innerhalb eines Absatzes hervorheben, um die Aufmerksamkeit auf einen bestimmten Abschnitt des Textes zu lenken.
Text mit CSS hervorheben & HTML
Sie können auch eine CSS-Klasse erstellen und das Attribut „background-color“ setzen, wie im folgenden Beispiel gezeigt.
Beispielcode
<style>body { background-color:blue; }.highlightme { background-color:#FFFF00; }p { background-color:#FFFFFF; }</style>
Im obigen CSS-Code werden drei Elemente definiert. Erstens wird die Hintergrundfarbe des Körpers auf Blau gesetzt, zweitens eine neue Klasse namens „highlightme“ mit einem gelben Hintergrund, und schließlich hat das Absatz-Tag einen weißen Hintergrund.
Wenn Sie die Klasse „highlightme“ verwenden möchten, um Ihren Text hervorzuheben, können Sie ein <span>-Tag in Ihrem HTML erstellen, das auf die CSS-Klasse verweist.
Beispielcode
<span class="highlightme">test</span>
Wie man einen kompletten Absatz hervorhebt
Die oben erwähnte CSS-Klasse bzw. Stilklasse könnte auch auf ein Absatz-Tag angewendet werden, wenn man einen kompletten Absatz hervorheben möchte, wie unten gezeigt.
Beispielcode
<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>
Beispielergebnis
Dieser ganze Textabsatz wird gelb hervorgehoben.
Zusätzliche Informationen
- Siehe unsere CSS-, Hervorhebungs- und HTML-Definitionsseiten für zusätzliche Informationen.
- CSS- und HTML-Farbhilfe und Unterstützung.