Highlighting tekst op een webpagina helpt om belangrijke informatie direct onder de aandacht van de lezer te brengen. Deze tekst is bijvoorbeeld geel gemarkeerd en is u waarschijnlijk als eerste opgevallen. Er zijn verschillende methoden om tekst te markeren. Kies een methode uit de onderstaande lijst en volg de instructies.
Highlight met de HTML5 <mark> tag
Als u aan een HTML5-pagina werkt, kunt u met de <mark> tag snel tekst markeren. Hieronder staat een voorbeeld van het gebruik van de markeer tag en het resultaat. Als uw browser de tag <mark> ondersteunt, moet de “gemarkeerde tekst” een gele achtergrond hebben.
Voorbeeld code
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Voorbeeld resultaat
Hier zie je een voorbeeld van uitgelichte tekst met behulp van de <mark> tag.
Tekst markeren met alleen HTML-code
Om tekst te markeren met HTML-code en ondersteuning voor alle browsers, stelt u de stijl achtergrondkleur in, zoals in het voorbeeld hieronder, met behulp van de <span> HTML-tag.
Voorbeeldcode
<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>
Voorbeeldresultaat
Deze tekst is geel gemarkeerd.
In het bovenstaande voorbeeld heeft de <span> HTML-tag een background-color code van #FFFF00, wat geel is. In dit geval kan het woord “geel” worden gebruikt in plaats van de kleurcode, of welke andere kleurnaam dan ook.
Met dezelfde code kun je ook een of meer woorden in een alinea markeren om de aandacht te vestigen op een specifiek deel van de tekst.
Tekst markeren met CSS & HTML
U kunt ook een CSS-klasse maken en het attribuut “achtergrondkleur” instellen, zoals in het onderstaande voorbeeld.
Voorbeeldcode
<style>body { background-color:blue; }.highlightme { background-color:#FFFF00; }p { background-color:#FFFFFF; }</style>
In de CSS-code hierboven worden drie elementen gedefinieerd. Ten eerste wordt de achtergrondkleur van de body op blauw gezet, ten tweede een nieuwe klasse genaamd “highlightme” met een gele achtergrond, en ten slotte heeft de alinea-tag een witte achtergrond.
Als je de “highlightme”-klasse wilt gebruiken om je tekst te highlighten, kun je een <span>-tag in je HTML maken die naar de CSS-klasse verwijst.
Voorbeeldcode
<span class="highlightme">test</span>
Hoe markeer je een complete alinea
De hierboven genoemde CSS-klasse of stijlklasse kan ook op een alinea-tag worden toegepast als je een complete alinea wilt markeren, zoals hieronder wordt getoond.
Voorbeeldcode
<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>
Voorbeeldresultaat
Deze hele alinea tekst is geel geaccentueerd.
Aanvullende informatie
- Zie onze CSS, highlight, en HTML definitie voor aanvullende informatie gerelateerde pagina’s.
- CSS en HTML kleuren hulp en ondersteuning.