Conceitos básicos de texto

Assim como o editor de texto fornece cabeçalhos <h1> a <h6>, além de várias maneiras de formatar seções de texto de maneiras significativas e visuais, o HTML oferece um conjunto muito semelhante de elementos semânticos e não semânticos para dar sentido à prosa.

Esta seção aborda as principais maneiras de marcar texto ou os conceitos básicos de texto. Em seguida, vamos discutir os atributos antes de explorar outras maneiras de marcar texto, como listas, tabelas e formulários.

Cabeçalhos, revisitados

Há seis elementos de cabeçalho de seção, <h1>, <h2>, <h3>, <h4>, <h5> e <h6>, sendo <h1> o mais importante e <h6> o menos. Por muitos anos, os desenvolvedores foram informados de que os cabeçalhos eram usados pelos navegadores para descrever documentos. Esse era originalmente um objetivo, mas os navegadores nunca implementaram recursos de descrição de documentos, e o algoritmo de descrição proposto foi oficialmente removido da especificação HTML. No entanto, os usuários de leitores de tela dependem muito dos cabeçalhos como uma estratégia de exploração para aprender sobre o conteúdo de uma página, navegando pelos cabeçalhos com a tecla h. É altamente recomendável garantir que os níveis de cabeçalho sejam implementados de forma lógica, como você faria para descrever um documento, para tornar o conteúdo acessível.

Por padrão, os navegadores estilizam <h1> como o maior, <h2> um pouco menor, com cada nível de cabeçalho subsequente sendo menor por padrão. Historicamente, as folhas de estilo do user agent também diminuíam o tamanho da fonte dos elementos <h1> aninhados em elementos de seção, como <article>, <aside>, <nav>, ou <section>.

Algumas folhas de estilo do user agent incluíam os seguintes seletores (ou semelhantes) para estilizar elementos <h1> aninhados como se fossem níveis de cabeçalho mais baixos:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

No entanto, o modelo de objeto de acessibilidade (AOM, na sigla em inglês) e os leitores de tela nunca modificaram os níveis de cabeçalho com base no aninhamento. Um <h1> aninhado sempre foi informado como "cabeçalho, nível 1". Isso criou uma incompatibilidade em que os cabeçalhos aninhados pareciam visualmente menores, mas permaneciam cabeçalhos de nível superior para tecnologias assistivas.

Como a especificação HTML removeu o algoritmo de descrição do documento, os navegadores removeram essas regras legadas da folha de estilo do user agent. Como resultado, os elementos <h1> aninhados mantêm o tamanho da fonte <h1> padrão em vez de diminuir automaticamente.

Não dependa do aninhamento de elementos <h1> em elementos de seção para estilo visual ou hierarquia estrutural. Sempre marque seu conteúdo usando elementos de cabeçalho sequenciais (<h1> a <h6>) com base na estrutura do documento. Isso garante que seu conteúdo seja claro e acessível para mecanismos de pesquisa, leitores de tela e futuros mantenedores.

Fora dos cabeçalhos, a maioria dos textos estruturados é composta por uma série de parágrafos. Em HTML, os parágrafos são marcados com a <p> tag. A tag de fechamento é opcional, mas sempre recomendada.

A seção #about tem um cabeçalho e alguns parágrafos:

Essa seção não é um marco porque não tem um nome acessível. Para transformá-la em uma region, que é um papel de marco, use aria-labelledby para fornecer o nome acessível:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Crie marcos apenas quando apropriado. Ter muitos marcos pode rapidamente desorientar os usuários de leitores de tela.

Citações

Ao marcar um artigo ou postagem de blog, talvez você queira incluir uma citação, com ou sem uma citação visível. Há elementos para esses três componentes: <blockquote>, <q> e <cite> para uma citação visível ou o atributo cite para fornecer mais informações para a pesquisa.

A seção #feedback contém um cabeçalho e três avaliações. Essas avaliações são citações em bloco, algumas das quais contêm citações, seguidas por um parágrafo com a citação da citação. Omitindo a terceira avaliação para economizar espaço, a marcação é:

As informações sobre o autor da citação ou a citação não fazem parte da citação e, portanto, não estão no <blockquote>, mas vêm depois da citação. Embora sejam citações no sentido comum do termo, elas não estão citando um recurso específico e, portanto, estão encapsuladas em um elemento de parágrafo <p>.

A citação aparece em três linhas, incluindo o nome do autor, a função anterior e a aspiração profissional. A quebra de linha <br> cria uma quebra de linha em um bloco de texto. Ela pode ser usada em endereços físicos, em poesia e em blocos de assinatura. As quebras de linha não devem ser usadas como um retorno de carro para separar parágrafos. Em vez disso, feche o parágrafo anterior e abra um novo. Usar parágrafos para parágrafos não é apenas bom para acessibilidade, mas também permite a estilização. O elemento <br> é apenas uma quebra de linha. Ele é afetado por pouquíssimas propriedades CSS.

