<mark>

Zuletzt aktualisiert am 4. Februar 2026

Das <mark>-Element hebt Text hervor, der in einem bestimmten Kontext besonders relevant ist. Browser stellen <mark> standardmäßig mit einem gelben Hintergrund dar, ähnlich wie ein Textmarker auf Papier. Ein typischer Anwendungsfall: Suchbegriffe in Suchergebnissen hervorheben. Aber <mark> kann noch mehr: Es markiert auch wichtige Passagen in Zitaten oder hebt Schlüsselstellen in einem Text hervor. Auf dieser Seite lernst du, wann <mark> die richtige Wahl ist, worin der Unterschied zu <strong> und <em> liegt und worauf du bei der Barrierefreiheit achten solltest.

Grundlagen

<mark> unterscheidet sich grundlegend von <strong> und <em>: Während <strong> sagt “dieser Text ist wichtig” und <em> sagt “dieser Text wird betont”, sagt <mark> “dieser Text ist im aktuellen Kontext relevant”. Die Relevanz ergibt sich aus der Situation, z.B. weil der Nutzer nach diesem Begriff gesucht hat oder weil der Autor eine bestimmte Stelle in einem Zitat hervorheben möchte.

• <mark> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Browser stellen <mark> standardmäßig mit gelbem Hintergrund dar (background-color: yellow)
• Die semantische Bedeutung: “Dieser Text ist im aktuellen Kontext relevant oder bemerkenswert”
• Typische Anwendungsfälle: Suchbegriffe hervorheben, relevante Passagen in Zitaten, Schlüsselstellen markieren
• <mark> drückt keine Wichtigkeit aus (dafür: <strong>) und keine Betonung (dafür: <em>), es markiert kontextbezogene Relevanz
• Wenn du Text nur visuell mit einem Hintergrund versehen willst, verwende CSS background-color auf einem <span> statt <mark>

Syntax

<p>Suchergebnis: Das <mark>HTML</mark>-Element wird für Webseiten verwendet.</p>

Beispiele

Suchbegriffe hervorheben

Der häufigste Anwendungsfall: Wenn ein Nutzer nach einem Begriff sucht, werden die Treffer im Text hervorgehoben. So sieht der Nutzer auf einen Blick, wo sein Suchbegriff vorkommt:

<p>Suchergebnis für "<strong>JavaScript</strong>":</p>
<p>
  In diesem Tutorial lernst du die Grundlagen von <mark>JavaScript</mark>.
  Wir starten mit Variablen, Funktionen und Events.
  <mark>JavaScript</mark> ist die meistgenutzte Programmiersprache im Web.
</p>

Relevante Stelle in einem Zitat

Wenn du ein längeres Zitat wiedergibst und eine bestimmte Stelle besonders hervorheben möchtest, ist <mark> die richtige Wahl. Du sagst damit: “Achte besonders auf diese Stelle”:

<blockquote>
  <p>
    Das Web ist für alle da.
    <mark>Barrierefreiheit ist kein Feature,
    sondern eine Grundvoraussetzung.</mark>
    Wir müssen sicherstellen, dass jeder Mensch das Web
    nutzen kann, unabhängig von seinen Fähigkeiten.
  </p>
</blockquote>
<p>(Tim Berners-Lee)</p>

mark vs. strong vs. em

Alle drei heben Text hervor, aber mit unterschiedlicher Bedeutung. Hier siehst du den Unterschied in der Praxis:

<!-- mark: kontextbezogene Relevanz (z.B. Suchbegriff) -->
<p><mark>Markiert</mark>: relevant im aktuellen Kontext (z.B. Suchbegriff)</p>

<!-- strong: inhaltliche Wichtigkeit -->
<p><strong>Wichtig</strong>: inhaltlich bedeutsam, darf nicht übersehen werden</p>

<!-- em: sprachliche Betonung -->
<p><em>Betont</em>: sprachliche Betonung, ändert die Aussage</p>

Barrierefreiheit

• Screenreader-Verhalten: Einige Screenreader (z.B. NVDA ab Version 2020.1) kündigen <mark> als “highlight” oder “hervorgehoben” an. Andere ignorieren es. Du kannst dich also nicht darauf verlassen, dass die Hervorhebung kommuniziert wird.
• Nicht nur auf Farbe verlassen: Die gelbe Hintergrundfarbe allein ist für farbenblinde Nutzer möglicherweise nicht ausreichend erkennbar. Wenn die Markierung für das Verständnis wichtig ist, ergänze sie mit zusätzlichem Text oder einer anderen visuellen Kennung.
• Sparsam einsetzen: Wenn du zu viele Textstellen mit <mark> markierst, verliert die Hervorhebung ihre Wirkung. Nutzer (und Screenreader) können dann nicht mehr unterscheiden, was wirklich relevant ist.

Häufige Fehler

• mark statt strong für wichtige Inhalte: Wenn ein Text inhaltlich wichtig ist (“Achtung: Daten werden gelöscht”), verwende <strong>, nicht <mark>. <mark> drückt keine Wichtigkeit aus, es sagt nur “in diesem Kontext relevant”.

• mark für permanentes Styling: <mark> ist für kontextabhängige Hervorhebungen gedacht (z.B. Suchergebnisse). Wenn du Text dauerhaft mit einem farbigen Hintergrund versehen willst (z.B. in einem Design), verwende CSS background-color auf einem <span>.

• Gesamte Absätze markieren: <mark> ist für Wörter oder kurze Passagen gedacht. Einen ganzen Absatz zu markieren ist selten sinnvoll und macht den Text schwer lesbar. Markiere gezielt die relevanten Stellen.

Browser-Kompatibilität

Das mark-Element wird von allen modernen Browsern unterstützt. Es wurde mit HTML5 eingeführt.

Email-Kompatibilität

Die Unterstützung von mark in Email-Clients ist gemischt. Nicht alle Clients stellen den gelben Hintergrund dar.

Verwandte Elemente