HTML Básico – Formatação de Texto

Certo, já conseguimos adicionar vários elementos HTML às nossas páginas, agora vamos ver como fazer mais formatações nos nossos textos.

Há várias tags que podemos usar para que nossos textos tenham uma aparência diferente da normal.

Por exemplo, podemos usar a tag <b> para deixar o texto em negrito, ou a tag <i> para transformar em itálico.

Vamos ver essas tags em ação?

<p> Este é um <b>texto em negrito</b>.</p> 
<p> Este é um <strong>texto extremamente importante</strong>.</p> 
<p> Este é um <i>texto em itálico</i>.</p> 
<p> Este é um <em>texto enfatizado</em>.</p> 
<p> Este é o <mark> texto destacado </mark>.</p> 
<p> Este é um <code>código de computador </code>.</p> 
<p> Este é um <small> texto menor </small>. </p> 
<p> Este é um texto <sub>subscrito</sub> e <sup>sobrescrito</sup>.</p> 
<p> Este é um <del>texto riscado</del>.</p> 
<p> Este é o <ins>texto sublinhado</ins>.</p>

Resultado:

Este é um texto em negrito.

Este é um texto extremamente importante.

Este é um texto em itálico.

Este é um texto enfatizado.

Este é o texto destacado .

Este é um código de computador .

Este é um texto menor .

Este é um texto _subscrito e ^sobrescrito.

Este é um texto riscado.

Este é o texto sublinhado.

Se você usar a tag <strong> e a tag <b>, vai notar que têm a mesma renderização pelos navegadores.

O mesmo acontece quando usamos a tag <em> e a tag <i>.

Contudo, há diferenças entre esses elementos.

Diferença entre <strong> e <b>

Ambas renderizam o texto destacado com negrito por padrão mas, em teoria, o <strong>é usado para indicar importância, enquanto o <b>serve apenas para chamar atenção.

Isso seria um bom exemplo da melhor prática:

<p><strong>ATENÇÃO!</strong> Você deve ter cuidado com isso...</p>
<p>Não deixe seu site ser <b>punido pelo Google</b></p>

Resultado:

ATENÇÃO! Você deve ter cuidado com isso…

Não deixe seu site ser punido pelo Google

Diferença entre <em> e <i>

Da mesma forma que vemos diferenças nas tags acima mas o resultado na tela é idêntico, temo funções diferentes para as tags <em> e <i>.

Por padrão, utilizamos o <em>para dar certa ênfase ao conteúdo, enquanto o <i> é usado para diferenciar do texto normal por razões de legibilidade.

Além disso, usamos o <i> para termos em outros idiomas, ou termos técnicos, citações e frases, etc, como a seguir:

<p>Cachorros podem ser <em>ferozes</em> com estranhos</p>
<p><i>Carpe Diem!</i> Aproveite o dia...</p>

Resultado:

Cachorros podem ser ferozes com estranhos

Carpe Diem! Aproveite o dia…

Nota: Use o <strong> e <em> quando precisar dar uma ênfase extra ao seu texto em nível de importância. No HTML5 as tags <b> e <i> agora têm significado semântico.

Citações

Outro recurso bacana que podemos usar para formatar nossos textos em relação às citações é a tag <blockquote>.

Elas são renderizadas geralmente com espaçamentos nas laterais com alguma margem acima e abaixo também.

Aqui está um caso de uso:

<blockquote>
    <p>Aprendi HTML5 com o Asllan Maciel e agora consigo criar meus sites!</p>
    <cite>Fulano de Tal</cite>
</blockquote>

Resultado:

Aprendi HTML5 com o Asllan Maciel e agora consigo criar meus sites!

Fulano de Tal

Nota: Repare que usamos a tag <cite> que é usada para citar – fazer referência – a uma pessoa ou trabalho de alguém.

Agora, se você precisa fazer uma citação curta, dentro de uma mesma linha, por exemplo, pode usar a tag <q>, que vai fazer com que o navegador inclua o conteúdo entre aspas.

Veja como ficaria:

<p>De acordo com a Organização Mundial da Saúde (OMS): <q>Saúde é o estado de completo bem-estar físico, mental e social</q>.</p>

Resultado:

De acordo com a Organização Mundial da Saúde (OMS): Saúde é o estado de completo bem-estar físico, mental e social.

Abreviações

Você pode querer usar abreviações que são uma forma encurtada de determinada palavra, frase ou nome.

Para usarmos no HTML, usamos a tag <abbr> preferencialmente junto com o atributo title para fazer com que o navegador marque a abreviação e, ao passar o mouse, possamos ver a informação contida no title.

Aqui vai um exemplo:

<p>No HTML procuramos seguir os padrões do <abbr title="World Wide Web Consortium">W3C</abbr></p>

Resultado:

No HTML procuramos seguir os padrões do W3C

Endereços de Contato

As páginas web geralmente acabam contendo endereços, que podem ser definidos usando-se a tag <address> como informação de contato.

A forma como o navegador interpreta essa tag é colocando certo destaque com espaçamentos e o texto em itálico.

Veja como seria:

<address>
Rua XPTO, 1000<br>
Rio de Janeiro, RJ<br>
Brasil
</address>

Resultado:

Rua XPTO, 1000
Rio de Janeiro, RJ
Brasil

Para mais tags de formatação, veja meu Guia de Referência de Tags.

Navegação

<< HTML Básico – LinksHTML Básico – Estilos >>