HTML: como deixar em negrito, itálico e sublinhado

Quando alguém começa a criar as suas primeiras páginas web, uma das dúvidas mais frequentes é como destacar palavras dentro de um texto. Em um processador como o Word, basta apertar um botão para deixar um parágrafo em negrito ou em itálico, mas em HTML o assunto funciona de outro jeito: a formatação não é aplicada com botões, e sim com tags que envolvem o texto que se quer destacar. Conhecer essas tags, entender o que cada uma significa e saber quando usá-las é uma das bases da construção de páginas web e uma habilidade muito útil para quem publica conteúdo na internet.

Neste artigo se explica, com exemplos práticos, como deixar um texto em negrito, itálico e sublinhado em HTML, qual diferença existe entre tags que parecem iguais mas significam coisas diferentes, como combinar vários formatos em uma mesma frase e quais erros convém evitar para não escrever um código confuso. Para que tudo fique claro, os exemplos são mostrados de forma legível: por exemplo, aparece como texto visível e não como um formato já aplicado.

Antes de começar: como ler os exemplos

Ao longo deste guia, os exemplos de código aparecem com os sinais < e > escritos como texto, para que o leitor veja exatamente qual tag deve digitar sem que o navegador a execute. Quando um exemplo é apresentado assim:

texto em negrito

o que se está mostrando é a instrução que precisa ser escrita dentro do arquivo HTML. Cada exemplo também indica o resultado que aparecerá na tela, para que o efeito fique claro mesmo para quem nunca mexeu em uma página web.

Deixar o texto em negrito: as tags b e strong

A forma mais direta de deixar um texto em negrito é envolvê-lo com a tag , cujo nome vem da palavra inglesa bold. Tudo o que ficar entre e o seu fechamento aparecerá com um traço mais grosso e escuro que o restante do parágrafo. O exemplo mínimo é este:

Este trecho aparece em negrito

O resultado é que a frase fica destacada com um traço mais pesado. A tag existe desde as primeiras versões do HTML e a sua única função é mudar a aparência: negrito pelo negrito, sem acrescentar nenhum significado especial ao conteúdo.

Ao lado de existe outra tag com o mesmo resultado visual, mas com um propósito mais profundo: . Apesar de o texto também ser exibido em negrito, comunica que aquele conteúdo tem importância dentro do documento. Para um navegador, para um leitor de tela ou para um mecanismo de busca não é a mesma coisa dizer "esta palavra é visualmente grossa" e dizer "esta palavra é importante". Por isso, é recomendada quando se quer dar uma ênfase real a uma ideia:

Lembre-se de que o prazo é improrrogável e termina no último dia do mês.

O navegador mostrará a palavra improrrogável em negrito e, além disso, os programas de assistência poderão anunciá-la com um tom de voz especial para pessoas com deficiência visual. A regra prática é simples: se você só quer um efeito decorativo, resolve; se a intenção é marcar importância, use . Nos textos reais de uma página web quase sempre se precisa de , porque as palavras que se destacam costumam ser justamente as que importam.

As duas tags aceitam textos de qualquer tamanho: é possível deixar em negrito uma palavra solta, uma frase inteira ou até um bloco longo, com a única condição de abrir e fechar a tag no lugar certo. O erro mais comum de quem está começando é esquecer o fechamento ou ; quando isso acontece, tudo o que vem depois fica em negrito até o navegador encontrar outra marca ou o documento terminar, e o visual quebra por completo.

O itálico: as tags i e em

Para escrever em itálico, o HTML oferece um par de tags equivalente ao do negrito. A primeira é , abreviação de italic, que inclina o texto para a direita sem acrescentar nenhum significado. A segunda é , abreviação de emphasis, que além de inclinar o texto comunica ênfase, assim como comunica importância no caso do negrito.

O exemplo básico com é o seguinte:

texto em itálico

Com essa instrução, o navegador inclina o texto para a direita. A tag é usada, por exemplo, para os títulos de livros, filmes ou obras de arte dentro de um parágrafo, e para palavras de outro idioma que ainda não fazem parte do vocabulário comum.

A tag é escrita da mesma maneira:

Isto sim precisa ser revisado antes de assinar.

Nesse exemplo, a palavra sim aparecerá em itálico, mas a ênfase também fica registrada para os sistemas que leem a página. A diferença entre e é a mesma que existe entre e : a primeira muda apenas a aparência e a segunda acrescenta um matiz de significado. Ao escrever conteúdo para a web, convém pensar primeiro no sentido: se uma palavra seria dita com um tom de voz mais forte ao ser lida em voz alta, o correto é usar .

Sublinhado: a tag u, com moderação

Para sublinhar um texto em HTML, usa-se a tag , de underline. A sua forma é idêntica às anteriores:

texto sublinhado

O navegador desenha uma linha embaixo do texto. No entanto, o sublinhado é o formato que exige mais cuidado, porque os usuários da internet têm aprendido que um texto sublinhado e colorido é um link. Se você sublinha palavras que não levam a lugar nenhum, quem lê a página pode tentar clicar e ficar confuso ao perceber que nada acontece. Por essa razão, a recomendação geral é reservar o sublinhado para casos muito específicos, como marcar uma correção ortográfica, destacar uma referência dentro de um documento técnico ou sinalizar uma palavra que será definida mais adiante no mesmo texto, e evitar sublinhar frases inteiras apenas por estética.

