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

Steckbrief

Kategorie: Text & Typografie
Art: Inline
Beispiele: 3
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 04.02.2026

Grundlagen

 unterscheidet sich grundlegend von  und : Während  sagt “dieser Text ist wichtig” und  sagt “dieser Text wird betont”, sagt  “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.

 ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
Browser stellen  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
 drückt keine Wichtigkeit aus (dafür: ) und keine Betonung (dafür: ), es markiert kontextbezogene Relevanz
Wenn du Text nur visuell mit einem Hintergrund versehen willst, verwende CSS background-color auf einem  statt

Syntax

index.html

Grundsyntax

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

Beispiele

3 Beispiele

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:

index.html

Suchbegriffe

<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>

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

index.html

Zitat mit Hervorhebung

<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>

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

index.html

mark vs. strong vs. em

<!-- 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

3 Punkte

Screenreader-Verhalten: Einige Screenreader (z.B. NVDA ab Version 2020.1) kündigen  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  markierst, verliert die Hervorhebung ihre Wirkung. Nutzer (und Screenreader) können dann nicht mehr unterscheiden, was wirklich relevant ist.

Häufige Fehler

3 Punkte

mark statt strong für wichtige Inhalte: Wenn ein Text inhaltlich wichtig ist (“Achtung: Daten werden gelöscht”), verwende , nicht .  drückt keine Wichtigkeit aus, es sagt nur “in diesem Kontext relevant”.
mark für permanentes Styling:  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 .
Gesamte Absätze markieren:  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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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

Apple Mail

Komplett
Gmail

Keine

Gmail entfernt das mark-Element und seine Styles. Verwende inline background-color als Fallback
Outlook

Teilweise

Neuere Versionen unterstützen mark, ältere (2007-2016) ignorieren es
Thunderbird

Komplett
Yahoo Mail

Keine

Yahoo Mail entfernt mark-Styles. Inline background-color funktioniert als Fallback

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<mark>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter