Za poudarjanje besedila običajno uporabljamo način “bold” ali pa s pomočjo značke <span> in nekaj CSSja besedilo ustrezno poudarimo. Seveda pa imamo pri HTML5 na voljo bolj semantično pravilno izbiro, ki ji pravimo <mark>.
HTML značka <mark> v osnovi besedilo obarva z rumeno, efekt je nekako podoben rumenemu flomastru za poudarjanje besedila v tiskanih gradivih, npr. pri študiju. Primer si oglejmo spodaj.
Seveda pa lahko značko <mark> poljubno oblikujemo s pomočjo CSSja.
Zakaj je semantični HTML zapis pomemben
Pri pisanju kode se je dobro držati semantično ustreznih zapisov. Razlog tiči v tem, da tudi iskalniki, kot je Google lažje razumejo vsebino na strani, se pravi lahko posledično vpliva tudi na SEO (spletno optimizacijo). Drugi razlog pa je tudi v spletni dostopnosti. Npr. bralniki zaslona imajo z semantično nepravilno kodo težave pri prebiranju vsebin.
Težave pri spletni dostopnosti
Značka <mark> še ni najbolj dobro podprta s strani spletnih bralnikov, zato jo običajno preskočijo. S pomočjo CSS kode pa lahko to težavo zaobidemo, uporabiti je potrebno CSS content in pseudo-element, da spletni bralnik ustrezno poudari vsebino.
mark::before {
content: ' [začetek poudarka] ';
}
mark::after {
content: ' [konec poudarka] ';
}
/* Skrijemo besedilo ustvarjeno s 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;
}
Podpora HTML znački <mark> je precej dobra, podpira jo tudi Internet Explorer. Kljub temu vedno preverite podporo.