<mark>: HTML-Element zum Markieren von Text

Probieren Sie es aus

<p>Search results for "salamander":</p>

<hr />

<p>
  Several species of <mark>salamander</mark> inhabit the temperate rainforest of
  the Pacific Northwest.
</p>

<p>
  Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and
  other small creatures.
</p>

mark {
  /* Add your styles here */
}

Attribute

Dieses Element unterstützt nur die globalen Attribute.

Verwendungshinweise

Typische Anwendungsfälle für <mark> sind:

• Innerhalb eines Zitats (<q>) oder eines Blockzitats (<blockquote>) kennzeichnet es in der Regel Text, der von besonderem Interesse ist, aber im Original nicht markiert wurde, oder Text, der genauer betrachtet werden sollte, obwohl die ursprüngliche Autorin oder der ursprüngliche Autor ihn nicht für besonders wichtig hielt. Das ist vergleichbar damit, interessante Stellen in einem Buch mit einem Textmarker hervorzuheben.
• Ansonsten kennzeichnet <mark> einen Teil des Dokumentinhalts, der für die aktuelle Tätigkeit der nutzenden Person wahrscheinlich relevant ist. So können beispielsweise Wörter markiert werden, die einer Suchanfrage entsprechen.
• Verwenden Sie <mark> nicht zur Syntaxhervorhebung. Verwenden Sie stattdessen das Element <span> mit entsprechendem CSS.

Barrierefreiheit

Die meisten Screenreader geben das Vorhandensein des Elements mark in ihrer Standardkonfiguration nicht bekannt. Mithilfe der CSS-Eigenschaft content und der Pseudoelemente ::before und ::after lässt sich eine entsprechende Ansage ergänzen.

mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [highlight start] ";
}

mark::after {
  content: " [highlight end] ";
}

Manche Menschen, die Screenreader verwenden, deaktivieren bewusst die Ansage von Inhalten, die zu zusätzlichen Ausgaben führen. Setzen Sie diese Technik daher sparsam und nur dann ein, wenn die fehlende Information über eine Hervorhebung das Verständnis beeinträchtigen würde.

• Tweaking Text Level Styles, Reprised von Adrian Roselli (2025)

Beispiele

Interessante Textstellen markieren

In diesem ersten Beispiel wird ein <mark>-Element verwendet, um eine Textstelle innerhalb eines Zitats zu markieren, die für die nutzende Person von besonderem Interesse ist.

<blockquote>
  It is a period of civil war. Rebel spaceships, striking from a hidden base,
  have won their first victory against the evil Galactic Empire. During the
  battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire's
  ultimate weapon, the DEATH STAR, an armored space station with enough power to
  destroy an entire planet.
</blockquote>

Ergebnis

Kontextabhängige Textstellen kennzeichnen

Dieses Beispiel zeigt, wie <mark> verwendet wird, um Suchergebnisse innerhalb einer Textpassage zu markieren.

<p>
  It is a dark time for the Rebellion. Although the Death Star has been
  destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
  forces from their hidden base and pursued them across the galaxy.
</p>

<p>
  Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
  freedom fighters led by Luke Skywalker has established a new secret base on
  the remote ice world of Hoth.
</p>

Um die Verwendung von <mark> für Suchergebnisse von anderen Einsatzmöglichkeiten zu unterscheiden, weist dieses Beispiel jedem Treffer die benutzerdefinierte Klasse "match" zu.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität