Elementos de texto

docs.scrimba.com

A maior parte do que um visitante lê em uma página é conteúdo escrito comum: títulos, parágrafos, um aviso em negrito, uma frase citada, um trecho de código. HTML tem um elemento específico para cada função, e escolher o correto faz mais que mudar como o texto se parece. Ele diz ao navegador, aos mecanismos de busca e às ferramentas de acessibilidade o que cada pedaço de texto realmente é.

Títulos e hierarquia

HTML oferece seis tamanhos de títulos, de <h1> até <h6>. Um título é um nome para a página ou para uma seção dela. <h1> é o título principal, o grande no topo. <h2> marca uma seção principal, <h3> uma subseção dentro dela, e assim por diante até <h6>.

Pense em um livro impresso. O título na capa é o <h1>. Cada título de 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 importante desde o começo: não escolha um título porque ele deixa o texto do tamanho que você quer. <h1> é grande por acaso, mas seu trabalho é dizer "este é o título principal", não "faça isso grande". Se você quer texto grande em algum lugar, esse é um trabalho para CSS depois.

Os seis elementos de título, <h1> até <h6>, descrevem a hierarquia de um documento: quais partes são seções e quais são subseções. O número é a classificação, não um tamanho. <h1> é o topo do esboço, <h2> fica sob ele, <h3> sob aquele.

A regra para construir desde cedo é aninhar títulos em ordem e não pular um nível. Uma seção com título <h2> deve conter subseções <h3>, não pular direto para <h4>. Pular níveis para alcançar um tamanho padrão menor é o erro clássico, e é a ferramenta errada: se você quer que um título pareça de uma certa forma, estilize com CSS, e deixe o número reservado para sua classificação na estrutura.

Os elementos de título definem o esboço do documento: a estrutura ordenada e classificada de suas seções, da mesma forma que um índice aninha tópicos sob tópicos. Três regras de produção seguem disso, e todas as três são sobre acessibilidade e busca em vez de aparência.

Primeiro, use um <h1> por página, o verdadeiro título do conteúdo dessa página. É o topo do esboço, e ter exatamente um oferece a cada ferramenta uma âncora única e inequívoca do que a página é sobre.

Segundo, não pule níveis descendo. Um leitor de tela (software que lê uma página em voz alta para pessoas que não conseguem vê-la) permite que seu usuário acesse uma lista de cada título e pule entre eles, da forma que um leitor vidente folheia procurando a seção que quer. Um pulo de <h2> para <h4> é lido como um nível perdido nessa lista, e a navegação deixa de fazer sentido.

Terceiro, as classificações são semânticas, nunca tamanhos. Mecanismos de busca leem a estrutura de títulos para entender como uma página é organizada, então um <h3> escolhido porque seu tamanho padrão se parecia certo, em vez de porque é realmente uma seção de terceiro nível, silenciosamente informa mal tanto o rastreador quanto o leitor de tela. Configure o tamanho em CSS; deixe o número carregar o significado.

<h1>Fermentação natural para iniciantes</h1>

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

<h3>Dia um a três</h3>
<p>Misture partes iguais de farinha e água, depois espere.</p>

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

Um <h1> nomeia a página toda. Dois títulos <h2> marcam as seções principais, e o <h3> fica bem dentro da primeira delas. Leia os números dos títulos por conta própria e você consegue ver a forma do artigo sem ler uma palavra do corpo.

JunoTítulos e hierarquia Seis títulos, <h1> até <h6>, e <h1> é o um título principal no topo. O resto marca suas seções e subseções. A armadilha que me pegou no começo: não pegue um título só porque ele fica grande, é para isso que CSS existe. O número é sobre o que a coisa é, não seu tamanho.

JunoTítulos e hierarquia Títulos classificam seu conteúdo, não determinam o tamanho dele. Aninha-os em ordem e não pule um nível para chegar a um tamanho padrão menor, esse é o que pega as pessoas. Precisa que um título pareça de certa forma? Estilize em CSS e deixe o número descrever a estrutura.

JunoTítulos e hierarquia Um <h1> por página, nenhum nível pulado descendo, e nunca escolha uma classificação por seu tamanho. Usuários de leitores de tela pulam entre títulos como um índice, e mecanismos de busca leem o mesmo esboço, então um título escolhido por aparência engana ambos. Mantenha o número semântico e empurre aparência para CSS.

Parágrafos e quebras de linha

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

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

Note que pressionar Enter em seu arquivo HTML não faz nada na página. O navegador ignora as quebras de linha e espaços extras que você digita; ele só se importa com as tags. É por isso que você precisa de <p> para separar parágrafos, em vez de apenas 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 pequeno poema, há um 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 fluído, e é o lar padrão para conteúdo do corpo. O navegador colapsa qualquer sequência de espaços, abas e quebras de linha em sua fonte em um único espaço, então o layout 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 está correto apenas quando a quebra é parte do conteúdo em si: endereços postais, linhas de um poema, um bloco de assinatura.

<p>
  João Silva<br>
  Rua das Flores, 42<br>
  São Paulo, SP 01234-567
</p>

Onde <br> está errado é como ferramenta de espaçamento. Empilhar <br><br> para separar dois parágrafos se parece bem e é o instinto errado: esses são dois parágrafos, então são dois elementos <p>, e o espaço entre eles é apresentação, que pertence a CSS. Recorrer a <br> para criar espaço mistura estrutura e estilo, exatamente o hábito que vale a pena quebrar cedo.

<p> é um elemento no nível de bloco, significando que começa em uma nova linha e ocupa a largura total disponível, se empilhando verticalmente com os parágrafos ao seu redor. É o recipiente correto para uma sequência de prosa, e o navegador aplica colapso de espaçamento em branco a seu conteúdo: qualquer sequência de espaços, abas e quebras de linha na fonte se torna um espaço na saída renderizada. É por isso que formatação de fonte é livre para ser o que é legível para você.

<br> representa uma quebra de linha que é significativa para o conteúdo, não um espaço de layout. A distinção tem um custo concreto de acessibilidade. Um leitor de tela trata um limite <p> como o fim de um parágrafo e faz uma pausa apropriadamente, dando ao seu usuário um senso de onde um pensamento termina e o próximo começa. Uma pilha de elementos <br> não produz tal limite: o software lê direto, e a estrutura que o leitor vidente vê no espaçamento é invisível para o ouvinte. Parágrafos vazios usados como espaçadores têm o mesmo problema, alguns leitores de tela os anunciam como em branco, outros os pulam, e de qualquer forma o espaço que você pretendia não é comunicado.

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

JunoParágrafos e quebras de linha Cada bloco de texto vai em 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 as tags fazem o trabalho. Use <br> apenas quando uma linha realmente precisa quebrar no meio de um parágrafo, como um endereço.

JunoParágrafos e quebras de linha<p> para um parágrafo, e o navegador colapsa seu espaçamento em branco na fonte, então formatar o arquivo não muda nada na página. <br> é para quebras que pertencem ao conteúdo, como um endereço, nunca para separar coisas. Dois <br> para fazer um espaço é o sinal de que espaçamento vazou para fora de CSS.

JunoParágrafos e quebras de linha<p> é um bloco que dá a um leitor de tela um verdadeiro limite de parágrafo para fazer uma pausa; uma pilha de <br> não dá nada e a estrutura desaparece para quem está ouvindo. Então <br> apenas quando a quebra é parte dos dados, e todo espaçamento vertical em CSS com margin. Parágrafos vazios como espaçadores têm o mesmo buraco de acessibilidade, pule-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> ambos renderizam em negrito; <em> e <i> ambos renderizam em itálico. Então quatro tags, dois pareceres.

<p><strong>Aviso:</strong> o forno está muito quente.</p>
<p>Você precisa amassar a massa <em>completamente</em>.</p>

Por enquanto, use <strong> quando um pouco de texto é importante, como um aviso, e <em> quando você quer enfatizar uma palavra da forma que sua voz faria se você estivesse lendo em voz alta. Esses são os dois que você vai querer na maioria das vezes, e o navegador os torna em negrito e itálico para você.

Os quatro elementos se dividem em dois pares, e a divisão é 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 apenas mudam como parece.

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 estresse, a palavra que você se inclinaria se lesse a frase em voz alta, o que pode mudar seu significado. Ambos acontecem a renderizar em negrito e itálico respectivamente, mas você está escolhendo-os pelo que significam.

<b> e <i> são para os casos onde você quer negrito ou itálico e não há importância ou estresse atrás disso. Um <b> para uma palavra-chave que você está puxando o olho, um <i> para o nome de um navio ou uma frase estrangeira. Eles marcam texto como estilisticamente separado, sem afirmar que importa mais.

<p><strong>Não</strong> abra a válvula enquanto o sistema está pressurizado.</p>
<p>Ela sussurrou que era <em>sua</em> ideia, não dele.</p>
<p>O atalho de teclado é <b>Ctrl</b> mais <b>S</b>.</p>
<p>Pegamos a balsa através no <i>Lady Marion</i>.</p>

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

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

<strong> marca importância: conteúdo que é sério, urgente ou não deve ser perdido. <em> marca ênfase de estresse: a palavra cuja peso muda o significado da frase (compare "me chame amanhã" com "me chame amanhã"). Um leitor de tela pode agir sobre esses. Muitos vão mudar o tom ou o ritmo em texto enfatizado, e um <strong> pode ser surfado diferentemente da prosa ordinária, então a importância que você codificou é realmente transmitida para alguém que não está vendo o negrito. Aninha-os para grau: <strong> dentro de <strong> é lido como importância maior, <em> dentro de <em> como estresse mais pesado.

<b> e <i> são o par apresentacional, e são a escolha correta mais frequentemente do que o conselho "evite-os" sugere. Suas definições reais são estreitas. <b> chama atenção para o texto por uma razão prática sem importância adicional: uma palavra-chave em um resumo, um nome de produto em uma resenha. <i> marca texto em uma voz alternativa ou humor: um termo técnico na primeira use, um nome taxonômico como Homo sapiens, uma frase em outra língua, um pensamento interior de um personagem. Quando há um elemento mais específico (<cite> para o título de uma obra, <dfn> para uma definição, <code> para código), use esse em vez disso; <b> e <i> são o retorno quando o texto é separado mas nenhum significado mais forte se aplica.

O modo de falha para evitar é usar <b> onde você quer dizer <strong>, ou <i> onde você quer dizer <em>. Parecem idênticos, então nada na tela diz que está errado, mas você jogou fora a importância ou ênfase que a tecnologia assistiva depende. Pergunte o que o texto significa, não como deve parecer: se importa, <strong> ou <em>; se é apenas separado, <b> ou <i>.

JunoÊnfase: strong e b, em e i<strong> e <b> ambos vão em negrito, <em> e <i> ambos vão em itálico. Começando, use <strong> quando algo é importante, como um aviso, e <em> quando você quer enfatizar uma palavra da forma que sua voz faria. Esses dois vão cobrir quase tudo que você escreve.

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 significado atrás disso, para texto que você só quer separado. Mesmo aspecto de qualquer forma, então escolha o par pelo que o texto significa, não como deve parecer.

JunoÊnfase: strong e b, em e i Na tela todos os quatro são apenas negrito ou itálico; a diferença é o que um leitor de tela ouve. <strong> e <em> codificam importância e estresse e podem ser anunciados diferentemente, então pegar <b> ou <i> quando você quer dizer esses silenciosamente derruba o significado. <b> e <i> estão certos para texto que é apenas separado, uma palavra-chave ou um termo, quando nenhum elemento mais específico se encaixa.

Outro texto inline (citações, <code>, <abbr>, e amigos)

Além de negrito e itálico, HTML tem pequenos elementos para partes comuns de texto. Uma breve citação fica em <q>, e o navegador adiciona as aspas para você. Um pedaço de código, como o nome de um comando, vai em <code>, que o navegador mostra em uma fonte monoespacial para se destacar da escrita normal.

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

