HTML5 - Elementos de marcação de texto
Tags: webdev, beginners, html
Published: 2023-09-14 14:56:05

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:

```html
<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 é:

![HTML renderizado com o elemento `p`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glnz6fyui8evjahgxeus.png)

## 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:

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

O resultado deste código é:

![HTML renderizado com o elemento `small`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn7iq7jfbbdjkde2in7y.png)

### 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:

```html
<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 é:

![HTML renderizado com os elementos `strong` e `b`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yfrkcjz6c67x7mtvibf.png)

### 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:

```html
<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 é:

![HTML renderizado com os elementos `em` e `i`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtrbwujfhgcz1077o2d7.png)

### 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:

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

O resultado do trecho de código é:

![HTML renderizado com o elemento `mark`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f7krnteb0mxtzxnb7b7.png)

## 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:

![Títulos em visualização em árvore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4lr45s9leybrnsmc50c.png)

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

![Títulos em outra visualização em árvore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qu7977f1b5eeb7n7l5rg.png)



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:

```html
<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 é:

![HTML renderizado para elementos de título](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbjoeataofc7n0xt6ie1.png)

## 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](https://highlightjs.org).

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:

```html
<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 é:

![HTML renderizado para elementos `pre` e `code`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twye1tpcoftb0shrydke.png)

## 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:

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

O resultado do trecho de código é:

![HTML renderizado para elemento `a`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxpio6jtfk08gwrb1sz8.png)

## 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:

```html
<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 é:

![HTML renderizado para elementos `blockquote` e `cite`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4h592woaj9e4gvokgr2w.png)

### 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](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-em-element)