Curso de HTML / Dar significado ao texto: ênfase, citações, abreviaturas e código

Os elementos de texto HTML descrevem por que um trecho é distinto, e não apenas sua aparência. Use em para ênfase, strong para importância, q e blockquote para citações, abbr para abreviações e code para código.

Ênfase e importância: em e strong

Use em para destacar uma palavra em sua frase. Use strong quando o próprio conteúdo tiver uma importância especial, como em um aviso. Os navegadores frequentemente exibem esses elementos em itálico e negrito, respectivamente, mas seus significados não são definidos por esses estilos.

<p>Salve o arquivo <em>antes de</em> atualizar o navegador.</p>

<p><strong>Não compartilhe sua senha.</strong></p>

A primeira frase enfatiza a ordem das ações; a segunda indica um aviso. Se você precisar apenas de um tratamento visual, use CSS em vez de adicionar elementos semânticos sem significado correspondente.

Citações curtas e citações em bloco: q e blockquote

Use q para uma citação curta dentro de uma frase e blockquote para uma citação que constitua um bloco separado. As frases seguintes foram escritas apenas para demonstrar os elementos.

<p>A instrução indica <q>Salve suas alterações</q>.</p>



<blockquote>

  <p>Planeje a estrutura do documento antes de redigir seu conteúdo.</p>

</blockquote>

Um navegador pode fornecer aspas para q, então não adicione um segundo par ao redor dele. Para uma citação real, verifique a redação e identifique a sua fonte no texto visível. O atributo cite em blockquote não exibe automaticamente uma fonte para os leitores.

Explique as abreviações com abbr

abbr identifica uma abreviação. Escreva por extenso um termo desconhecido no texto ao redor na primeira ocorrência; um leitor não deve precisar passar o mouse sobre o atributo title para entender seu significado.

<p>HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>) define a estrutura de uma página web.</p>

Você não precisa repetir o termo completo em cada ocorrência subsequente no mesmo contexto.

Código e entrada do usuário: code e kbd

Use code para um pequeno trecho de código ou um nome de arquivo discutido como código. Use kbd para teclas ou qualquer outra entrada que o usuário precise fornecer. Os sinais de menor e maior exibidos como código seguem as regras de escape de caracteres na Sintaxe HTML.

<p>Salve <code>index.html</code> com <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>

Para código em várias linhas que deve manter o espaçamento, o HTML pode colocar code dentro de pre. Os blocos de código deste curso usam pre e code, com uma classe que identifica a linguagem para o realce de sintaxe.

Comparar a semântica em um documento completo

Salve este documento completo como text-semantics.html em UTF-8. A citação é uma instrução fictícia escrita para demonstrar o elemento.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercício sobre a semântica do texto</title>
</head>
<body>
  <h1>Uma instrução curta</h1>
  <p>Verifique o resultado <em>depois de</em> salvar o arquivo.</p>
  <p><strong>Mantenha o arquivo original.</strong></p>
  <p>Uma instrução fictícia indica <q>Salve suas alterações</q>.</p>
  <p>Este documento usa HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>).</p>
  <p>Salve com <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>
  <pre><code>&lt;p&gt;Frase de exemplo&lt;/p&gt;</code></pre>
</body>
</html>

1. Identifique a ênfase, o aviso, a citação e a abreviação lendo o texto ao redor.
2. Verifique se o <p> final é exibido como código, em vez de interpretado como um parágrafo.
3. Substitua temporariamente strong por span e depois restaure-o para a mensagem importante. Isso compara o significado do elemento com sua apresentação padrão.

A referência do elemento code da MDN explica o elemento usado para representar o código.

Escolha o elemento que corresponda ao significado.

• Use em para ênfase e strong para importância.
• Use q para uma citação em linha e blockquote para uma citação independente.
• Use abbr para uma abreviação e explique os termos desconhecidos em um texto legível.
• Distingua o código com code e as entradas do usuário com kbd.

Consulte a referência de elementos HTML do MDN para o conteúdo permitido e a sintaxe detalhada de cada elemento. A distinção entre significado e apresentação também se aplica em Princípios básicos de acessibilidade: Títulos, Links, Imagens e Teclado.