Há alguns mais desses, mas <q> para uma breve citação e <code> para código são os dois que você encontrará mais. Cada um envolve um pouco de texto e diz ao navegador o que é.

Esses são elementos inline: eles envolvem uma sequência de texto dentro de um parágrafo sem quebrar para sua própria linha, 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 a parte.

Os que valem a pena conhecer:

<p>O relatório cita <cite>The Pragmatic Programmer</cite> duas vezes.</p>
<p>Execute <code>npm install</code>, depois pressione <kbd>Enter</kbd>.</p>
<p>O quarto é <strong>24m<sup>2</sup></strong> de espaço de piso.</p>
<p>O total antigo era <del>R$40</del> <ins>R$32</ins>.</p>
<p>Como <abbr title="HyperText Markup Language">HTML</abbr> amadurece, as tags se estabelecem.</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 sinal de grau é seu próprio caractere, °, em vez de um sobrescrito. <del> e <ins> marcam texto deletado e inserido, útil para mostrar uma edição ou uma mudança de preço. <abbr> marca uma abreviação, e seu atributo title contém a expansão completa.

<q> é para uma breve citação inline e adiciona aspas automaticamente. Para uma citação mais longa e autossuficiente, você quer <blockquote> em vez disso, 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 na marcação, que é o que torna esse significado disponível para tecnologia assistiva, mecanismos de busca e seu próprio estilo e scripts. A orientação prática é usar o elemento mais específico que se encaixa e voltar para um <span> neutro apenas quando nenhum o faz.

O conjunto que você vai realmente 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 <abbr title="Cascading Style Sheets">CSS</abbr> em toda parte.</p>
<p>Figura revisada: <del>1.200</del> <ins>1.450</ins> entradas.</p>

<cite> marca o título de uma obra citada (um livro, filme ou papel), não o nome de uma pessoa, um ponto que as pessoas erram constantemente. <code> é um fragmento de código de computador e <kbd> é entrada de teclado do usuário, duas coisas que geralmente renderizam monoespacial mas significam direções opostas da interação. <samp> é saída de amostra de um programa. <abbr> marca uma abreviação e leva um atributo title contendo a expansão completa; um leitor de tela pode anunciar ou oferecer essa expansão, e ela aparece como uma dica ao passar o mouse, então o leitor nunca fica adivinhando 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 onde a mudança é o ponto, como uma correção de preço ou uma edição de linha.

Para citações, <q> é inline e insere aspas com reconhecimento de localidade através de CSS (é por isso que você não digita as aspas), enquanto <blockquote> é o elemento de nível de bloco para uma citação estendida, e ambas levam um atributo opcional cite contendo a URL da fonte. A linha através de todos esses: o elemento é o significado, e aparência é uma camada separada que você define em CSS. Escolher a tag pelo que o texto é, em vez de por um pareceer monoespacial ou itálico, é o que mantém a página legível para as ferramentas que não conseguem vê-la.

JunoOutro texto inline (citações, code, abbr, e amigos)<q> envolve uma breve citação e adiciona as aspas para você, e <code> mostra código em uma fonte monoespacial para se destacar. Há alguns mais desses pequenos tags, mas esses dois aparecem mais. Cada um apenas envolve um pouco de texto e diz o que é.

JunoOutro texto inline (citações, code, abbr, e amigos) Esses tags inline cada um 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 o específico em vez de estilizar um <span> comum. E <q> para uma breve citação, <blockquote> para uma autossuficiente.

JunoOutro texto inline (citações, code, abbr, e amigos) Use o elemento inline mais específico e volte para <span> apenas quando nada se encaixa. Observe os que as pessoas usam mal: <cite> é o título de uma obra, não uma pessoa, e <code> versus <kbd> se parecem mas significam pontos finais opostos da interação. <abbr>'s title é lido por tecnologia assistiva, e <q> fornece suas próprias aspas, então não as digite.