Elementos de texto

docs.scrimba.com

A maior parte do que uma pessoa lê em uma página é conteúdo escrito simples: títulos, parágrafos, um aviso em negrito, uma frase citada, um trecho de código. O HTML tem um elemento específico para cada uma dessas funções, e escolher o certo faz mais do que mudar a aparência do texto. Isso diz ao navegador, aos motores de busca e às ferramentas de acessibilidade o que cada trecho de texto realmente é.

Títulos e hierarquia

O HTML te dá seis tamanhos de título, de <h1> até <h6>. Um título é o nome da página ou de uma seção dela. <h1> é o título principal, o grande no topo. <h2> identifica uma seção maior, <h3> uma subseção dentro dela, e assim por diante até <h6>.

Pense em um livro impresso. O título na capa é o <h1>. O título de cada capítulo é um <h2>. Os títulos dentro de um capítulo são <h3>. Você usa os níveis para mostrar o que pertence a quê.

Uma coisa para guardar desde já: não escolha um título porque ele deixa o texto no tamanho que você quer. <h1> até costuma parecer grande, mas sua função é dizer "este é o título principal", não "deixe isso grande". Se você quer um texto grande em algum lugar, isso é trabalho para o CSS mais adiante.

Os seis elementos de título, de <h1> a <h6>, descrevem a hierarquia de um documento: quais partes são seções e quais são subseções. O número é uma posição hierárquica. Ele não diz nada sobre tamanho. <h1> é o topo do esquema, <h2> fica abaixo dele, <h3> abaixo desse.

A regra para criar o hábito desde já é aninhá-los em ordem, sem pular nível. Uma seção com <h2> deve conter subseções <h3>, e não saltar direto para <h4>. Pular níveis para chegar a um tamanho padrão menor é o erro clássico, e é a ferramenta errada: se você quer que um título tenha uma certa aparência, estilize-o com CSS, e deixe o número reservado para representar a posição dele na estrutura.

Os elementos de título definem o esquema do documento: a estrutura ordenada e hierárquica de suas seções, da mesma forma que um sumário organiza tópicos dentro de tópicos. Três regras práticas decorrem disso, e as três são sobre acessibilidade e busca, não sobre aparência.

Primeiro, use apenas um <h1> por página, o verdadeiro título do conteúdo daquela página. É o topo do esquema, e ter exatamente um dá a todas as ferramentas uma referência única e inequívoca sobre o assunto da página.

Segundo, não pule níveis ao descer. Um leitor de tela (software que lê uma página em voz alta para pessoas que não conseguem ver) permite que o usuário abra uma lista de todos os títulos e navegue entre eles, da mesma forma que um leitor com visão passa os olhos rapidamente para achar a seção que quer. Um salto de <h2> para <h4> aparece como um nível faltando nessa lista, e a navegação deixa de fazer sentido.

Terceiro, as posições hierárquicas são semânticas, nunca tamanhos. Motores de busca leem a estrutura de títulos para entender como uma página está organizada, então um <h3> escolhido porque seu tamanho padrão parecia certo, em vez de porque de fato é uma seção de terceiro nível, acaba desinformando silenciosamente tanto o rastreador quanto o leitor de tela. Defina o tamanho no CSS; deixe o número carregar o significado.

<h1>Pão de fermentação natural para principiantes</h1>

<h2>Preparando o fermento</h2>
<p>Um fermento é uma cultura viva de farinha e água.</p>

<h3>Do primeiro ao terceiro dia</h3>
<p>Misture pesos iguais de farinha e água, depois espere.</p>

<h2>Assando seu primeiro pão</h2>
<p>Depois que o fermento estiver ativo, você está pronto para assar.</p>

Um <h1> nomeia a página inteira. Dois títulos <h2> marcam as seções principais, e o <h3> se encaixa perfeitamente dentro da primeira delas. Leia os números dos títulos isoladamente e você já consegue ver a forma do artigo sem ler uma palavra do conteúdo.

JunoTítulos e hierarquia Seis títulos, de <h1> até <h6>, e <h1> é o único título principal no topo. Os demais identificam suas seções e subseções. A armadilha em que caí no início: não escolha um título porque ele parece grande, isso é trabalho do CSS. O número diz o que a coisa é, não o tamanho dela.

JunoTítulos e hierarquia Títulos organizam seu conteúdo hierarquicamente, eles não definem o tamanho. Aninhe-os em ordem e não pule um nível para cair num tamanho padrão menor, essa é a pegadinha que engana as pessoas. Precisa que um título tenha uma certa aparência? Estilize com CSS e deixe o número descrever a estrutura.

JunoTítulos e hierarquia Um <h1> por página, nenhum nível pulado ao descer, e nunca escolha uma posição hierárquica pelo tamanho. Usuários de leitor de tela navegam entre títulos como num sumário, e motores de busca leem esse mesmo esquema, então um título escolhido pela aparência confunde os dois. Mantenha o número semântico e deixe a aparência no CSS.

Parágrafos e quebras de linha

Um bloco de texto comum vai em um parágrafo, o elemento <p>. Envolva cada parágrafo no seu próprio <p>...</p> e o navegador coloca um pequeno espaço acima e abaixo, de modo que os parágrafos ficam separados como em um livro.

<p>Pão precisa de quatro coisas: farinha, água, sal e tempo.</p>
<p>Acerte isso e o resto é paciência.</p>

Note que apertar Enter no seu arquivo HTML não faz nada na página. O navegador ignora as quebras de linha e os espaços extras que você digita; ele só se importa com as tags. É por isso que você precisa do <p> para separar parágrafos, em vez de simplesmente digitá-los em linhas diferentes.

Se você realmente precisa que uma linha quebre dentro de um parágrafo, como as linhas de um endereço ou um poema curto, existe o elemento <br> para isso. Ele força uma única quebra de linha e nada mais.

O elemento <p> contém um parágrafo de texto corrido, e é o lugar padrão para o conteúdo do corpo da página. O navegador reduz qualquer sequência de espaços, tabulações e quebras de linha no seu código para um único espaço, então a disposição do seu texto na página vem das tags, não de como você formata o arquivo.

O elemento <br> força uma quebra de linha dentro de um bloco de texto. É um elemento vazio, sem tag de fechamento, e só é apropriado quando a quebra faz parte do próprio conteúdo: endereços postais, versos de um poema, um bloco de assinatura.

<p>
  Nadia Rahman<br>
  14 Orchard Lane<br>
  Bristol BS1 4TR
</p>

Onde o <br> erra é como ferramenta de espaçamento. Empilhar <br><br> para afastar dois parágrafos parece funcionar, mas é o instinto errado: são dois parágrafos, então são dois elementos <p>, e o espaço entre eles é apresentação, o que pertence ao CSS. Recorrer ao <br> para criar espaço mistura estrutura e estilo, exatamente o hábito que vale a pena quebrar desde já.

<p> é um elemento block-level (de bloco), o que significa que ele começa em uma nova linha e ocupa toda a largura disponível, empilhando-se verticalmente com os parágrafos ao redor. É o contêiner correto para um trecho de texto corrido, e o navegador aplica o colapso de espaços em branco ao seu conteúdo: qualquer sequência de espaços, tabulações e quebras de linha no código se torna um único espaço na saída renderizada. É por isso que a formatação do código-fonte pode ser feita da forma que for mais legível para você.

O <br> representa uma quebra de linha que pertence ao próprio conteúdo. Não é um espaçamento de layout. Essa distinção tem um custo concreto em termos de acessibilidade. Um leitor de tela trata o limite de um <p> como o fim de um parágrafo e faz uma pausa correspondente, dando ao usuário uma noção de onde um pensamento termina e o próximo começa. Uma sequência de elementos <br> não produz esse limite: o software lê tudo de forma contínua, e a estrutura que um leitor com visão percebe no espaçamento fica invisível para quem escuta. Parágrafos vazios usados como espaçadores têm o mesmo problema: alguns leitores de tela os anunciam como vazios, outros os ignoram, e de qualquer forma o espaço que você pretendia não é comunicado.

A regra que resiste ao uso em projetos reais: <br> só quando a quebra faz parte dos dados (um endereço, um verso, uma linha em um rótulo de formulário), e o espaçamento vertical entre blocos sempre no CSS com margin. A estrutura carrega o significado; o estilo carrega a aparência, e mantê-los separados é o que torna uma página tanto sustentável quanto acessível.

JunoParágrafos e quebras de linha Cada bloco de texto vai no seu próprio <p>...</p>, e é isso que coloca espaço entre parágrafos. O navegador ignora os Enters e espaços que você digita, então são as tags que fazem o trabalho. Use <br> só quando uma linha realmente precisa quebrar no meio de um parágrafo, como em um endereço.

JunoParágrafos e quebras de linha<p> para um parágrafo, e o navegador colapsa os espaços do seu código-fonte, então formatar o arquivo não muda nada na página. <br> é para quebras que fazem parte do conteúdo, como um endereço, nunca para afastar coisas. Dois <br> para criar um espaço é o sinal claro de que o espaçamento escapou do CSS.

JunoParágrafos e quebras de linha<p> é um bloco que dá ao leitor de tela um limite real de parágrafo para pausar; uma sequência de <br> não dá nada disso, e a estrutura desaparece para quem está escutando. Então <br> só quando a quebra faz parte dos dados, e todo espaçamento vertical no CSS com margin. Parágrafos vazios como espaçadores têm o mesmo problema de acessibilidade, evite-os também.

Ênfase: <strong> e <b>, <em> e <i>

Dois elementos deixam o texto em negrito, e dois o deixam em itálico. <strong> e <b> renderizam em negrito; <em> e <i> renderizam em itálico. Então são quatro tags, duas aparências.

<p><strong>Atenção:</strong> o forno está muito quente.</p>
<p>Você precisa sovar a massa <em>bem</em>.</p>

Por agora, use <strong> quando um trecho de texto é importante, como um aviso, e <em> quando quiser dar ênfase a uma palavra da forma que sua voz faria se você lesse em voz alta. Esses são os dois que você vai usar na maior parte do tempo, e o navegador os torna negrito e itálico para você.

Os quatro elementos se dividem em dois pares, e a divisão está entre significado e aparência. <strong> e <em> são semânticos: eles dizem algo sobre o texto. <b> e <i> são apresentacionais: eles só mudam a aparência.

Use <strong> quando o conteúdo carrega importância, seriedade ou urgência: um aviso, uma instrução crítica. Use <em> para ênfase de destaque, a palavra na qual você apoiaria a voz se lesse a frase em voz alta, o que pode mudar seu significado. Ambos acabam renderizando em negrito e itálico, respectivamente, mas você os escolhe pelo que significam.

<b> e <i> são para os casos em que você quer negrito ou itálico sem nenhuma importância ou destaque por trás disso. Um <b> para uma palavra-chave para a qual você quer chamar a atenção, um <i> para o nome de um navio ou uma expressão estrangeira. Eles marcam o texto como estilisticamente diferenciado, sem afirmar que ele importa mais.

<p><strong>Não</strong> abra a válvula enquanto o sistema estiver pressurizado.</p>
<p>Ela sussurrou que a ideia tinha sido <em>dela</em>, não dele.</p>
<p>O atalho de teclado é <b>Ctrl</b> mais <b>S</b>.</p>
<p>Atravessamos de balsa no <i>Lady Marion</i>.</p>

Se você só lembrar de uma coisa: <strong> e <em> significam algo, <b> e <i> só mostram algo. Quando o texto realmente importa, use o par semântico.

Todos os quatro renderizam da mesma forma que um navegador faria por padrão, negrito ou itálico, então na tela eles são intercambiáveis. A diferença está no que eles comunicam a qualquer coisa que não esteja olhando para os pixels, e é aí que a escolha realmente importa.

<strong> marca importância: conteúdo sério, urgente, ou que não deve passar despercebido. <em> marca ênfase de destaque: a palavra cujo peso muda o significado da frase (compare "me liga amanhã" com "me liga amanhã"). Um leitor de tela pode agir com base nisso. Muitos vão mudar o tom ou o ritmo em texto enfatizado, e um <strong> pode ser destacado de forma diferente do texto comum, então a importância que você codificou é de fato transmitida a quem não está vendo o negrito. Aninhe-os para indicar grau: <strong> dentro de <strong> lê-se como maior importância, <em> dentro de <em> como destaque mais forte.

<b> e <i> são o par apresentacional, e são a escolha correta com mais frequência do que a recomendação de "evite-os" sugere. Suas definições reais são restritas. <b> chama atenção para um texto por um motivo prático sem nenhuma importância adicional: uma palavra-chave em um resumo, o nome de um produto em uma resenha. <i> marca texto em uma voz ou tom alternativo: um termo técnico na primeira ocorrência, um nome taxonômico como Homo sapiens, uma expressão em outro idioma, o pensamento interno de um personagem. Quando existe um elemento mais específico (<cite> para o título de uma obra, <dfn> para uma definição, <code> para código), use esse; <b> e <i> são a opção de reserva quando o texto é diferenciado, mas nenhum significado mais forte se aplica.

O erro a evitar é usar <b> quando você quer dizer <strong>, ou <i> quando você quer dizer <em>. Eles parecem idênticos, então nada na tela avisa que está errado, mas você descartou a importância ou a ênfase de que a tecnologia assistiva depende. Pergunte o que o texto significa, não como ele deveria parecer: se importa, <strong> ou <em>; se é apenas diferenciado, <b> ou <i>.

JunoÊnfase: strong e b, em e i<strong> e <b> ficam em negrito, <em> e <i> ficam em itálico. Para começar, use <strong> quando algo é importante, como um aviso, e <em> quando você quer dar ênfase a uma palavra da forma que sua voz faria. Esses dois vão cobrir quase tudo que você escrever.

JunoÊnfase: strong e b, em e i<strong> significa importante, <em> significa enfatizado, e ambos carregam significado. <b> e <i> são o mesmo negrito e itálico sem nenhum significado por trás, para texto que você só quer diferenciar. A aparência é a mesma nos dois casos, então escolha o par pelo que o texto significa, não pela aparência que deveria ter.

JunoÊnfase: strong e b, em e i Na tela os quatro são negrito ou itálico; a diferença é o que um leitor de tela escuta. <strong> e <em> codificam importância e destaque e podem ser anunciados de forma diferente, então usar <b> ou <i> quando você quer dizer aqueles descarta silenciosamente o significado. <b> e <i> são certos para texto que é só diferenciado, uma palavra-chave ou um termo, quando nenhum elemento mais específico se encaixa.

Outros textos inline (citações, <code>, <abbr> e afins)

Além de negrito e itálico, o HTML tem pequenos elementos para trechos comuns de texto. Uma citação curta vai no <q>, e o navegador adiciona as aspas para você. Um trecho de código, como o nome de um comando, vai em <code>, que o navegador mostra em uma fonte monoespaçada para se destacar do texto normal.

<p>Minha avó sempre dizia que <q>panela vigiada nunca ferve</q>.</p>
<p>Salve o arquivo com o atalho <code>Ctrl S</code>.</p>

Existem mais alguns desses, mas <q> para uma citação curta e <code> para código são os dois que você vai encontrar com mais frequência. Cada um envolve um pequeno trecho de texto e diz ao navegador o que ele é.

Esses são elementos inline: eles envolvem um trecho de texto dentro de um parágrafo sem quebrar para uma linha própria, diferente de um bloco como <p>. Cada um nomeia o que um fragmento de texto é, então use o elemento específico em vez de estilizar um <span> comum para parecer aquilo.

Os que vale a pena conhecer:

<p>O relatório cita <cite>O Programador Pragmático</cite> duas vezes.</p>
<p>Execute <code>npm install</code>, depois pressione <kbd>Enter</kbd>.</p>
<p>O quarto tem <strong>24m<sup>2</sup></strong> de área.</p>
<p>O total antigo era <del>R$ 40</del> <ins>R$ 32</ins>.</p>
<p>À medida que o <abbr title="HyperText Markup Language">HTML</abbr> evolui, as tags se estabilizam.</p>

