Poudarjanje besedila z HTML značko <mark>

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.

Dodatne informacije:

Oznake: boldHTMLmark

Komentiraj


*