What is the semantic difference between and ? Do they replace and ?

Question

What is the semantic difference between and ? Do they replace and ?

Asked 10 years, 3 months ago

Viewed 8,505 times

50

They say the element  should be used for emphasis, and the  for even more intense emphases. This seems rather confusing. When and why use each of them? And  and , should still be used in any situation? They have been replaced by  and ?

use <'i'> for italics and <'b'> for bold, ready, finished! :)

– Ale

2014/10/27 at 20:43
11

This is neither recommended nor answers to what I asked!

– bfavaretto

2014/10/27 at 20:47
I wonder, why complicate simple terms? Simple terms, as the name suggests, answer with simple arguments, now complicating the simple, is simply wasting time.. think!

– Ale

2014/10/27 at 21:41

3 answers

56

The tags , ,  and  end up being mistaken or used erroneously because, most of the time, they have the same type of rendering in the browser (the first two having the text in italics, and the last two being in bold). But their meanings differ, being that:

 = Used to designate a distinctive text, such as in special terms or use in taxonomy.

Example: A arvore, de nome em latin Araucária brasiliensis
Output.: The tree, named in latin Araucaria brasiliensis

 = Used to emphasize a word (or phrase) that you would speak with intonation differentiated from the rest of the text and that would change its meaning.

Example: E ela jura que não sabe, não é mesmo?!
Ouput: And she swears that nay you know, it’s really not?!

 = Directed to texts that need to be highlighted, but without connotation or explicit explanation.

Example: O e-mail dela é [email protected]
Output: Her email is [email protected]

 = Used to emphasize a word or phrase of high importance.

Example: Pessoal, eu realmente preciso destes relatórios para amanhã sem falta!
Output: Guys, I really need these reports for tomorrow without fail!

The tags  and  were very useful at the beginning of the Web era, when it was common for HTML tags to be used to visually style the content of a page.

With the evolution of the internet and browsers, and with the creation of the CSS language, it is ideal that the content is stylized via CSS properties, and not via tags (or attributes) HTML, which removes the need to use the above tags for visual purposes and makes them useful only for semantic and usability use.

^References:

^{http://www.w3.org/TR/html5/text-level-semantics.html#the-i-element}
^{http://www.w3.org/TR/html5/text-level-semantics.html#the-em-element}
^{http://www.w3.org/TR/html5/text-level-semantics.html#the-b-element}
^{http://www.w3.org/TR/html5/text-level-semantics.html#the-Strong-element}
^{http://html5doctor.com/i-b-em-strong-element/}
^{http://engineeredweb.com/blog/2013/html5-semantic-diff-bold-strong/}

4

Excellent explanation and references, thanks! But I still find the difference a little vague from the in to the Strong. If you use a different intonation, it’s often because it’s important, isn’t it? I understand the difference in the examples given, but when applying to any content I do not know if it will be so clear.

– bfavaretto

2014/09/12 at 13:23
1

+1 for the references.

– Oralista de Sistemas

2014/09/12 at 13:27
1

@bfavaretto, I see the  as a way of showing that you used a different intonation in the sense of more sudden terms, for example to define an ironic passage in your sentence. In the case of  would be something of utmost importance and prominence.

– Kazzkiq

2014/09/12 at 13:27
Got it. I’ll keep that in mind the next time I need them in practice, and see if it works :)

– bfavaretto

2014/09/12 at 13:29

Browser other questions tagged html html5 semantics

You are not signed in. Login or sign up in order to post.

by Sergio • **133,294** points · Answer 1 · 2014-09-12T13:20:48+00:00

Both are valid and it seems that the difference between them becomes clearer and clearer. Although they serve approximately the same goal, in this month’s W3C description the differences are clear to  and :

The Strong element represents Strong importance, seriousness, or urgency for its Contents.

That is, the element  should be used to describe/represent "strong importance", "seriousness" or "urgency" in its contents.

In the same document the element  is described as a piece of text where it is intended to call the homage for practical reasons without adding meaning of importance and without meaning change of "tone of voice" or behavior.

In the original:

The b element represents a span of text to which Attention is being Drawn for utilitarian purposes without Conveying any extra importance and with no implication of an Alternate voice or Mood, such as key words in a Document Abstract, product Names in a review, actionable words in Interactive text-driven software, or an article lede.

The cases of  and  are less clear. In this case the authority says the  should be used in technical terms, where the text is of a different type as in taxonomy names or technical terms. The element  is the most ambiguous, but one important difference is that they can be used "nested" ^{in English "nested"}. That is, if we use Hoje está um lindo dia, certo? the word beautiful will have a different accent level than the rest of the sentence.

I imagine that these more or less subtle differences will be important in the future in programs that interpret HTML. In fact they are already so that, for example, blind people can have extra information about this text.

by StomperHK • 57 points · Answer 2 · 2021-05-29T00:05:43+00:00

: It serves to emphasize a particular text, as if you were increasing the intonation of your voice to make that word detached and visible.

Ex.:

<p>
    <em> Faça sua lição! </em>
</p>

: It gives importance/seriousness/urgency to a given text. Its rendering is currently made in bold, but in the past the underscore was applied. Only use it if the text in question is very important for the user.

Ex.:

<p>
    <strong>Para agora</strong> com isso.
</p>

Another function of  is to give a higher hierarchy/prominence to a given word.

Ex.:

<h1> Capítulo 1 - <strong>A Crise</strong> </h1>

You can nest a  within a  or a  within a ... to give even more emphasis/importance to the text in question, just don’t overdo the nesting (use at most 3 levels and look there).

These little guys above serve to replace the  and the ? No! Each tag has to be semantic value and its utility. For example, let’s take a look at the 

: It is used in ideomatic texts, like when you want to write a Chinese proverb, or an English expression... You use , just be sure to use the attribute lang together if possible.

EX.:

<p>
    <i class="phrase" lang="en-us"> You are making up excuses </i> é uma frase que significa: você está criando desculpas.
</p>

Another case is when you want to name a taxonomic name.

Ex.:

<p>
    O <i class="taxonomy"> Homo Sapiens </i> é o ser humano.
</p>

Psu: since the  has low semantic value, put a class in it to help anyone reading the code and also to increase SEO.

Have more use cases also: Names of vessels, transliterations, dreams, thoughts, technical terms... Anyway, you can see that the  has much more uses than the , but that does not mean that the  replaces the . Each element is special.

But what about the  and the ? It’s the same thing:

: It serves for material purposes, like when you want to give a little importance to an element, but nothing very considerable. It even serves to mark keywords in a document.

EX.:

<p>
    O <b>HTML</b> é uma <b>linguagem de marcação</b> muito antiga. Ela foi criada por <b>Tim Bernes-Lee</b>
</p>

Again: no tag replaces each other, both have their use cases.

Note also that you can use a stylesheet to overwrite the styles of the above elements, this is normal and correct.

What is the semantic difference between <em> and <Strong>? Do they replace <i> and <b>?

3 answers