<cite> nomeia o título de uma obra. <code> marca código, <kbd> marca entrada de teclado, e <samp> marca saída de programa. <sup> e <sub> são sobrescrito e subscrito, para coisas como expoentes e fórmulas químicas. Um símbolo de grau é seu próprio caractere, °, e não um sobrescrito. <del> e <ins> marcam texto excluído e inserido, úteis para mostrar uma edição ou uma mudança de preço. <abbr> marca uma abreviação, e seu atributo title guarda a forma completa.

<q> é para uma citação curta dentro do texto e adiciona as aspas automaticamente. Para uma citação mais longa e independente, você quer o <blockquote>, que é um elemento de bloco.

Esses são elementos inline, que fluem dentro de uma linha de texto em vez de formar seu próprio bloco. Eles existem para que um fragmento de texto possa carregar seu significado no código, o que é justamente o que torna esse significado disponível para a tecnologia assistiva, os motores de busca, e sua própria estilização e scripts. A orientação prática é usar o elemento mais específico que se encaixe e recorrer a um <span> neutro apenas quando nenhum outro serve.

O conjunto que você realmente vai usar:

<p>Veja <cite>Designing Data-Intensive Applications</cite>, capítulo três.</p>
<p>Digite <kbd>git status</kbd> para ver <samp>nothing to commit</samp>.</p>
<p>A amostra usou variáveis de <abbr title="Cascading Style Sheets">CSS</abbr> em todo o trabalho.</p>
<p>Número revisado: <del>1.200</del> <ins>1.450</ins> registros.</p>

<cite> marca o título de uma obra citada (um livro, filme ou artigo), não o nome de uma pessoa, um erro que as pessoas cometem o tempo todo. <code> é um fragmento de código de computador e <kbd> é entrada de teclado do usuário, duas coisas que geralmente renderizam em fonte monoespaçada, mas significam direções opostas da interação. <samp> é uma saída de exemplo de um programa. <abbr> marca uma abreviação e recebe um atributo title com a forma completa; um leitor de tela pode anunciar ou oferecer essa expansão, e ela aparece como uma dica ao passar o mouse, então quem lê nunca fica sem saber o que as letras significam. <del> e <ins> representam uma edição, texto removido e texto adicionado, e são anunciados como tal, o que importa quando a mudança é o ponto central, como uma correção de preço.

Para citações, <q> é inline e insere aspas apropriadas ao idioma por meio do CSS (por isso você não digita as aspas você mesmo), enquanto <blockquote> é o elemento de bloco para uma citação mais longa, e ambos aceitam um atributo cite opcional com a URL da fonte. O fio condutor em tudo isso: o elemento é o significado, e a aparência é uma camada separada que você define no CSS. Escolher a tag pelo que o texto é, em vez de pela aparência monoespaçada ou itálica, é o que mantém a página legível para as ferramentas que não conseguem vê-la.

JunoOutros textos inline (citações, code, abbr e afins)<q> envolve uma citação curta e adiciona as aspas para você, e <code> mostra código em uma fonte monoespaçada para se destacar. Existem mais algumas dessas tags pequenas, mas essas duas são as mais comuns. Cada uma envolve um trecho de texto e diz o que ele é.

JunoOutros textos inline (citações, code, abbr e afins) Essas tags inline nomeiam o que um fragmento é: <code> para código, <kbd> para teclas pressionadas, <cite> para o título de uma obra, <abbr> com um title para a forma completa. Use a tag específica em vez de estilizar um <span> comum. E <q> para uma citação curta, <blockquote> para uma independente.

JunoOutros textos inline (citações, code, abbr e afins) Use o elemento inline mais específico e recorra ao <span> só quando nada mais se encaixar. Cuidado com os que as pessoas usam errado: <cite> é o título de uma obra, não uma pessoa, e <code> versus <kbd> parecem iguais, mas significam extremos opostos da interação. O title do <abbr> é lido pela tecnologia assistiva, e o <q> fornece suas próprias aspas, então não as digite.