<mark>: Das Mark Text Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <mark> HTML Element repräsentiert Text, der markiert oder hervorgehoben wird, zum Zwecke der Referenz oder Notation wegen der Relevanz der markierten Passage 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 umfasst nur die globalen Attribute.

Nutzungshinweise

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

  • Wenn es in einem Zitat (<q>) oder einem Blockzitat (<blockquote>) verwendet wird, zeigt es normalerweise Text an, der von besonderem Interesse ist, aber nicht im ursprünglichen Quellenmaterial markiert ist, oder Material, das besondere Aufmerksamkeit erfordert, obwohl der ursprüngliche Autor es nicht als besonders wichtig erachtete. Dies kann mit einem Textmarker verglichen werden, um Passagen in einem Buch zu kennzeichnen, die für Sie von Interesse sind.
  • Ansonsten zeigt <mark> einen Teil des Inhalts des Dokuments an, der wahrscheinlich für die aktuelle Aktivität des Benutzers relevant ist. Dies könnte beispielsweise verwendet werden, um Wörter zu kennzeichnen, die mit einer Suchoperation übereinstimmen.
  • Verwenden Sie <mark> nicht für Syntaxhervorhebungszwecke; stattdessen sollten Sie das <span> Element mit entsprechend angewendetem CSS verwenden.

Hinweis: Verwechseln Sie <mark> nicht mit dem <strong> Element; <mark> wird verwendet, um Inhalte zu markieren, die einen Grad der Relevanz haben, während <strong> Textabschnitte von Wichtigkeit angibt.

Barrierefreiheit

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

css
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 Benutzer, die Bildschirmlesegeräte verwenden, deaktivieren absichtlich die Ansage von Inhalten, die zusätzliche Wortfülle erzeugen. Daher ist es wichtig, diese Technik nicht übermäßig zu verwenden und sie nur in Situationen anzuwenden, in denen die Unkenntnis der hervorgehobenen Inhalte das Verstehen beeinträchtigen würde.

Beispiele

Markieren von interessantem Text

Im ersten Beispiel wird ein <mark> Element verwendet, um Text innerhalb eines Zitats zu markieren, der für den Benutzer von besonderem Interesse ist.

html
<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 kontextsensitiver Passagen

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

html
<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 anderer möglicher Nutzung zu unterscheiden, wird in diesem Beispiel die benutzerdefinierte Klasse "match" auf jede Übereinstimmung angewendet.

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phraseninhalt, fühlbarer Inhalt.
Erlaubter Inhalt Phraseninhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Zulässige Eltern Jedes Element, das Phraseninhalt akzeptiert.
Implizierte ARIA-Rolle Keine entsprechende Rolle
Zulässige ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-mark-element

Browser-Kompatibilität