HTML5 - Elementos de marcação de texto

Neste artigo, aprenderemos sobre marcação de texto, títulos, formatação de código, links e elementos de citação em HTML.

Antes da explicação, é importante saber que a marcação de texto em HTML é usada para marcar a semântica do texto e não para formatação visual (apresentação). No entanto, alguns elementos de formatação podem alterar o formato visual do texto.

As tags HTML são para marcação (principalmente semântica) e não para apresentação.

Elementos de Formatação de Texto

Se você precisa destacar um texto, uma palavra ou caractere de maneira diferente, existem alguns elementos:

Elemento p para Parágrafos

Todos os parágrafos (nem todos os textos) devem estar dentro de um elemento de parágrafo.

Aqui está um trecho de código:

<p>
    A tag p é usada para criar parágrafos. Ela formata o conteúdo como um parágrafo e não quebra linhas por padrão.
</p>
<p>Um segundo parágrafo estará em uma nova linha.</p>

O resultado deste código é:

Elemento small para Texto Menor

Primeiramente, não recomendo o uso do elemento small porque ele não tem significado semântico, e toda formatação deve ser feita com CSS.

O elemento small permite que um texto dentro de suas tags de abertura e fechamento seja menor do que o restante do texto.

Aqui está um trecho de código:

<p>
    É possível indicar que uma palavra será <small>menor</small> do que as outras.
</p>

O resultado deste código é:

Elemento strong para Conteúdo Importante

Se você tiver palavras ou textos importantes, é bom usar o elemento strong. Observe que strong geralmente é em negrito, mas isso não é relevante; pense apenas na semântica.

E o Elemento b?

O elemento b é para conteúdos que merecem atenção, mas não são mais importantes do que o restante do texto, e não é necessário alterar a voz ou o tom em leitores de tela. Um exemplo comum de uso é palavras-chave em um texto.

Aqui está um trecho de código:

<p>
    Se eu quiser indicar que algo é <strong>importante</strong>, posso usar a tag strong.
    <br />Mas também existe uma tag para <b>negrito</b>, que é a tag b. Qual é a diferença?
</p>

O resultado do trecho de código é:

Elemento em para Ênfase

Se você precisa de mais ênfase em um conteúdo específico, use o elemento em. Esse conteúdo não é mais importante do que o restante do texto, pois para importância, usamos strong. Observe que em geralmente é em itálico, mas isso não é relevante; pense apenas na semântica.

E o Elemento i?

O elemento i é para voz ou tom alternativo em leitores de tela ou termos específicos, como designação taxonômica, um termo técnico ou uma frase idiomática de outro idioma. É importante observar que termos em diferentes idiomas do texto principal geralmente devem estar em itálico, mas o itálico deve ser indicado no CSS. No HTML, termos ou textos em diferentes idiomas devem ser anotados com o atributo lang.

Aqui está um trecho de código:

<p>
    Se eu quiser indicar que algo é <em>ênfase</em>, posso usar a tag em.
    <br />Mas também existe uma tag para <i>itálico</i>, que é a tag i. Qual é a diferença?
</p>

O resultado do trecho de código é:

Elemento mark para Destacar Conteúdo

O elemento mark é usado para destacar termos em um texto sem significado semântico.

Aqui está um trecho de código:

<p>Se você deseja <mark>destacar</mark> um texto, use mark.</p>

O resultado do trecho de código é:

Títulos

Para títulos em seu texto, use h1, h2, h3, h4, h5 e h6. Lembre-se de que os títulos são hierarquias, como nas figuras abaixo. Portanto, h2 só existe se houver um h1 antes, h3 só existe se houver um h2 antes e assim por diante. Recomendo que haja apenas um h1 por página/documento (ou por seção ou artigo).

• h1 para o título principal da página ou seção;
• h2 para um subtítulo;
• h3 para um sub-subtítulo;
• h4 para um sub-sub-subtítulo;
• h5 para um sub-sub-sub-subtítulo;
• h6 para um sub-sub-sub-sub-subtítulo;

Alguns títulos em visualização em árvore:

Alguns títulos em outra visualização em árvore:

Observe que cada título aparece em um tamanho, mas isso não é importante no HTML; pense na semântica e na ordem de cada título. O tamanho pode ser alterado no CSS.

Aqui está um trecho de código:

<h1>Título Nível 1</h1>
<h2>Título Nível 2 - subtítulo h1</h2>
<h3>Título Nível 3 - subtítulo h2</h3>
<h4>Título Nível 4 - subtítulo h3</h4>
<h5>Título Nível 5 - subtítulo h4</h5>
<h6>Título Nível 6 - subtítulo h5</h6>

O resultado do trecho de código é:

Formato de Código

Se você precisa mostrar códigos ou texto sem formatação, pode usar os elementos pre e code.

pre é para um bloco de texto pré-formatado, onde espaços são preservados e a fonte pode ser monoespaçada. Outro elemento é code para códigos de programação. Observe que o código não oferece destaque de sintaxe; para isso, use código JavaScript + CSS, como o Highlight.js.

Geralmente, os códigos de computador em linha são marcados com o elemento code, e os blocos de códigos de computador são marcados com os elementos pre e code.

Aqui está um trecho de código:

<p>A função <code>printf</code> imprime uma mensagem na tela do usuário</p>
<pre>
  <code>
int main(){
  printf("Mensagem");

  return 0;
}
  </code>
</pre>

O resultado do trecho de código é:

Link para Outra Página

Um elemento muito útil em HTML é a tag a para links para outras páginas ou elementos na web (como imagens, textos, arquivos etc.). Um link pode ser um texto, um botão, um ícone, uma imagem, uma seção ou qualquer outro elemento.

Aqui está um trecho de código:

<p>
  <a href="https://google.com.br">Google</a>
</p>

O resultado do trecho de código é:

Elementos de Citação

Podemos usar cite e blockquote para citação. cite indica os autores, e blockquote cria citações.

Aqui está um trecho de código:

<blockquote>
  "A última tag aberta deve ser a primeira a ser fechada."
</blockquote>
<cite>Arthur Assuncao, 2023</cite>

O resultado do trecho de código é:

O Que Vem Aí

Nos próximos artigos, você explorará os elementos de bloco e a web semântica. Fique ligado!

Referências

• HTML - Padrão Atualizado em 11 de setembro de 2023