This article is currently in the process of being translated into Portuguese (~43% done).
Italic & Bold or Strong & Emphasize
Eu mencionei anteriormente que o HTML não deveria ser usado para afetar a aparência da sua página da web. Assim como você pode deixar palavras ou frases em negrito ou itálico no Word, você pode fazer o mesmo usando HTML. Até agora, o elemento <b>, o <i>, o <em> e o <strong> eram puramente de apresentação, mas com o HTML5, um significado semântico foi adicionado a esses quatro elementos.
- O elemento <i> era para texto itálico, agora ele também serve pra texto alternativo, como termos estrangeiros, termos técnicos, ou instruções em linha
- O elemento <b> era usado para texto em negrito, agora também é usado como um desvio de estilo como palavras-chave em um documento com nomes de produtos.
- O elemento <em> era para dar ênfase, agora é usado para palavras ou frases que você pronunciaria de maneira diferente.
- Finalmente, o elemento <strong> é para algo com ênfase forte, que representa importância.
Abaixo estão alguns exemplos de como as diferentes tags de formatação devem ser usadas - clique em "Try this example" para ver como são formatadas as diferentes tags.
<!DOCTYPE html>
A foreign word, <i>smuk</i>, means beautiful in Danish <br /><br />
The phrase <b>semantinc meaning</b> might be keywords in this document<br /><br />
Alternate accentuation? Use the <em>em</em>, not the italic element.<br /><br />
If you want to write semantic code <strong>it is important that you understand the differences</strong>!
</html>Exemplo
No exemplo a seguir, uma citação de Macbeth de Shakespeare, o elemento <i> é usado para indicar direções, enquanto que o elemento <b> é usado para indicar a qual caractere a linha pertence:
Enter MACBETH and BANQUO
MACBETH So foul and fair a day I have not seen.
BANQUO How far is't call'd to Forres? What are these
So wither'd and so wild in their attire,
That look not like the inhabitants o' the earth,
And yet are on't? Live you? or are you aught
That man may question? You seem to understand me,
By each at once her chappy finger laying
Upon her skinny lips: you should be women,
And yet your beards forbid me to interpret
That you are so.
MACBETH Speak, if you can: what are you?
First Witch All hail, Macbeth! Hail to thee, thane of Glamis!
Second Witch - All hail, Macbeth, Hail to thee, thane of Cawdor!
Third Witch All hail, Macbeth, thou shalt be king hereafter!
Using the <i> and the <b> element in this does create one problem – what if you suddenly decide that you want it to look differently? This is where CSS styling comes in handy. By adding a class-attribute to each <i> or <b> element, you can make use of the semantic properties of the elements but still have full control over their look. The stage direction class could be abbreviated to stg-direc and the character class could be abbreviated to char, and then the markup would look like this:
<p>
<i class="stg-direc">Enter MACBETH and BANQUO</i>
<b class="char">MACBETH</b> So foul and fair a day I have not seen.
<b class="char">BANQUO</b>How far is't call'd to Forres? What are these
…
</p>O que você aprendeu
- Se você não usar o CSS para estilizar seus elementos, o conteúdo nos elementos <em> e <i> vai parecer o mesmo
- If you don’t use CSS to style your elements, the content in <strong> and <b> elements will look the same
- The <em> and the <strong> elements should be preferred to the <i> and the <b> elements
- These elements should not be used for citations and pullquotes, instead you should use the <blockquote> and the <aside> element
- You are incited to use classes in combination with these elements which gives you the opportunity to change the look of the elements and hereby use the elements semantically instead of visually
