Indice

<mark>: l'elemento "Mark Text"

L' elemento HTML <mark> rappresenta il testo che è contrassegnato o evidenziato a scopo di riferimento o annotazione, a causa della rilevanza o dell'importanza del passaggio contrassegnato nel contesto di inclusione.

Note d'uso

I casi d'uso tipici per <mark> includono:

  • Quando viene utilizzato in una citazione (<q>) o in una citazione in blocco (<blockquote>), indica generalmente un testo di particolare interesse ma non contrassegnato nel materiale originale o materiale che necessita di un esame speciale anche se l'autore originale non pensava che fosse di particolare importanza. Pensa a questo come usare un evidenziatore in un libro per contrassegnare i passaggi che ritieni interessanti.
  • In caso contrario, <mark> indica una parte del contenuto del documento che potrebbe essere rilevante per l'attività corrente dell'utente. Può essere utilizzato, ad esempio, per indicare le parole che corrispondono a un'operazione di ricerca.
  • Non utilizzare <mark> per l'evidenziazione della sintassi; invece, usa l'elemento <span> con il CSS appropriato applicato.

Nota: non confondere <mark> con l'>elemento <strong>; <mark> è usato per denotare contenuti che hanno un certo grado di rilevanza , mentre <strong> indica intervalli di testo importanti.

Esempi

In questo primo esempio, un elemento <mark> viene utilizzato per contrassegnare del testo all'interno di una citazione di particolare interesse per l'utente.

<blockquote>
È un periodo di guerra civile. Le astronavi ribelli, 
colpendo da una base nascosta, 
hanno vinto la loro prima vittoria 
contro il malvagio Impero Galattico. 
Durante la battaglia, <mark> 
le spie ribelli sono riuscite a rubare piani segreti </mark> 
per l'arma definitiva dell'Impero, 
la DEATH STAR, una stazione spaziale corazzata 
con una potenza sufficiente per distruggere un intero pianeta.
</blockquote>

Problemi di accessibilità

La presenza markdell'elemento non è annunciata dalla maggior parte della tecnologia di lettura dello schermo nella sua configurazione predefinita. Può essere annunciato utilizzando la contentproprietà CSS, insieme agli pseudo-elementi ::before e ::after.

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

mark::before {
  content: "[highlight start]";
}

mark::after {
  content: "[highlight end]";
}

Alcune persone che usano le utilità per la lettura dello schermo disabilitano deliberatamente l'annuncio di contenuti che creano maggiore verbosità. Per questo motivo, è importante non abusare di questa tecnica e applicarla solo in situazioni in cui non conoscere il contenuto è stato evidenziato influirebbe negativamente sulla comprensione.