Html Markeer tekst Markeer tekst met HTML markeer tag

Als je ooit tekst binnen een alinea moet markeren, kun je beter de <mark> tag gebruiken. Het is de HTML-versie van een gele markeerstift. Ik heb altijd een <span>-tag gebruikt met wat CSS-styling eroverheen gestrooid, niet wetende dat deze meer semantische optie bestond. HTML5 zit vol met allerlei goodies, heb ik gelijk 😆

<p> <mark>Highlight</mark> text with HTML &lt;mark&gt; tag</p>

Default <mark> styling

De standaard achtergrondkleur van <mark> is geel.

<p> <mark>Default Yellow Highlight</mark></p>

Output

Aangepaste Styling <markeer> met CSS

Natuurlijk, kunt u, net als bij elke HTML-tag, uw eigen stijl toepassen met CSS. Je kunt het vergelijken met de manier waarop je een <p> tag zou stylen.

mark { background: red; color: white;}

Uitvoer

<mark> vs Andere Tekst HTML Tags

strong

<strong> wordt gebruikt om tekst aan te geven die van groter belang is dan de omringende tekst, zoals een waarschuwing of een fout. Semantisch gezien is het belangrijk. Het wordt vet weergegeven

b

<b> lijkt veel op <strong>, omdat het ook vet wordt weergegeven. Maar in tegenstelling tot het vetgedrukte<strong> brengt het niet echt belang over en is het meer een stilistisch iets dan een semantisch iets.

em

<em> wordt gebruikt om de nadruk op een bepaald woord te leggen. Het verschijnt als cursief

mark

<mark> benadrukt slechts de relevantie van een bepaald stuk tekst. Voordat deze tag bestond, gebruikten velen em of strong om de gemarkeerde inhoud een semantische betekenis te geven. Nu niet meer! Als je iets wilt markeren, gebruik je deze tag 🌟

Waarom semantische HTML-tags belangrijk zijn

De reden waarom je niet overal <div> tags gebruikt, is omdat ze niet semantisch zijn. Misschien ben je net als ik toen ik voor het eerst leerde programmeren – wie geeft er nou om semantisch correct te zijn 🙄. Fout ❌. In feite doen zoekmachines zoals Google dat wel! Omdat semantiek betekenis overbrengt over uw site. Wanneer zoekrobots door uw site kruipen, weten ze wat er aan de hand is. Met andere woorden, ding ding ding op uw SEO of zoekmachine optimalisatie 🏆

Een andere reden om semantisch-correct te zijn is voor toegankelijkheid. Veel van de toegankelijkheid tools vertrouwen op de semantiek van de tags om uw site om te zetten in betekenis voor de menselijke gebruiker die het gebruikt (dat wil zeggen. schermlezers). Hier is een analogie. Weet je nog vroeger, toen we de computer tekst van een site lieten voorlezen. Het klonk super robotachtig en vreemd 🤖. Zonder de juiste semantiek, is het net als dat. Werkt het, zeker – maar de luisterervaring is verschrikkelijk 😱. Maar als je de juiste semantiek gebruikt, is het net alsof je naar Siri luistert. Het klinkt veel menselijker omdat het alle verschillende stembuigingen heeft, veranderingen in toonhoogte, en zelfs weet wanneer te pauzeren. En dit is hetzelfde soort betere ervaring die je kunt bereiken wanneer je semantisch-correcte HTML-tags gebruikt 👍

HTML5-tag en SEO

Ik wil echter wel op één ding wijzen.

Google’s John Mueller noemde dit in een reactie op Twitter:

Het is zeker zinvol om HTML5 correct te gebruiken als je dat kunt, er is geen SEO-nadeel aan om dat te doen :).

Hieruit maak ik op dat. Of je nu wel of geen HTML5-tags gebruikt, het zal je Google-ranglijst van zoekresultaten niet schaden. Maar betekent dat dan ook dat je HTML5-tags moet gebruiken? Helemaal niet! De toegankelijkheidsvoordelen zijn er nog steeds. En sommige HTML5-tags hebben echt interessant browsergedrag en bieden uw gebruiker meer geavanceerde functies die hij voorheen niet had 🤩

Toegankelijkheidsaspecten

Hooplijk heb ik u met succes het belang van semantische HTML-tags duidelijk gemaakt. En u kunt nu begrijpen dat <mark> niet alleen dient om teksten te stijlen, maar semantisch een goede zaak is.

Maar! Er is enige bezorgdheid over de toegankelijkheid ervan. Helaas wordt het gebruik van de tag <mark> door de meeste schermlezers in zijn standaardinstellingen niet aangekondigd. Maar goed nieuws, er is een manier om dit te omzeilen. U kunt de CSS-inhoudseigenschap en het pseudo-element gebruiken om een aankondiging te maken.

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

Dus wat de schermlezer hier zal doen. Als hij tekst tegenkomt die in de tag <mark> is gewikkeld, kondigt hij “highlight start” aan, gevolgd door de tekst binnen de tag. en vervolgens “highlight end” zodra de markeringstag eindigt.

MAAR…

Let op: als je veel van deze “aankondigingen” hebt, kan het erg langdradig worden en soms vervelende overbodige informatie toevoegen. Dat kan ertoe leiden dat sommige gebruikers van schermlezers deze functie uitschakelen. Dus, de les hier is. “Met grote macht komt grote verantwoordelijkheid 🕷”. Misbruik deze techniek niet en pas hem ALLEEN toe in gevallen waar het NIET kennen van de gemarkeerde inhoud het begrip van de gebruiker negatief kan beïnvloeden.

Use Case voor <mark>

Het leuke gedeelte nu! Laten we eens kijken naar enkele use-cases voor <mark>:

Use Case: Zoekresultaat

Hier is een populaire. Je kunt het gebruiken om de term waar een gebruiker op heeft gezocht te markeren.

<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

Use Case: Citaten

Het is geweldig om hoogtepunten te bieden voor citaten (<q>) en blokcitaten (<blockquote>).

<p>According to Samantha, <q>Vue is <mark>AWESOME</mark></q></p>

Uitvoer