Marca texto colorido com HTML

Atualizado dia 31/05/2015.

A maioria das tags de HTML 5 ainda não funciona do mesmo jeito em todos os navegadores, então temos que usar gambiarras. Um exemplo é a tag <mark>, que colore o background do texto com a cor amarela, da mesma forma que uma caneta marca texto que usamos no papel.

Código:

Já viu como fica um <mark>texto marcado</mark> quando a gente usa essa tag nova?

Resultado:

Já viu como fica um texto marcado quando a gente usa essa tag nova?

Para saber se seu navegador já é compatível, visite a seguinte página nele: web.htmhelen.com/mark.html.

Teoricamente a tag <mark> já deve funcionar perfeitamente nas versões mais recentes de todos os navegadores, mas na prática a teoria é outra.

• Outras cores
• Bug do Internet Explorer
• Bug do Opera

► Outras cores

Para definir outra tonalidade em sua marcação, mude background-color e color na folha de estilos.

a) CSS padrão:

<style>
mark {background-color:#00ff00; color:#000000;}
</style>

b) CSS do Blogger:

mark {background-color:#00ff00; color:#000000;}
]]></b:skin>

c) CSS dentro da própria tag (inline):

Defina dentro da tag <mark style="background-color:salmon; color:lightyellow;">mark</mark> a cor de sua marcação.

Resultado:

Defina dentro da tag mark a cor de sua marcação.

Algumas combinações com fonte preta (#000000):

#ffff00 #f5deb3 #ffd700 #ffa500 #9acd32 #adff2f #00ff7f #00ffff #d8bfd8 #ffc0cb #e6e6fa #ffeecc #ffccee #eeffcc #eeccff #ccffee #cceeff

Algumas combinações com fonte branca (#ffffff):

#7b68ee #00bfff #ee82ee #ff69b4 #ff1493 #d2691e #ff8c00 #f08080 #ff0000 #0000ff #000066 #006666 #006600 #660000

► Bug do Internet Explorer

Fiz vários testes no Internet Explorer 9 e descobri que em alguns blogs a tag não funciona, mas em outras páginas sim. Para não ser refém da instabilidade desse navegador, sempre defina o background na folha de estilos, mesmo que queira manter o tom amarelo [#ffff00].

► Bug do Opera 11

No Opera dá erro quando a gente usa a tag <mark> dentro de um parágrafo <p>. Esse navegador gera INEXPLICAVELMENTE uma quebra de linha antes da primeira palavra marcada.

Código:

<p>Já viu como fica um <mark>texto marcado</mark> no Opera quando a gente usa essa <mark>tag nova?</p>

Resultado:

Já viu como fica um
texto marcado no Opera quando a gente usa essa tag nova?

Fiz centenas de testes para remover essa quebra com CSS, mas não funcionou. O que deu certo foi uma gambiarra: trocar <p> por <div> ou inserir uma tag <div> dentro de <p>.

<p><div>Já viu como fica um <mark>texto marcado</mark> quando a gente usa essa <mark>tag nova?</div></p>

Resultado:

Já viu como fica um texto marcado quando a gente usa essa tag nova?

Nos meus testes com a tag <mark> não identifiquei nenhum bug nos seguintes navegadores:

• Chrome 14
  
• Firefox 6.0
  
• Safari 5.1

Até mais!