Desenvolvimento HTML

Como utilizar o elemento semântico mark

30 de agosto de 2019

Como utilizar o elemento semântico mark

No post de hoje veremos a importância do elemento semântico mark, que foi originado no HTML5 e tem uma utilização bem particular e única nas páginas web.

elemento semântico mark capa

Como utilizar o elemento semântico mark?

O elemento mark serve para dar destaque a uma parte do nosso código, basicamente isso

Então quando há a necessidade em destacarmos uma parte da página podemos utilizar a tag <mark>

Porém é um destaque de relevância de conteúdo, não é para fins de design ou importância

Pode ser confuso esta questão de importância e relevância, mas entenda relevância como: diretamente alinhado ao conteúdo da página

Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.

Em outras versões do HTML o mesmo caso deveria ser construído por um elemento que não vem com display block como padrão

Um bom candidato seria o <span>, mas mesmo assim teríamos que adicionar um pouco de CSS para as coisas funcionarem da mesma maneira

Não conseguiríamos obter a semântica no código, mas mesmo assim ele seria a melhor escolha para esta situação

Como recomendações de sites relevantes como o MDN, devemos nos atentar para duas situações sobre o uso do mark

Quando queremos destacar um trecho da página mas com valor só de design, devemos utilizar a tag <span> e não <mark>

E não devemos confundir <strong> com <mark>

  • mark: trechos de relevância especial
  • strong: trechos de importância especial

Dito isso, vamos a parte prática de mark

Utilizando mark na prática:

Uma grande referência para o elemento semântico mark, seria por exemplo nos resultados de busca em uma determinada página

Já que o usuário solicitou que ele quer encontrar aquela determinada palavra ou sentença

Podemos envolvê-la em uma tag <mark>, veja um exemplo:

<p>Nós plantamos <mark>cenoura</mark> pois adoramos essa verdura.</p>
<p>A <mark>cenoura</mark> pode ser utilizada tanto para saladas como também para fazer um delicioso bolo.</p>
<p>Além disso, um dos maiores benefícios ao inserir a <mark>cenoura</mark> em sua dieta é: a vitamina A, que é importante para a saúde da visão.</p>
<p>Vai começar a comer <mark>cenoura</mark> também?</p>

Veja o exemplo no navegador:

mark na prática

Perceba que o mark da um highlight nas palavras chave encontradas

Claro que uma adição de CSS seria benéfica para combinar com o layout da página que ele está inserido

obs: Isso pode ser facilmente feito acessando a tag mark na folha de estilo, já que mark é um elemento do HTML

Outra ideia de utilização para o mark, seria destacar em meio a um blockquote uma parte da citação que interessa o usuário

Por exemplo se ele está lendo uma notícia sobre política, e um entrevistado faz uma citação que envolva diretamente o assunto principal

Podemos utilizar o elemento semântico mark para destacar a parte mais notória desta frase

Isso vai de encontro com a utilização semântica deste elemento

Lembrando sempre que a semântica no código e o código bem escrito são fatores importantes levados em conta pelos mecanismos de busca como o Google

Fazendo que seu site se posicione mais acima dos que não abordam essas boas práticas, legal né? 😀

Conclusão

Vimos que o elemento mark deve ser utilizado em partes do código que representem relevância especial para a página

Importante lembrar que se o detalhe na página é apenas estéticos devemos optar pelo elemento span ao invés de mark

Não devemos confundir strong com mark, strong é para trechos com importância e mark para trechos com relevância

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 😀

Referências: MDN

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x