Conceitos básicos de texto

Da mesma forma que o editor de texto fornece títulos de <h1> a <h6>, além de diversas maneiras de formatar seções de texto de maneira significativa e visual, o HTML oferece um conjunto muito semelhante de elementos semânticos e não semânticos para dar o significado da prosa.

Esta seção aborda as principais formas de marcação de texto ou os princípios básicos de texto. Depois, vamos conferir os atributos, antes de explorar outras formas de marcar texto, como listas, tabelas e formulários.

Títulos revisados

Há seis elementos de título de seção, <h1>, <h2>, <h3>, <h4>, <h5> e <h6>, sendo <h1> o mais importante e o <h6> o menos. Por muitos anos, os desenvolvedores foram informados que os títulos eram usados pelos navegadores para delinear documentos. Essa era uma meta original, mas os navegadores não implementaram os recursos de descrição. No entanto, os usuários de leitores de tela usam títulos como uma estratégia de análise detalhada para aprender sobre o conteúdo da página, navegando pelos cabeçalhos com a tecla h. Por isso, garantir que os níveis dos títulos sejam implementados como você definiria um documento torna seu conteúdo acessível e ainda é muito recomendado.

Por padrão, os navegadores definem o estilo de <h1> como o maior e <h2> um pouco menor, e cada nível de cabeçalho subsequente é menor por padrão. Por padrão, os navegadores também diminuem o tamanho da fonte de <h1> com base em quantos elementos <article>, <aside>, <nav> ou <section> ela está aninhada.

Algumas folhas de estilo do user agent incluem os seguintes seletores ou semelhantes para estilizar elementos <h1> aninhados como se fossem de um nível menos importante:

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Mas o modelo de objeto de acessibilidade, ou AOM, ainda informa o nível do elemento corretamente, nesse caso, "cabeçalho, nível 1". O navegador não faz isso para outros níveis de cabeçalho. Sendo assim, não use o estilo de navegador baseado no cabeçalho. Mesmo que os navegadores não ofereçam suporte para esboçar, simule que sim. Marque os cabeçalhos do conteúdo como se fossem. Isso fará com que seu conteúdo faça sentido para mecanismos de pesquisa, leitores de tela e futuros mantenedores (que pode ser você).

Fora dos títulos, a maior parte do texto estruturado é composta por uma série de parágrafos. Em HTML, os parágrafos são marcados com a tag <p>. A tag de fechamento é opcional, mas sempre recomendada.

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

Esta seção não é um ponto de referência porque não tem um nome acessível. Para transformar isso em um region, que é um papel de ponto de referência, 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 pontos de referência somente se e quando apropriado. Ter muitos pontos de referência pode rapidamente se tornar desorientador para usuários de leitores de tela.

Citações

Ao marcar um artigo ou uma postagem de blog, você pode incluir uma citação, com ou sem uma citação visível. Existem 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 análises são aspas, algumas com citações, seguidas por um parágrafo contendo a citação. Omitindo a terceira avaliação para economizar espaço, a marcação é:

As informações sobre o autor ou a citação não fazem parte da citação e, portanto, não estão no <blockquote>, mas sim após a citação. Embora sejam citações no sentido geral do termo, elas não citam um recurso específico e, portanto, são encapsuladas em um elemento de parágrafo <p>.

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

Embora forneçamos informações de citação em um parágrafo após cada citação, as citações mostradas anteriormente são codificadas dessa maneira porque não vieram de uma fonte externa. Em caso afirmativo, a fonte pode (deveria?) ser citada.

Se a avaliação tiver sido extraída de um site de avaliações, livro ou outra obra, o elemento <cite> poderá ser usado para o título de uma fonte. O conteúdo do <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> poderá ser usado se a fonte estiver sendo mencionada de transmissão ou se a fonte estiver sendo citada ou referenciada. O conteúdo de <cite> é a obra, não o autor.

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

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

Para fornecer crédito no caso de crédito quando não é possível tornar o conteúdo visível, o atributo cite usa como valor o URL do documento ou da mensagem de origem das informações citadas. Este atributo é válido para <q> e <blockquote>. Embora seja um URL, ele pode ser lido por máquina, mas não visível ao 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 padding às direções in-line <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 à linguagem.

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

O elemento de aspas in-line, <q>, adiciona aspas adequadas ao idioma. Os estilos padrão do user agent incluem conteúdo gerado com aspas de abertura e de fechamento:

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 outro idioma. Isso ajuda os controles de voz, como Siri, Alexa e VoiceOver, a usar a pronúncia em francês. Ele também informa ao navegador que tipo de aspas renderizar.

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

Entidades HTML

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

Outras entidades que você usa com frequência são © para direitos autorais (©),™ para marca registrada (TM) e   para espaços sem quebra. Os espaços sem quebra são úteis quando você quer incluir um espaço entre dois caracteres ou palavras e, ao mesmo tempo, impedir que uma quebra de linha ocorra ali. Há mais de 2.000 referências de caracteres nomeados. No entanto, se necessário, cada caractere, incluindo emojis, tem um equivalente codificado que começa com &#.

Na revisão do workshop do 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 nesse bloco de citação 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 a caracteres nomeados nessa confusão de código. Como o conjunto de caracteres é UTF-8, os últimos caracteres no bloco de texto não precisam de escape, como neste exemplo. Somente caracteres incompatíveis com o conjunto de caracteres precisam de escape. Se necessário, há muitas ferramentas para permitir o escape de vários caracteres. Você também pode incluir <meta charset="UTF-8"> no <head>.

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

E o emoji sorridente é 😀, mas esse documento está declarado como UTF-8 e não tem escape.

Teste seu conhecimento

Teste seus conhecimentos sobre texto em HTML.

Como exibir 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>

Resposta correta

<quote>

Tente novamente.

<cite>

Tente novamente. O elemento <cite> é usado para indicar a origem de uma citação, não a própria citação.