HTML <mark> tag
A tag HTML <mark> destaca texto como relevante no contexto atual. Veja usos, atributos e como estilizar com exemplos.
A tag <mark> é um dos elementos HTML5. Ela marca um trecho de texto como relevante ou destacado para referência, da mesma forma que você passaria um marcador fluorescente sobre palavras numa página impressa. Os navegadores a renderizam com fundo amarelo por padrão.
Esta página explica o que <mark> significa semanticamente, quando utilizá-la em vez de um simples <span>, os três casos de uso clássicos e como ela se compara com <strong>, <b> e <em>.
Por que <mark> e não um <span>?
Um <span> é um contêiner genérico sem significado — é apenas um gancho de estilização. Você poderia dar a um <span> um fundo amarelo e ele pareceria destacado, mas para um leitor de tela, mecanismo de busca ou qualquer outra máquina, ainda seria texto comum.
<mark> é diferente porque carrega semântica: ela informa ao navegador e às tecnologias assistivas "esta parte do texto é notável ou relevante no contexto atual." O destaque faz parte do significado do documento, não apenas de sua aparência.
Use esta regra prática:
- Se o destaque transmite significado (este texto correspondeu à busca, esta passagem é o ponto sendo abordado) → use
<mark>. - Se você quer apenas um fundo colorido para decoração → use um
<span>com CSS.
Quando usar <mark>
A especificação descreve três cenários principais:
- Destaque de resultados de busca. Marque as palavras em uma passagem que correspondem ao que o usuário pesquisou, para que ele possa encontrar rapidamente o trecho relevante.
- Relevância dentro de uma citação. Ao citar um texto escrito por outra pessoa,
<mark>destaca a parte que é relevante para o motivo pelo qual você está citando — uma ênfase que o autor original não adicionou. - Conteúdo destacado pelo usuário. Represente texto que o leitor destacou, semelhante ao recurso de "destaque" em um aplicativo de leitura ou anotação.
Nunca use <mark> para realce de sintaxe ou coloração puramente visual. Para isso, use um <span> com CSS apropriado.
Sintaxe
A tag <mark> vem em pares. O conteúdo é escrito entre as tags de abertura (<mark>) e fechamento (</mark>).
Exemplo da 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>Resultado
Exemplo prático: destacar correspondências de busca
Imagine uma página de busca onde o usuário pesquisou a palavra highlight. Você envolve cada palavra correspondente em um parágrafo com <mark> para que o resultado seja fácil de visualizar. O exemplo abaixo também personaliza a cor do destaque e adiciona uma regra @media print, pois o fundo amarelo padrão é frequentemente removido ao imprimir uma página:
<!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 outras tags HTML
Vários elementos HTML se parecem com <mark>, mas significam coisas diferentes. Escolher o correto é importante para acessibilidade e SEO, pois cada um comunica uma intenção distinta aos navegadores e às tecnologias assistivas.
A tag HTML <strong>
A tag <strong> marca o texto como tendo forte importância, seriedade ou urgência — por exemplo, um erro ou um aviso. Os navegadores a renderizam em negrito por padrão. Use <strong> quando o texto importa, não apenas quando deve ser destacado.
A tag HTML <b>
A tag <b> também renderiza em negrito, mas, ao contrário de <strong>, não carrega nenhuma importância. Ela chama atenção apenas por razões estilísticas — como palavras-chave ou um nome de produto — sem implicar que o texto seja mais significativo.
A tag HTML <em>
A tag <em> coloca ênfase em uma palavra, da forma como você muda o tom de voz ao falar. É renderizada em itálico por padrão e pode alterar o significado de uma frase.
Em resumo: <mark> = relevante/destacado aqui, <strong> = importante, <b> = visualmente negrito, sem significado, <em> = ênfase falada.
Atributos
A tag <mark> não possui atributos específicos do elemento — ela aceita apenas os Atributos Globais e os Atributos de Evento.
Como estilizar uma tag HTML <mark>
Você pode alterar o fundo amarelo padrão usando a propriedade CSS background-color:
mark {
background-color: #ffeb3b;
color: #333;
}