Tag HTML <mark>
Il tag HTML <mark> evidenzia il testo come rilevante nel contesto. Scopri i casi d'uso, gli attributi e lo stile con esempi.
Il tag <mark> è uno degli elementi HTML5. Contrassegna uno span di testo come rilevante o evidenziato come riferimento, così come si farebbe passando un evidenziatore su delle parole di una pagina stampata. I browser lo visualizzano con uno sfondo giallo per impostazione predefinita.
Questa pagina spiega cosa significa <mark> semanticamente, quando usarlo al posto di un semplice <span>, i tre classici casi d'uso e come si confronta con <strong>, <b> ed <em>.
Perché usare <mark> invece di <span>?
Un <span> è un contenitore generico privo di significato — è puramente un aggancio per lo stile. Si potrebbe dare a un <span> uno sfondo giallo e sembrerebbe evidenziato, ma per un lettore di schermo, un motore di ricerca o qualsiasi altra macchina rimarrebbe comunque testo ordinario.
<mark> è diverso perché porta con sé la semantica: dice al browser e alle tecnologie assistive "questa parte del testo è notevole o rilevante nel contesto corrente." L'evidenziazione fa parte del significato del documento, non solo della sua apparenza.
Usa questa regola pratica:
- Se l'evidenziazione trasmette significato (questo testo corrisponde alla ricerca, questo passaggio è il punto di riferimento) → usa
<mark>. - Se vuoi solo uno sfondo colorato a scopo decorativo → usa un
<span>con CSS.
Quando usare <mark>
La specifica descrive tre scenari principali:
- Evidenziazione dei risultati di ricerca. Contrassegna le parole in un passaggio che corrispondono a ciò che l'utente ha cercato, in modo che possa individuare rapidamente il punto pertinente.
- Rilevanza all'interno di una citazione. Quando si cita un testo scritto da qualcun altro,
<mark>evidenzia la parte che è rilevante per il motivo per cui si sta citando — un'enfasi che l'autore originale non ha aggiunto. - Contenuto evidenziato dall'utente. Rappresenta il testo che il lettore ha evidenziato, simile alla funzione "evidenziazione" in un'app di lettura o annotazione.
Non usare mai <mark> per la colorazione sintattica o puramente visiva. Per questo, usa invece un <span> con il CSS appropriato.
Sintassi
Il tag <mark> viene in coppia. Il contenuto è scritto tra i tag di apertura (<mark>) e di chiusura (</mark>).
Esempio del tag HTML <mark>:
Tag HTML <mark>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>Risultato
Esempio reale: evidenziazione delle corrispondenze di ricerca
Immagina una pagina di ricerca in cui l'utente ha cercato la parola highlight. Avvolgi ogni parola corrispondente in un paragrafo con <mark> in modo che il risultato sia facile da scansionare. L'esempio seguente personalizza anche il colore di evidenziazione e aggiunge una regola @media print, poiché lo sfondo giallo predefinito viene spesso eliminato quando una pagina viene stampata:
<!DOCTYPE html>
<html>
<head>
<title>Search results</title>
<style>
/* Custom highlight color instead of the default yellow */
mark {
background-color: #c8f7c5;
color: #14532d;
padding: 0 2px;
border-radius: 3px;
}
/* Make sure highlights are still visible when printed */
@media print {
mark {
background-color: transparent;
color: inherit;
text-decoration: underline;
}
}
</style>
</head>
<body>
<p>
You can <mark>highlight</mark> search terms so the user finds them
fast. Each <mark>highlight</mark> marks where the query matched.
</p>
</body>
</html><mark> e altri tag HTML
Diversi elementi HTML sembrano simili a <mark> ma hanno significati diversi. Scegliere quello giusto è importante per l'accessibilità e la SEO, perché ciascuno comunica un'intenzione distinta ai browser e alle tecnologie assistive.
Il tag HTML <strong>
Il tag <strong> contrassegna il testo come avente forte importanza, serietà o urgenza — ad esempio un errore o un avviso. I browser lo visualizzano in grassetto per impostazione predefinita. Usa <strong> quando il testo conta, non solo quando deve essere evidenziato.
Il tag HTML <b>
Il tag <b> visualizza anch'esso il testo in grassetto, ma a differenza di <strong> non implica importanza. Attira l'attenzione solo per ragioni stilistiche — come parole chiave o nomi di prodotti — senza implicare che il testo sia più significativo.
Il tag HTML <em>
Il tag <em> pone enfasi su una parola, nel modo in cui si cambia il tono della voce quando si parla. Viene visualizzato in corsivo per impostazione predefinita e può modificare il significato di una frase.
In breve: <mark> = rilevante/evidenziato qui, <strong> = importante, <b> = grassetto visivo, nessun significato, <em> = enfasi parlata.
Attributi
Il tag <mark> non ha attributi specifici — accetta solo gli attributi globali e gli attributi evento.
Come applicare stile a un tag HTML <mark>
Puoi modificare lo sfondo giallo predefinito usando la proprietà CSS background-color:
mark {
background-color: #ffeb3b;
color: #333;
}