A maneira mais simples e eficiente de aprender HTML 5. Aula 7 - Formatando texto

Você não precisa usar estilos CSS para fazer formatação de texto HTML, basta usar tags demonstradas neste capítulo.

No capítulo 6 nós aprendemos sobre estilos, vimos várias maneiras de formatar um texto usando CSS, agora vamos estudar como formatar um texto usando HTML puro.

Essa informação é útil se você cria páginas na WEB, mas é tão importante quanto se você simplesmente publica textos em um blog ou site. Imagine que você esteja publicando um texto e o editor do CMS (Sistema de Gerenciamento de Conteúdo) não tenha um botão para formatar o texto corretamente, se você conhece as TAGs de formatação HTML você pode resolver esse problema facilmente.

O HTML possui elementos especiais para definir textos com significado especial. Você pode usar elementos com <b> e <i> para formatar a saída do texto como negrito ou itálico.

Veja um resumo dos elementos HTML projetados para tipos especiais de texto.

  • <b> - Texto em negrito;
  • <strong> - Texto importante;
  • <i> - Texto itálico;
  • <em> - Texto enfatizado;
  • <mark> - Texto marcado;
  • <small> - Texto pequeno;
  • <del> - Texto excluído;
  • <ins> - Texto inserido;
  • <sub> - Texto subscrito;
  • <sup> - texto sobrescrito.

Vamos ver cada elemento detalhadamente e um exemplo de como podemos usá-los.

Elementos <b> e <strong>

Como já sabemos, <b> marca um texto como negrito, mas não tem nenhuma outra importância além de negrito.


1 O texto a frente está <b>marcado de negrito</b>
        

Resultado

O texto a frente está marcado de negrito

O elemento <strong> também deixa o texto negritado, mas adiciona uma semântica de importância ao texto, algo mais relevante.


1 O texto a frente está <strong>marcado com strong</strong>
        

Resultado

O texto a frente está marcado com strong

Para o usuário que lê o texto, não faz diferença, mas para os robôs de busca da internet, um é totalmente diferente de outro. Então se você quer marcar um texto, mas não quer que ele seja visto como importante em uma busca, use o <b>, caso contrário, se você quer que o texto tenha importância em uma busca, use o <strong>.

Elementos <i> e <em>

Da mesma forma, os elementos <i> e <em> são iguais para quem lê o texto em um navegador, mas diferentes para os interpretadores de semântica no código HTML.

Ambos deixam o texto em itálico. A TAG <i> marca em itálico textos sem importância extra.


1 <i>Texto em itálico</i>
        

A TAG <em> deixa o texto em itálico e marca como semanticamente importante.


1 <em>Texto semanticamente importante em itálico</em>
        
Atenção! Para lembrar: Os navegadores mostram <strong> como <b>, e <em> como <i>. Entretanto, eles têm diferentes significados: <b> e <i> definem textos em negrito e itálico respectivamente, mas <strong> e <em> significam que o texto é importante.

Elemento <small>

Esse elemento faz com que o texto fique menor em relação aos outros em sua volta. Veja um exemplo para explicar melhor.


1 <h2>Título HTML e <small>texto diminuído</small> em relação aos outros</h2>
        

Resultado

Título HTML e texto diminuído em relação aos outros

Elemento <mark>

Essa TAG marca ou destaca um texto alterando o fundo. O padrão é amarelo, mas você pode mudar isso com uso do CSS.


1 <h2> HTML <mark>marcado</mark> em amarelo</h2>
        

Resultado

HTML marcado em amarelo

Elemento <del>

Elemento que risca o texto, como na escrita normal, quando você erra você risca o texto e escreve o correto na frente (você pode apagar, mas você entendeu o que eu disse neh?).


1 <p>Eu adoro comer <del>quiabo</del> pizza</p>
        

Resultado

Eu adoro comer quiabo pizza

Elemento <ins>

O elemento <ins> sublinha o texto, ins é uma abreviação de inserted (inserido). Eu entendo como sublinhado, mas no manual HTML, o significado semântico da tag é esse, inserido.


1 <p>Texto <ins>inserido</ins> com sucesso!</p>
        

Resultado

Texto inserido com sucesso!

 Elemento <sub>

Simplesmente subscreve o texto. Não há outra maneira explicar isso a não ser com um exemplo.


1 <p>Veja a parte do texto que está <sub>subscrita</sub>, é diferente.</p>
        

Resultado

Veja a parte do texto que está subscrita, é diferente.

Elemento <sup>

Essa TAG também vai se explicar melhor com um exemplo. O que ela faz é sobrescrever o texto.


1 <p>Veja o texto no <sup>alto</sup>, está <sup>sobrescrito</sup>, percebeu?</p>
        

Resultado

Veja o texto no alto, está sobrescrito, percebeu?

Essas são as TAGs de formatação de texto do HTML. Geralmente, desenvolvedores utilizam CSS para formatar textos, mas em alguns casos você pode fazer uso dessas TAGs. Outra situação, como já explicado, é se você escreve e precisa de uma formatação que o editor de texto não fornece através de um botão. A maioria marca textos em negrito com a TAG <strong>, se você conhece as TAGs, pode optar por simplesmente marcar com negrito e não como importante semanticamente.

Pessoal, fiquem ligados, o próximo capítulo é sobre elementos de citação e quotação, se você não sabe o que é isso ou se sabe, continue acessando nosso blog para entender mais sobre HTML5.

Aprenda as principais linguagens usadas na WEB.

Aqui você tem acesso gratuito às principais linguagens de programação web, não perca tempo, acesse nosso conteúdo e comece a programar agora mesmo.

Compartilhe:

Sobre o autor

Analista de Sistemas com foco atual na área de WEB. Amante de boa música, estratégias criativas. Gosto de trabalhar com quem tem talento, se não for para ser perfeito, melhor nem começar. Gosto de liderança, estratégias e, principalmente, pôr a mão na massa.