HTML <mark>-Tag
Das HTML <mark>-Tag hebt Text als relevant im aktuellen Kontext hervor. Lernen Sie Verwendung, Attribute und Gestaltung mit Beispielen.
Das <mark>-Tag ist eines der HTML5-Elemente. Es markiert einen Textabschnitt als relevant oder zur Referenz hervorgehoben, so wie man mit einem Textmarker Wörter auf einer gedruckten Seite unterstreicht. Browser stellen es standardmäßig mit gelbem Hintergrund dar.
Diese Seite erklärt, was <mark> semantisch bedeutet, wann man es anstelle eines einfachen <span> verwenden sollte, die drei klassischen Anwendungsfälle und wie es sich von <strong>, <b> und <em> unterscheidet.
Warum <mark> und nicht ein <span>?
Ein <span> ist ein generischer Container ohne Bedeutung — er dient ausschließlich als Styling-Hook. Man könnte einem <span> einen gelben Hintergrund geben, und er würde wie hervorgehoben aussehen, aber für einen Screenreader, eine Suchmaschine oder eine andere Maschine wäre es immer noch gewöhnlicher Text.
<mark> ist anders, weil es Semantik trägt: Es teilt dem Browser und unterstützenden Technologien mit: „Dieser Teil des Textes ist im aktuellen Kontext bemerkenswert oder relevant." Die Hervorhebung ist Teil der Bedeutung des Dokuments, nicht nur seiner Erscheinung.
Verwenden Sie diese Faustregel:
- Wenn die Hervorhebung Bedeutung vermittelt (dieser Text hat mit der Suche übereingestimmt, diese Passage ist der relevante Punkt) → verwenden Sie
<mark>. - Wenn Sie nur einen farbigen Hintergrund zur Dekoration möchten → verwenden Sie ein
<span>mit CSS.
Wann <mark> verwenden
Die Spezifikation beschreibt drei Hauptszenarien:
- Hervorhebung von Suchergebnissen. Markieren Sie die Wörter in einem Abschnitt, die mit dem gesuchten Begriff des Nutzers übereinstimmen, damit er schnell zur relevanten Stelle navigieren kann.
- Relevanz innerhalb eines Zitats. Wenn Sie Text zitieren, der von jemand anderem verfasst wurde, hebt
<mark>den Teil hervor, der relevant für den Grund des Zitats ist — eine Hervorhebung, die der ursprüngliche Autor nicht hinzugefügt hat. - Vom Nutzer hervorgehobener Inhalt. Stellt Text dar, den der Leser markiert hat, ähnlich einer „Markierungs"-Funktion in einer Lese- oder Annotations-App.
Verwenden Sie <mark> niemals für Syntaxhervorhebung oder rein visuelle Einfärbung. Verwenden Sie dafür stattdessen ein <span> mit geeignetem CSS.
Syntax
Das <mark>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<mark>) und schließenden (</mark>) Tag geschrieben.
Beispiel des HTML-<mark>-Tags:
HTML-<mark>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>Ergebnis
Praxisbeispiel: Suchergebnisse hervorheben
Stellen Sie sich eine Suchergebnisseite vor, auf der der Nutzer nach dem Wort highlight gesucht hat. Sie umschließen jedes übereinstimmende Wort in einem Absatz mit <mark>, damit das Ergebnis leicht zu scannen ist. Das folgende Beispiel passt außerdem die Hervorhebungsfarbe an und fügt eine @media print-Regel hinzu, da der standardmäßige gelbe Hintergrund beim Drucken einer Seite häufig wegfällt:
<!DOCTYPE html>
<html>
<head>
<title>Search results</title>
<style>
/* Custom highlight color instead of the default yellow */
mark {
background-color: #c8f7c5;
color: #14532d;
padding: 0 2px;
border-radius: 3px;
}
/* Make sure highlights are still visible when printed */
@media print {
mark {
background-color: transparent;
color: inherit;
text-decoration: underline;
}
}
</style>
</head>
<body>
<p>
You can <mark>highlight</mark> search terms so the user finds them
fast. Each <mark>highlight</mark> marks where the query matched.
</p>
</body>
</html>Das <mark>-Tag und andere HTML-Tags
Mehrere HTML-Elemente sehen <mark> ähnlich, bedeuten aber etwas anderes. Die richtige Wahl ist für Barrierefreiheit und SEO wichtig, da jedes Element eine eigene Absicht an Browser und unterstützende Technologien vermittelt.
Das HTML-<strong>-Tag
Das <strong>-Tag kennzeichnet Text als wichtig, ernst oder dringend — beispielsweise einen Fehler oder eine Warnung. Browser stellen es standardmäßig fett dar. Verwenden Sie <strong>, wenn der Text bedeutsam ist, nicht nur wenn er hervorgehoben aussehen soll.
Das HTML-<b>-Tag
Das <b>-Tag stellt ebenfalls Fettschrift dar, trägt aber im Gegensatz zu <strong> keine Wichtigkeit. Es zieht aus rein stilistischen Gründen Aufmerksamkeit auf sich — etwa bei Schlüsselwörtern oder einem Produktnamen — ohne anzudeuten, dass der Text bedeutsamer ist.
Das HTML-<em>-Tag
Das <em>-Tag betont Emphasis auf ein Wort, so wie man beim Sprechen den Tonfall verändert. Es wird standardmäßig kursiv dargestellt und kann die Bedeutung eines Satzes verändern.
Kurz gesagt: <mark> = hier relevant/hervorgehoben, <strong> = wichtig, <b> = visuell fett, ohne Bedeutung, <em> = gesprochene Betonung.
Attribute
Das <mark>-Tag hat keine elementspezifischen Attribute — es akzeptiert nur die Globalen Attribute und die Ereignisattribute.
So gestalten Sie ein HTML-<mark>-Tag
Sie können den standardmäßigen gelben Hintergrund mithilfe der CSS-Eigenschaft background-color ändern:
mark {
background-color: #ffeb3b;
color: #333;
}