Se alguma vez precisar de marcar texto dentro de um parágrafo, é melhor usar a tag <mark>. É a versão HTML de um marcador amarelo. Sempre usei um <span> tag com algum estilo CSS salpicado nele, não percebendo que esta opção mais semântica existia. HTML5 está repleto de todo o tipo de guloseimas, Estou certo 😆
<p> <mark>Highlight</mark> text with HTML <mark> tag</p>Por defeito <mark> styling
A cor de fundo predefinida de <mark> é amarela.
<p> <mark>Default Yellow Highlight</mark></p>Saída
p>
Estilismo Personalizado < marca> com CSS
Of course, como qualquer tag HTML de texto, pode aplicar um estilo personalizado com CSS. Pode pensar nisso de forma semelhante à forma como estilizaria um <p> tag.
mark { background: red; color: white;}Saída
p>
<mark> vs Other Text HTML Tags
strong
<strong> é usado para indicar texto que tem forte importância do que o texto circundante, tal como um aviso ou erro. Semanticamente, a sua importância. Aparece como negrito
b
<b> é muito semelhante a <strong> como também aparece como negrito. Contudo, ao contrário dele, não transmite realmente qualquer importância e é mais uma coisa estilística do que semântica.
em
<em> é utilizado para enfatizar uma palavra em particular. Aparece como itálico
marca
<mark> apenas realça a relevância de uma determinada peça de texto. Antes da existência desta etiqueta, muitos utilizaram em ou strong para dar ao conteúdo destacado algum significado semântico. Bem, já não! Se precisar de destacar, use esta tag 🌟
Porque é que a tag HTML semântica é importante
A razão pela qual não usa apenas <div> tags em todo o lado é porque elas não são semânticas. Talvez sejam como eu quando comecei a aprender programação – quem se preocupa em ser semanticamente correcto 🙄. Errado ❌. Na verdade, motores de busca como o Google fazem! Porque a semântica transmite significado sobre o seu site. Quando os robots de pesquisa rastejam pelo seu site, saberão o que se passa. Por outras palavras, ding ding ding no seu SEO ou optimização de motores de busca 🏆
Outra razão para ser semanticamente correcto é a acessibilidade. Muitas das ferramentas de acessibilidade dependem da semântica das etiquetas para converter o seu sítio em significado para o utilizador humano que o utiliza (ou seja, leitores de ecrã). Aqui está uma analogia. Recorde-se dos tempos em que recebíamos o texto lido por computador a partir de um sítio. Parecia super robótico e estranho 🤖. Sem a semântica adequada, é exactamente assim. Funciona, claro – mas a experiência de audição é terrível 😱. No entanto, quando se usa a semântica adequada, é como ouvir Siri. Soa muito mais humano-y porque tem todas as inflexões diferentes, muda de tom, e até sabe quando fazer uma pausa. E este é o tipo semelhante de melhor experiência que se pode obter quando se usam etiquetas HTML semanticamente correctas 👍
etiqueta HTML5 e SEO
Eu, no entanto, quero assinalar uma coisa.
O John Mueller do Google mencionou isto numa resposta do Twitter:
p>Faz certamente sentido usar HTML5 correctamente se puder, não há nenhuma desvantagem de SEO em fazê-lo :).
Aqui está o que eu depreendo disto. Quer use ou não tags HTML5, não prejudicará a sua classificação de resultados de pesquisa no Google. No entanto, isso significa que deve usar as etiquetas HTML5. De modo algum! Os benefícios da acessibilidade ainda existem. E algumas etiquetas HTML5 têm um comportamento de browser realmente interessante e abre o seu utilizador a uma funcionalidade mais avançada do que não tinha antes de 🤩
Preocupações de Acessibilidade
Muito bem, espero ter-lhe transmitido com sucesso a importância das etiquetas HTML semânticas. E pode agora compreender como <mark> não é simplesmente estilo de textos, mas é semanticamente uma coisa boa.
Mas! há alguma preocupação com a sua acessibilidade. Infelizmente, o uso da tag <mark> não é anunciado pela maioria dos leitores de ecrã nas suas configurações padrão. Mas boas notícias, há uma forma de a contornar. Pode usar a propriedade de conteúdo CSS e pseudo-elemento para fazer um anúncio.
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;} Então o que o leitor de ecrã fará aqui. Quando encontrar texto embrulhado na tag <mark>, anunciará “highlight start” seguido do texto dentro da tag. e depois anunciará “highlight end” assim que a tag terminar.
MAS…
Nota: se tiver um monte destes “anúncios”, pode ser muito verboso e acrescentar informações desnecessárias por vezes irritantes. O que pode fazer com que alguns utilizadores de leitores de ecrã desliguem esta funcionalidade. Portanto, a lição aqui é. “Com grande poder vem uma grande responsabilidade 🕷”. Não abusar desta técnica e aplicá-la APENAS em casos em que NÃO saber o conteúdo realçado pode afectar negativamente a compreensão para o utilizador.
Usar Caso para < marca>
A parte divertida agora! Vamos pegar em alguns casos de uso para <mark>:
Caso de Uso: Resultado da Pesquisa
Aqui é um caso popular. Pode usá-lo para destacar o termo que um utilizador procurou.
<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>Saída
p>>>
Código Amostra Ouptut
Usar Caso: Citações
É óptimo fornecer destaques para citação (<q>) e citação em bloco (<blockquote>).
<p>According to Samantha, <q>Vue is <mark>AWESOME</mark></q></p>Saída