Embora tenhamos fornecido informações de citação em um parágrafo após cada citação em bloco, as citações mostradas anteriormente são codificadas dessa forma porque não vieram de uma fonte externa. Se elas vieram, a fonte pode (e deve) ser citada.

Se a avaliação foi extraída de um site de avaliação, livro ou outro trabalho, o <cite> elemento poderá ser usado para o título de uma fonte. O conteúdo de <cite> pode ser o título de um livro, o nome de um site ou programa de TV ou até mesmo o nome de um programa de computador. O encapsulamento <cite> pode ser usado se a fonte estiver sendo mencionada de passagem ou se a fonte estiver sendo citada ou referenciada. O conteúdo de <cite> é o trabalho, não o autor.

Se a citação de Blendan Smooth foi extraída da revista off-line dela, você escreveria a citação em bloco assim:

O elemento de citação <cite> não tem um papel implícito e precisa receber o nome acessível do conteúdo. Não inclua um aria-label.

Para dar crédito quando o conteúdo não puder ser exibido, há o atributo cite, que usa como valor o URL do documento ou mensagem de origem para as informações citadas. Esse atributo é válido em <q> e <blockquote>. Embora seja um URL, ele é legível por máquina, mas não visível para o leitor:

Embora a tag de fechamento </p> seja opcional (e sempre recomendada), a tag de fechamento </blockquote> é sempre obrigatória.

A maioria dos navegadores adiciona preenchimento às direções inline <blockquote> e coloca o conteúdo <cite> em itálico. Isso pode ser controlado com CSS. O <blockquote> não adiciona aspas, mas elas podem ser adicionadas com conteúdo gerado por CSS. O elemento <q> adiciona aspas por padrão, usando aspas adequadas ao idioma.

Na seção #teachers, HAL é citado como dizendo: "Sinto muito , mas não posso fazer isso, ." O código para isso, em inglês e francês, é:

O elemento de citação inline, <q>, adiciona citações adequadas ao idioma. Os estilos padrão do user agent incluem conteúdo gerado por open-quote e close-quote:

q::before {content: open-quote;}
q::after {content: close-quote;}

O atributo lang é incluído para informar ao navegador que, embora o idioma base da página tenha sido definido como inglês na tag de abertura <html lang="en-US">, esse parágrafo de texto está em um idioma diferente. Isso ajuda controles de voz, como Siri, Alexa e VoiceOver, a usar a pronúncia francesa. Ele também informa ao navegador qual tipo de cotação renderizar.

Como <blockquote>, o elemento <q> oferece suporte ao atributo cite.

Entidades HTML

Talvez você tenha notado a sequência de escape ou "entidade". Como o < é usado em HTML, é necessário fazer o escape dele usando < ou uma codificação menos fácil de lembrar <. Há quatro entidades reservadas em HTML: <, >, & e ". As referências de caracteres são <, >, & e ", respectivamente.

Algumas outras entidades que você costuma usar são © para direitos autorais (©), ™ para marca registrada (™) e   para espaço não separável. Os espaços não separáveis são úteis quando você quer incluir um espaço entre dois caracteres ou palavras, evitando que uma quebra de linha ocorra ali. Há mais de 2.000 referências de caracteres nomeadas. No entanto, se necessário, cada caractere, incluindo emoji, tem um equivalente codificado que começa com &#.

Se você analisar a avaliação da oficina de ToastyMcToastface (não incluída no exemplo de código acima), há alguns caracteres de texto incomuns:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

A última frase dessa citação em bloco também pode ser escrita como:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

Há alguns caracteres sem escape e algumas referências de caracteres nomeadas nessa confusão de código. Como o conjunto de caracteres é UTF-8, os últimos caracteres na citação em bloco não precisam ser escapados, como neste exemplo. Apenas os caracteres indisponíveis para o conjunto de caracteres precisam ser escapados. Se necessário, há muitas ferramentas para permitir o escape de vários caracteres, ou você pode garantir que inclua <meta charset="UTF-8"> no <head>.

Mesmo quando você especifica o conjunto de caracteres como UTF-8, ainda é necessário fazer o escape do < quando quiser mostrar esse caractere na tela. Geralmente, não é necessário incluir as referências de caracteres nomeadas para >, ", ou &. No entanto, se você quiser escrever um tutorial sobre entidades HTML, será necessário escrever < ao ensinar alguém a codificar um <. 😀

Ah, e esse emoji sorridente é 😀, mas esse documento é declarado como UTF-8, então ele não é escapado.

Teste seu conhecimento

Teste seu conhecimento de texto em HTML.

Como mostrar um símbolo de direitos autorais em HTML?

c

Tente novamente.

©

Correto.

&copyright.

Tente novamente.

Qual elemento é usado para indicar que algo é uma citação?

<blockquote>

Correto

<quote>

Tente novamente.

<cite>

Tente novamente. O elemento <cite> é usado para indicar a fonte de uma citação, não a citação em si.