<mark> HTML-Markierungselement

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 enthält nur die globalen Attribute.

Anwendungshinweise

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

• Wenn es in einem Zitat (<q>) oder Blockzitat (<blockquote>) verwendet wird, zeigt es in der Regel Text an, der von besonderem Interesse ist, aber im ursprünglichen Quellenmaterial nicht markiert ist, oder Material, das besondere Beachtung benötigt, auch wenn der ursprüngliche Autor es nicht für besonders wichtig hielt. Man kann es sich ähnlich wie einen Textmarker in einem Buch vorstellen, mit dem Passagen markiert werden, die von Interesse sind.
• Ansonsten zeigt <mark> einen Abschnitt des Inhalts des Dokuments an, der wahrscheinlich für die aktuelle Aktivität des Benutzers relevant ist. Dies könnte beispielsweise verwendet werden, um die Wörter anzugeben, die mit einem Suchvorgang übereinstimmen.
• Verwenden Sie <mark> nicht für Syntaxhervorhebung; verwenden Sie stattdessen das <span>-Element mit entsprechend angewendetem CSS.

Barrierefreiheit

Das Vorhandensein des mark-Elements wird von den meisten Bildschirmlesegeräten in der Standardeinstellung nicht angekündigt. Es kann durch die Verwendung der CSS-content-Eigenschaft zusammen mit den Pseudo-Elementen ::before und ::after angekündigt werden.

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] ";
}

Einige Personen, die Bildschirmlesegeräte nutzen, deaktivieren absichtlich die Ankündigung von Inhalten, die zusätzliche Wortfülle erzeugen. Deshalb ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen ein fehlender Hinweis darauf, dass Inhalte hervorgehoben wurden, das Verständnis negativ beeinflussen würde.

• Tweaking Text Level Styles, Reprised von Adrian Roselli (2025)
• Kurzer Hinweis zur besseren Barrierefreiheit Ihrer Markierungen von Vispero (2017)

Beispiele

Markierung eines interessanten Textes

In diesem ersten Beispiel wird ein <mark>-Element verwendet, um Text innerhalb eines Zitats zu markieren, das für den Benutzer 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

Markierung kontextsensitiver Abschnitte

Dieses Beispiel zeigt die Verwendung von <mark>, um Suchergebnisse innerhalb eines Abschnitts 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 möglichen Anwendungen zu unterscheiden, erhält jedes Übereinstimmungsergebnis die benutzerdefinierte Klasse "match".

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität