< i >, < b > e < u > - Como escrever em itálico, negrito e sublinhado em HTML

Agora que já aprendemos como colocar trechos de texto dentro de um mesmo parágrafo, bem como produzir quebras de linha à qualquer momento em nossos sites através do artigo passado, sobras as tags <p> e <br />, vamos nos aprofundar mais na formatação de textos.

Neste tutorial de nosso curso de HTML, vamos ensinar a vocês como deixar um texto em negrito, itálico e como sublinhar.


A tag <b>, como deixar um texto em negrito no HTML

Para fazer com que um trecho de um texto fique em negrito, devemos colocar esse trecho entre as tags:
<b> e </b>

A letra 'b' é de bold (negrito, em inglês).
Usamos o negrito para destacar uma certa palavra ou trecho de um texto, serve para realçar e destacar e especificar uma parte do texto. Ou seja, só deixe em negrito os trechos mais relevantes, que contenham a ideia principal daquilo que você quer frisar.

Como nossa apostila de HTML também vai ensinar como rankear bem seus sites nos resultados de busca (na seção de SEO), é importante que você saiba que o Google dá muita importância aos trechos em negrito de seu site, ele sabe que se está em negrito, aquilo deve ser mais importante.

E assim como ele beneficia, também pode punir seu site, caso você use o negrito em excesso e de forma errada. Por isso, só negrite as partes mais relevantes de seus textos
Já notou que palavras gostamos de colocar em negrito, para destacar as palavras-chaves de nosso site para o Google? Dica: no parágrafo passado fizemos isso.

Por exemplo, uma das maiores confusões que as pessoas fazem a respeito do HTML é dizer que ele é uma linguagem de programação, o que não é verdade, pois ele é uma linguagem de marcação.
Então, uma frase que explique isso seria:
"O HTML não é uma linguagem de programação, é uma linguagem de marcação."

O código HTML deste trecho é:
"O HTML não é uma linguagem de programação, é uma linguagem de <b>marcação</b>."

A tag <i> - Como deixar um texto em itálico

Itálico é um efeito que usamos que faz com que a fonte que estamos escrevendo fique inclinada para a direita, fazendo parecer que é um texto mais próximo de uma caligrafia humana, pois diferente das fontes convencionais, não é quadrada e reta.

Assim como o negrito, também usamos o efeito itálico para enfatizar um trecho de um texto.
Outros usos do itálico são:

  • citar nomes de livros e filmes: "O Use a Cabeça - HTML com CSS e XHTML é meu livro favorito sobre como criar sites". O código HTML desse trecho é:

"<i>O Use a Cabeça - HTML com CSS e XHTML</i> é meu livro favorito sobre como criar sites"

  • mencionar uma fala de outra pessoa: "HTML não é importante", veio me dizer aquele noob.

"<i>HTML não é importante</i>", veio me dizer aquele noob

  • escrever em outras línguas: "HTML significa HyperText Markup Language"

 "HTML significa <i>HyperText Markup Language</i>"

A tag <u> - Como deixar um texto sublinhado (com underline)

Finalizando esse simples tutorial de nossa Apostila de HTML, vamos ensinar à você como sublinhar um trecho de um texto.
Esse efeito com certeza você conhece, e assim como o negrito e o itálico em HTML, servem para dar um realce ao seu texto, pois chama bastante atenção.

Você já deve ter notado também que o sublinhado é bastante usado em links por exemplo.
A tag HTML para escrever sublinhado é:
<u> e </u>

A letra U é de underlined, que significa sublinhado em inglês (notou que colocamos as palavras em inglês em itálico? É uma boa prática).
Aqui, no curso HTML Progressivo, gostamos sempre de frisar o motivo das tags terem tais nomes.
Compreendemos que é complicado e difícil decorar vários códigos de tags, porém se você entender o motivo do nome, verá que não é tão complicado assim.

Exercícios de HTML

Como já estudamos tag aninhadas aqui em nosso curso HTML Progressivo, você também pode usar sua criatividade para aninhar essas três tags. Então, lanço um desafio para você, consegue reproduzir os 7 efeitos seguintes?

Eu sei criar site
Adoro criar sites
Estou aprendendo a criar um website
Estou gostando muito de HTML
Como ser um webmaster ?
Como criar um bom site ?
Resposta: HTML Progressivo

Um comentário:

Gabriela Dias disse...

IMG]http://i60.tinypic.com/lxj0h.png[/IMG]

Não sei se vai aparecer né '-'