Também vale lembrar que o sublinhado dos links é colocado pelo próprio navegador ou pela folha de estilos da página; não é preciso acrescentar a um link para que ele apareça sublinhado, e se isso for feito, o resultado pode ser uma linha dupla ou um aspecto descuidado.

Um extra útil: texto riscado com del e s

Embora a pergunta deste artigo mencione três formatos, vale a pena conhecer mais duas tags que aparecem o tempo todo na web: as que riscam o texto. A primeira é <del>, que representa conteúdo removido de um documento, como nas correções de um contrato ou no histórico de alterações de uma página:

O preço anterior era <del>120</del> e agora é 90.

A segunda é <s>, usada para conteúdo que já não está correto ou ficou obsoleto, mas que é mantido visível de propósito, como uma oferta que terminou:

<s>Frete grátis somente até sexta-feira.</s>

Visualmente, as duas desenham uma linha sobre o texto, mas o significado é diferente: <del> indica uma remoção real e <s> indica que algo deixou de ser válido. Usar a tag certa ajuda as máquinas e os programas de acessibilidade a compreender o conteúdo.

Combinar vários formatos em uma mesma frase

As tags de formatação podem ser combinadas para conseguir, por exemplo, uma palavra em negrito e itálico ao mesmo tempo. Basta aninhá-las corretamente, ou seja, abrir e fechar cada uma na ordem adequada, como mostra este exemplo:

atenção, detalhe importante

Neste exemplo, a tag abre primeiro e fecha antes de ; essa é a forma correta de encadear marcas. Se os fechamentos se cruzarem, o navegador pode interpretar o documento de um jeito inesperado e a formatação não será aplicada direito. A mesma lógica vale para combinar negrito com sublinhado ou itálico com riscado: primeiro define-se o conteúdo e depois se envolve com as tags uma dentro da outra, sempre da mais interna para a mais externa.

Vale, no entanto, não abusar das combinações. Um texto em que quase todas as palavras carregam dois ou três formatos ao mesmo tempo é difícil de ler e perde o efeito de hierarquia que se buscava. A formatação deve funcionar como um semáforo: poucos sinais, bem posicionados, orientam melhor do que muitas luzes acesas ao mesmo tempo.

O que não fazer: formatação decorativa e estilos confusos

Existem várias más práticas muito comuns que convém evitar. A primeira é usar negrito, itálico ou sublinhado em blocos inteiros: um parágrafo completo em negrito cansa a vista e faz com que nada se destaque de verdade. A segunda é sublinhar texto que não é um link, como já foi explicado. A terceira é escrever um texto inteiro em maiúsculas para simular um grito quando o que se precisa é de uma tag de formatação.

Também é importante lembrar que no passado se usavam tags como , hoje obsoletas, para mudar a aparência do texto diretamente no HTML. Atualmente, a recomendação é separar o conteúdo da apresentação: o HTML define o que cada coisa é e o CSS define como ela se parece. Se o objetivo é apenas um efeito visual sem significado semântico, a alternativa correta às tags de formatação é uma folha de estilos com propriedades como font-weight, font-style e text-decoration. Por exemplo, para deixar um parágrafo em negrito com uma regra de estilo aplicada diretamente, seria possível escrever algo parecido com isto:

Este parágrafo fica em negrito graças ao CSS.

Essa forma funciona, embora o mais organizado seja levar essas regras para um arquivo CSS externo em vez de repeti-las dentro de cada tag. A ideia central é escolher a ferramenta conforme a intenção: se a palavra é importante, ; se carrega ênfase, ; se só se quer um aspecto específico, uma regra CSS.

Tabela-resumo das tags para formatar texto

Para encerrar, esta tabela reúne as tags explicadas com o seu efeito visual e o caso em que cada uma é recomendada:

Tag	Efeito visual	Quando usar
<b>	Texto em negrito	Quando se quer apenas o visual de negrito, sem significado adicional.
<strong>	Texto em negrito	Quando o texto tem importância real dentro do conteúdo.
<i>	Texto em itálico	Para títulos de obras, palavras estrangeiras ou tom alternativo sem ênfase.
<em>	Texto em itálico	Quando a frase precisa de ênfase, como se fosse lida em voz alta.
<u>	Texto sublinhado	Apenas em casos pontuais, porque o sublinhado é associado a links.
<del>	Texto riscado	Para marcar conteúdo removido ou corrigido em um documento.
<s>	Texto riscado	Para indicar que algo já não é válido ou ficou obsoleto.

Resumo rápido

Se você quiser levar uma ideia central deste guia, ela pode ser resumida nestas orientações:

Para negrito visual, use ; para marcar importância, use .
Para itálico visual, use ; para marcar ênfase, use .
O sublinhado com deve ficar reservado a casos raros para não ser confundido com um link.
<del> e <s> riscam o texto e cada uma tem um matiz diferente.
Os formatos podem ser combinados aninhando as tags na ordem correta.
Se o formato for puramente decorativo, a alternativa limpa é o CSS e não tags de adorno.

Dominar essas tags transforma qualquer texto simples em uma página legível e bem hierarquizada, e é um primeiro passo sólido antes de avançar para as folhas de estilo. Quem publica conteúdo na web com regularidade percebe que detalhes como esses fazem a diferença entre um artigo que se lê com fluidez e um que cansa a vista.

Labels:

#html #negrito itálico #formatação de texto