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.
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.
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.
<i>Texto em itálico</i>
A TAG <em> deixa o texto em itálico e marca como semanticamente importante.
<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.
<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.
<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?).
<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.
<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.
<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.
<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.
