Das<mark>HTML-Element repräsentiert Text, dermarkiert oderhervorgehoben ist für Referenz- oder Notationszwecke, aufgrund der Relevanz des markierten Abschnitts im umgebenden Kontext.

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 dieglobalen Attribute.

Anwendungshinweise

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

• Wenn es in einem Zitat (<q>) oder Blockzitat (<blockquote>) verwendet wird, zeigt es im Allgemeinen Text an, der von besonderem Interesse ist, aber im Originalmaterial nicht markiert wurde, oder Material, das besondere Aufmerksamkeit erfordert, auch wenn der ursprüngliche Autor es nicht für besonders wichtig hielt. Denken Sie dabei an die Verwendung eines Textmarkers in einem Buch, um Passagen zu markieren, die Sie für interessant halten.
• Andernfalls zeigt<mark> einen Teil des Dokuments an, der wahrscheinlich für die aktuelle Aktivität des Nutzers relevant ist. Dies könnte beispielsweise verwendet werden, um die Wörter hervorzuheben, die mit einer Suchoperation übereinstimmen.
• Verwenden Sie<mark> nicht für Syntaxhervorhebungszwecke; verwenden Sie stattdessen das<span>-Element mit entsprechendem CSS.

Barrierefreiheit

Das Vorhandensein desmark-Elements wird von den meisten Screenreader-Technologien in der Standardkonfiguration nicht angekündigt. Es kann durch Verwendung der CSS-content-Eigenschaft zusammen mit den::before und::after Pseudo-Elementen 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 Screenreader verwenden, deaktivieren bewusst das Ankündigen von Inhalten, die zusätzliche Redundanz schaffen. Aus diesem Grund ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen das Nichtwissen, dass Inhalt hervorgehoben wurde, das Verständnis erheblich beeinträchtigen würde.

• Short note on making your mark (more accessible) | The Paciello Group
• Tweaking Text Level Styles | Adrian Roselli

Beispiele

Markieren von interessantem Text

In diesem ersten Beispiel wird ein<mark>-Element verwendet, um einen Text innerhalb eines Zitats zu markieren, der 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

Identifizieren kontextabhängiger Passagen

Dieses Beispiel demonstriert die Verwendung von<mark>, um Suchergebnisse innerhalb einer Passage zu markieren.

<p>  It is a dark time for the Rebellion. Although the Death Star has been  destroyed, <mark>Imperial</mark> troops have driven the Rebel  forces from their hidden base and pursued them across the galaxy.</p><p>  Evading the dreaded <mark>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 potenziellen Nutzungen zu unterscheiden, wendet dieses Beispiel die benutzerdefinierte Klasse"match" auf jeden Treffer an.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität