Het element <mark>

Attributen

Dit element bevat alleen de globale attributen.

Gebruiksnotities

Typische gebruikssituaties voor <mark> zijn onder andere:

• Wanneer gebruikt in een citaat (<q>) of blokcitaat (<blockquote>) geeft het over het algemeen tekst aan die van bijzonder belang is, maar niet als zodanig gemarkeerd is in het oorspronkelijke bronmateriaal, of materiaal dat extra aandacht verdient, ook al vond de oorspronkelijke auteur het niet van bijzonder belang. Beschouw dit als het gebruik van een markeerstift in een boek om passages te markeren die je interessant vindt.
• In andere gevallen geeft <mark> een gedeelte van de inhoud van het document aan dat waarschijnlijk relevant is voor de huidige activiteit van de gebruiker. Dit kan bijvoorbeeld worden gebruikt om de woorden aan te geven die overeenkwamen met een zoekopdracht.
• Gebruik <mark> niet voor het markeren van syntaxis; gebruik in plaats daarvan het <span>-element met de juiste CSS erop toegepast.

Toegankelijkheid

De aanwezigheid van het mark-element wordt door de meeste schermlezertechnologie in de standaardconfiguratie niet aangekondigd. Dit kan wel worden aangekondigd door gebruik te maken van de CSS-eigenschap content, samen met de pseudo-elementen ::before en ::after.

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

Sommige mensen die schermlezers gebruiken, schakelen het aankondigen van inhoud die extra breedsprakigheid veroorzaakt bewust uit. Daarom is het belangrijk om deze techniek niet te misbruiken en deze alleen toe te passen in situaties waarin het niet weten dat inhoud is gemarkeerd het begrip nadelig zou beïnvloeden.

• Tweaking Text Level Styles, Reprised via Adrian Roselli (2025)
• Short note on making your mark (more accessible) via Vispero (2017)

Voorbeelden

Tekst van belang markeren

In dit eerste voorbeeld wordt een <mark>-element gebruikt om tekst binnen een citaat te markeren die van bijzonder belang is voor de gebruiker.

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

Resultaat

Contextgevoelige passages aanduiden

Dit voorbeeld demonstreert het gebruik van <mark> om zoekresultaten binnen een passage te markeren.

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

Om het gebruik van <mark> voor zoekresultaten te onderscheiden van ander mogelijk gebruik, past dit voorbeeld de aangepaste klasse "match" toe op elke overeenkomst.

Resultaat

Technische samenvatting