Wenn Sie einmal Text innerhalb eines Absatzes markieren müssen, verwenden Sie am besten das <mark>-Tag. Es ist die HTML-Version eines gelben Textmarkers. Ich habe immer ein <span>-Tag mit etwas CSS-Styling verwendet, ohne zu wissen, dass diese semantischere Option existiert. HTML5 ist mit allen möglichen Goodies gefüllt, habe ich recht 😆
<p> <mark>Highlight</mark> text with HTML <mark> tag</p>Standard <mark> styling
Die Standard-Hintergrundfarbe von <mark> ist gelb.
<p> <mark>Default Yellow Highlight</mark></p>Ausgabe
Benutzerdefiniertes Styling <mark> mit CSS
Natürlich, können Sie, wie bei jedem anderen HTML-Tag auch, benutzerdefiniertes Styling mit CSS anwenden. Sie können sich das so ähnlich vorstellen, wie Sie ein <p>-Tag stylen würden.
mark { background: red; color: white;}Ausgabe
<mark> vs. andere Text-HTML-Tags
strong
<strong> wird verwendet, um Text anzuzeigen, der eine stärkere Bedeutung hat als der umgebende Text, wie zum Beispiel eine Warnung oder ein Fehler. Semantisch ist es wichtig. Es erscheint fett
b
<b> ist dem <strong> sehr ähnlich, da es ebenfalls fett erscheint. Im Gegensatz zu diesem vermittelt es jedoch keine wirkliche Wichtigkeit und ist mehr eine stilistische Sache als eine semantische.
em
<em> wird verwendet, um ein bestimmtes Wort hervorzuheben. Es erscheint als kursiv
mark
<mark> hebt lediglich die Relevanz eines bestimmten Textteils hervor. Bevor es dieses Tag gab, haben viele em oder strong verwendet, um dem hervorgehobenen Inhalt eine semantische Bedeutung zu geben. Nun, nicht mehr! Wenn Sie etwas hervorheben müssen, verwenden Sie diesen Tag 🌟
Warum semantische HTML-Tags wichtig sind
Der Grund, warum Sie nicht einfach überall <div>-Tags verwenden, ist, dass sie nicht semantisch sind. Vielleicht geht es Ihnen wie mir, als ich anfing, programmieren zu lernen – wer kümmert sich schon darum, semantisch korrekt zu sein 🙄. Falsch ❌. In der Tat, Suchmaschinen wie Google tun es! Denn Semantik vermittelt Bedeutung über Ihre Website. Wenn Suchroboter Ihre Seite durchkrabbeln, wissen sie, was Sache ist. Mit anderen Worten, ding ding ding für Ihre SEO oder Suchmaschinenoptimierung 🏆
Ein weiterer Grund, semantisch korrekt zu sein, ist die Barrierefreiheit. Viele der Zugänglichkeits-Tools verlassen sich auf die Semantik der Tags, um Ihre Website in eine Bedeutung für den menschlichen Benutzer umzuwandeln, der sie benutzt (z.B. Screenreader). Hier ist eine Analogie. Erinnern Sie sich noch an die Zeit, als wir den Computer den Text einer Website vorlesen ließen. Es klang super roboterhaft und seltsam 🤖. Ohne die richtige Semantik ist es genau so. DDas funktioniert, sicher – aber das Hörerlebnis ist schrecklich 😱. Wenn Sie jedoch die richtige Semantik verwenden, ist es wie das Hören von Siri. Es klingt viel menschlicher, weil es all die verschiedenen Beugungen und Tonhöhenänderungen hat und sogar weiß, wann man eine Pause machen muss. Und das ist die ähnliche Art von besserer Erfahrung, die Sie erreichen können, wenn Sie semantisch korrekte HTML-Tags verwenden 👍
HTML5-Tag und SEO
Ich möchte jedoch auf eine Sache hinweisen.
Google’s John Mueller erwähnte dies in einer Twitter-Antwort:
Es ist sicherlich sinnvoll, HTML5 richtig zu verwenden, wenn man es kann, es gibt keinen SEO-Nachteil, dies zu tun :).
Hier ist, was ich daraus entnehme. Ob Sie HTML5-Tags verwenden oder nicht, es wird Ihrem Google-Suchergebnis-Ranking nicht schaden. Heißt das aber, dass Sie HTML5-Tags verwenden sollten. Ganz und gar nicht! Die Vorteile der Barrierefreiheit sind immer noch vorhanden. Und einige HTML5-Tags haben ein wirklich interessantes Browser-Verhalten und eröffnen dem Benutzer erweiterte Funktionen, die er vorher nicht hatte 🤩
Bedenken an die Barrierefreiheit
Also, hoffentlich habe ich Ihnen erfolgreich die Wichtigkeit von semantischen HTML-Tags vermittelt. Und Sie können nun verstehen, dass das <mark> nicht einfach nur dazu dient, Texte zu stylen, sondern semantisch eine gute Sache ist.
Aber! es gibt einige Bedenken bezüglich der Barrierefreiheit. Leider wird die Verwendung des <mark>-Tags von den meisten Screenreadern in der Standardeinstellung nicht angezeigt. Aber die gute Nachricht ist, dass es einen Weg gibt, das zu umgehen. Sie können die CSS-Content-Eigenschaft und das Pseudo-Element verwenden, um eine Ansage zu machen.
mark::before { content: " ";}mark::after { content: " ";}/* Hide the text created in the CSS content property */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;}So, was der Screenreader hier tun wird. Wenn es auf Text stößt, der in das <mark>-Tag eingeschlossen ist, wird es „highlight start“ ansagen, gefolgt von dem Text innerhalb des Tags. und dann „highlight end“ ansagen, sobald das Markierungs-Tag endet.
ABER…
Bitte beachten Sie: Wenn Sie viele dieser „Ansagen“ haben, kann es sehr langatmig sein und manchmal lästige unnötige Informationen hinzufügen. Das kann dazu führen, dass einige Screenreader-Nutzer diese Funktion abschalten. Die Lektion hier ist also. „Mit großer Macht kommt große Verantwortung 🕷“. Missbrauchen Sie diese Technik nicht und wenden Sie sie NUR in Fällen an, in denen die Nichterkennung des hervorgehobenen Inhalts das Verständnis für den Benutzer beeinträchtigen kann.
Anwendungsfall für <mark>
Jetzt kommt der lustige Teil! Schauen wir uns einige Anwendungsfälle für <mark> an:
Anwendungsfall: Suchergebnis
Hier ist ein beliebter Fall. Sie können damit den Begriff hervorheben, nach dem ein Benutzer gesucht hat.
<p>Search Result for "Vue"</p><hr><p><mark>Vue</mark> is a awesome JavaScript framework. <mark>Vue</mark> is awesome. Can you tell I really like <mark>Vue</mark>😆</p>Output
Anwendungsfall: Zitate
Es ist toll, Hervorhebungen für Zitate (<q>) und Blockzitate (<blockquote>) bereitzustellen.
<p>According to Samantha, <q>Vue is <mark>AWESOME</mark></q></p>Ausgabe
