Se hai bisogno di contrassegnare il testo all’interno di un paragrafo, meglio usare il tag <mark>. È la versione HTML di un evidenziatore giallo. Ho sempre usato un tag <span> con un po’ di stile CSS spruzzato sopra, senza rendermi conto che esisteva questa opzione più semantica. HTML5 è pieno di ogni tipo di chicche, ho ragione 😆
<p> <mark>Highlight</mark> text with HTML <mark> tag</p>Predefinito <mark> styling
Il colore di sfondo predefinito di <mark> è giallo.
<p> <mark>Default Yellow Highlight</mark></p>Output
Styling personalizzato <mark> con CSS
Naturalmente, come qualsiasi tag HTML di testo, puoi applicare uno stile personalizzato con i CSS. Puoi pensarlo in modo simile a come stilizzeresti un tag <p>.
mark { background: red; color: white;}Output
<mark> vs Other Text HTML Tags
strong
<strong> è usato per indicare un testo che ha una forte importanza rispetto al testo circostante, come un avvertimento o un errore. Semanticamente, la sua importanza. Appare in grassetto
b
<b> è molto simile a <strong> in quanto appare anche in grassetto. Tuttavia, a differenza di esso, non trasmette realmente alcuna importanza ed è più una cosa stilistica che semantica.
em
<em> è usato per sottolineare l’enfasi su una parola particolare. Appare come un corsivo
mark
<mark> evidenzia semplicemente la rilevanza di un certo pezzo di testo. Prima dell’esistenza di questo tag, molti hanno usato em o strong per dare al contenuto evidenziato un significato semantico. Bene, non più! Se hai bisogno di evidenziare, usa questo tag 🌟
Perché il tag HTML semantico è importante
La ragione per cui non usi semplicemente i tag <div> ovunque è perché non sono semantici. Potresti essere come me quando ho iniziato a imparare la programmazione – chi se ne frega di essere semanticamente corretto 🙄. Sbagliato ❌. Infatti, i motori di ricerca come Google lo fanno! Perché la semantica trasmette il significato del tuo sito. Quando i robot di ricerca strisciano il tuo sito, sanno cosa c’è. In altre parole, ding ding ding sul tuo SEO o ottimizzazione dei motori di ricerca 🏆
Un’altra ragione per essere semanticamente corretti è l’accessibilità. Molti degli strumenti di accessibilità si basano sulla semantica dei tag per convertire il tuo sito in significato per l’utente umano che lo usa (cioè i lettori di schermo). Ecco un’analogia. Ricordate ai tempi in cui avevamo il computer che leggeva il testo di un sito. Suonava super robotico e strano 🤖. Senza la giusta semantica, è proprio così. Funziona, certo – ma l’esperienza di ascolto è terribile 😱. Tuttavia, quando si usa la semantica corretta, è come ascoltare Siri. Suona molto più umano perché ha tutte le diverse inflessioni, i cambiamenti di tono, e sa anche quando fare una pausa. E questo è il tipo simile di esperienza migliore che si può ottenere quando si usano tag HTML semanticamente corretti 👍
Tag HTML5 e SEO
Voglio però sottolineare una cosa.
John Mueller di Google ha menzionato questo in una risposta su Twitter:
Ha certamente senso usare HTML5 correttamente se si può, non ci sono svantaggi SEO nel farlo :).
Ecco cosa ho capito da questo. Sia che usiate o meno i tag HTML5, non farà male al vostro posizionamento nei risultati di ricerca di Google. Tuttavia, questo significa che dovresti usare i tag HTML5. Per niente! I vantaggi dell’accessibilità sono ancora lì. E alcuni tag HTML5 hanno un comportamento del browser davvero interessante e aprono il tuo utente a funzionalità più avanzate che non aveva prima 🤩
Problemi di accessibilità
Va bene, spero di averti trasmesso con successo l’importanza dei tag HTML semantici. E ora puoi capire come <mark> non serve semplicemente a dare stile ai testi, ma è semanticamente una buona cosa.
Ma c’è qualche preoccupazione per la sua accessibilità. Purtroppo, l’uso del tag <mark> non è annunciato dalla maggior parte degli screen reader nelle sue impostazioni predefinite. Ma buone notizie, c’è un modo per aggirarlo. Potete usare la proprietà del contenuto CSS e lo pseudo-elemento per fare un annuncio.
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;}Quindi cosa farà lo screen reader qui. Quando incontra del testo che è avvolto nel tag <mark>, annuncerà “highlight start” seguito dal testo all’interno del tag. e poi annuncerà “highlight end” una volta che il tag mark finisce.
MA…
Nota bene: se hai molti di questi “annunci”, può essere molto prolisso e aggiungere a volte fastidiose informazioni non necessarie. Il che può indurre alcuni utenti di screen reader a disattivare questa funzione. Quindi, la lezione qui è. “Da un grande potere derivano grandi responsabilità 🕷”. Non abusate di questa tecnica e applicatela SOLO nei casi in cui NON conoscere il contenuto evidenziato può influire negativamente sulla comprensione dell’utente.
Caso d’uso per <mark>
La parte divertente ora! Vediamo alcuni casi d’uso per <mark>:
Caso d’uso: Risultato della ricerca
Ecco un caso popolare. Puoi usarlo per evidenziare il termine che un utente ha cercato.
<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: Citazioni
È ottimo per fornire evidenziazioni per la citazione (<q>) e la citazione in blocco (<blockquote>).
<p>According to Samantha, <q>Vue is <mark>AWESOME</mark></q></p>Output
