Formatação de texto HTML

Já usou o atributo style para mudar a aparência do texto. As tags de formatação respondem a outra pergunta: o que este pedaço de texto significa? Avisos importantes, ênfase falada, destaques, edições, letras miúdas e índices como H₂O pertencem a elementos HTML dedicados. Os navegadores muitas vezes mostram-nos a negrito ou itálico por predefinição, mas ferramentas de acessibilidade e sistemas de pesquisa também podem usar o significado — algo que só a cor não fornece.

O que é a formatação de texto HTML?

Os elementos de formatação de texto envolvem uma palavra ou frase dentro de um parágrafo (ou texto semelhante) para marcar um papel: importância, ênfase, destaque, eliminação, inserção e mais. São elementos em linha. Não começam um novo bloco como p ou h1. Coloca-os à volta do intervalo exacto de texto que tem esse papel e fecha-os para o resto da frase voltar ao normal.

Resposta direta

Use tags de formatação semântica para significado: strong para importância forte, em para ênfase de stress (como se acentuasse a palavra ao falar), mark para destaque de relevância, small para letras miúdas ou comentários laterais, del e ins para texto removido ou inserido, e sub / sup para subscrito e sobrescrito. Prefira estas tags quando o significado importa. Quando só quer um aspeto a negrito ou itálico sem significado extra, use CSS — incluindo as ideias de style em linha da sessão anterior — em vez de usar mal strong ou em.

Referência de tags num relance

strong e em em primeiro lugar

strong e em são o par que mais vai usar. Recorra a strong quando o conteúdo é importante — um termo-chave, um aviso, um rótulo de campo obrigatório no texto. Recorra a em quando mudaria a voz para acentuar uma palavra. Negrito e itálico predefinidos são só a apresentação comum; as tags continuam a carregar significado se uma folha de estilos mudar o aspeto mais tarde.

Ler o exemplo

• strong envolve “final price” porque essa frase é importante na oração
• em envolve “before” porque o momento é a ideia acentuada
• Ambas as tags ficam dentro de um parágrafo; não substituem p
• Se só quisesse texto azul-marinho sem significado de importância, um style (ou CSS mais tarde) seria a ferramenta melhor

Mais tags de formatação num só parágrafo

Quando strong e em parecerem naturais, acrescente as ajudas para destaques, edições, letras miúdas e índices. Mantenha o aninhamento raso: envolva só as palavras que precisam de cada papel.

O que cada ajuda está a fazer

• sub baixa o “2” na fórmula da água; sup sobe o expoente em 12²
• del e ins mostram um rasto de edição — valor antigo fora, valor novo dentro
• small marca letras miúdas secundárias, não a afirmação principal
• mark destaca um resultado relevante, semelhante a um destaque de pesquisa
• strong e em ainda marcam importância e stress dentro do mesmo parágrafo
  Não precisa de todas as tags em todas as frases. Escolha as que correspondem ao significado real do seu texto.

Tags de significado vs estilo só de aparência

Páginas antigas às vezes usam b e i para negrito e itálico sem significado forte. Neste curso, prefira strong quando o conteúdo é importante e em quando acentuaria uma palavra ao falar. Use CSS quando só quer um aspeto visual. Esse hábito mantém o HTML honesto: as tags de formatação descrevem o conteúdo, e as folhas de estilos descrevem a apresentação.

Prática no seu editor

1. Escreva um parágrafo normal sobre o preço de um produto.
2. Envolva o nome do produto em strong.
3. Envolva uma palavra de aviso em em.
4. Marque um preço antigo com del e um preço novo com ins.
5. Opcional: acrescente uma nota estilo nota de rodapé com small, ou um pedaço de fórmula com sub / sup.
6. Guarde e abra a página. Confirme que as tags estão fechadas e que o significado se lê com clareza.
7. Deixe de propósito uma tag de fecho de fora, atualize, note como o resto da linha fica estilizado, depois corrija.
   Ver uma tag não fechada a “vazar” estilo pelo parágrafo treina aninhamento cuidadoso mais depressa do que só copiar exemplos perfeitos.

Erros que enfraquecem a formatação

• Usar só style="font-weight: bold" quando a palavra é realmente importante — prefira strong para significado
• Usar strong em todo o lado só para engrossar o texto — isso dilui a importância
• Aninhar cinco tags de formatação umas dentro das outras sem razão
• Usar sup / sub para decoração em vez de índices reais (matemática, química, notas de rodapé)
• Esquecer tags de fecho para o resto da página herdar negrito, itálico ou destaque
• Tratar mark como uma tinta amarela geral para parágrafos inteiros de texto não relacionado

Resumo

• As tags de formatação acrescentam significado dentro do texto, não só decoração
• Comece com strong e em, depois acrescente mark, small, del, ins, sub e sup quando precisar
• Prefira tags semânticas quando importância, ênfase, edições ou índices importam
• Use CSS quando só precisa de aspeto sem significado extra
• Mantenha o aninhamento simples e feche sempre cada tag que abrir
• Escolha tags a partir do significado da frase, não do hábito de pôr tudo a negrito