In HTML hast du einige Elemente, die dir dabei helfen dein Text auszuzeichnen. Die meisten von uns kennen die Elemente em oder strong. Mit diesen Elementen kannst du eine einfache (em) oder eine starke (strong) Betonung des Wortes oder eines Abschnittes realisieren. Schauen wir uns folgendes Beispiel an:
"Nehmen Sie das Medikament <em>zweimal</em> am Tag ein,
am besten <strong>während</strong> der Mahlzeiten."In der Ausgabe im Browser schaut es dann so aus:
"Nehmen Sie das Medikament zweimal am Tag ein, am besten während der Mahlzeiten."
Mit der einfachen Betonung weise ich darauf hin, dass das Medikament zweimal am Tag eingenommen werden soll und mit der stärkeren Betonung weise ich darauf hin, dass das Medikament während es Essens eingenommen werden soll, da es dann am besten wirkt.
Wichtige Abschnitte zusätzlich hervorheben
Wem jetzt diese beiden Elemente nicht ausreichen, um seinen Text hervorzuheben, der hat noch die Möglichkeit das HTML-Element mark einzusetzen. Um seine Funktionalität zu erklären, schauen wir uns am besten folgendes Beispiel an. Zuerst der Quelltext:
Achte darauf, dass du <mark><em>ausreichend</em> schläfst</mark>.
<mark>Trinke <strong>viel</strong> Wasser</mark> oder ungezuckerte Kräutertees.
Abwechslungs- und <mark><em>proteinreich</em> essen</mark>.
Absolviere <em>wöchentlich</em> <mark>drei Einheiten <strong>Ganzkörpertraining</strong></mark>.Und so schaut das Ganze dann in der Ausgabe im Browser aus:
- Achte darauf, dass du ausreichend schläfst.
- Trinke viel Wasser oder ungezuckerte Kräutertees.
- Abwechslungs- und proteinreich essen.
- Absolviere wöchentlich drei Einheiten Ganzkörpertraining.
Das mark-Element wird standardmäßig in dunkler bzw. schwarzer Schrift und mit gelber Hintergrundfarbe hinterlegt, was du aber via CSS anpassen kannst. Das Ganze erinnert an Abschnitte, die wir alle mit einem Textmarker hervorheben. Und genau für solche Zwecke sollte dieses HTML-Element auch eingesetzt werden:
- Eigene Hervorhebungen in Texten kennzeichnen
- Suchbegriffe in Suchergebnissen hervorheben
- Auf bestimmte Textinhalte hinweisen
In Maßen (und nicht in Massen) kann dieses Element helfen um textlastige Inhalte für den Leser besser und schneller erfassbar machen zu lassen.
Wer eine andere Markierungsfarbe bevorzugt, der kann dies ganz einfach mit CSS ändern. Folgende Angabe…
mark {background: #ffe6f7; color: #333;}… ergibt dann folgendes Ergebnis:
“In diesem Satz ist dieser Abschnitt markiert.”
Weitere Informationen über dieses Element findest du unter anderem auf der deutschsprachigen Website SelfHTML, auf W3.org oder auf Mozilla Developer Network.
Wie schaut es mit den Screenreadern aus?
Momentan wird das mark-Element von den gängigen Bildschirmlesetechnologien in der Standardkonfiguration nicht angegeben. Über die CSS-Eigenschaft content kannst du aber zusammen mit den Pseudoelementen ::before und ::after die Ausgabe aktivieren.
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] ";
}Image(s) licensed by Ingram Image/adpic.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
