The difference between em and strong can be discussed at three levels.
First look at the instructions in HTML 4.01:
EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.
em means emphasis, strong means stronger emphasis. The concise and concise statement shows the origin of the naming of em and strong. And in the browser, em is expressed in italics by default, and strong is expressed in bold. This is the first level of difference.
At the second level, there are good summaries in the two articles Emphasis in context versus overall highlighting and em vs. strong:
em is for local emphasis. You see? Local emphasis. If you would emphasize a word in speech, use em.
strong is for global highlighting. When somebody looks at your document, at a glance, certain words and phrases should jump out. These are the words and phrases that make up the gist of the content — the highlights.
em is used for local emphasis, and strong is used for global emphasis. From a visual perspective, the emphasis of em is in order, and you will only notice it when you read somewhere. The emphasis of strong is a random and unordered key phrase that immediately stands out when reading a certain article. Italic and bold just satisfy these two visual effects, so they have become the default styles of em and strong.
Do you think it has been explained clearly above? Let’s take a look at the differences at the third level. It is explained in detail in the HTML5 draft:
The em element represents stress emphasis of its contents. The placement of emphasis changes the meaning of the sentence.
The strong element represents strong importance for its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
em represents the stress emphasis of the content, and strong represents the importance of the content. Strong will not change the semantics of the sentence, but em will change the semantics of the sentence. And gave a very good example:
<p><em>Cats</em> are cute animals.</p>
Emphasis on cats, discussing which animal is smart and cute.
<p>Cats <em>are</em> cute animals.</p>
The emphasis is on whether cats are smart and cute.
<p>Cats are <em>cute</em> animals.</p>
Emphasizing smartness and cuteness, the discussion is whether cats are smart and cute or stupid and annoying.
<p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong> Take any gold you find.
<strong><strong>Do not take any of the diamonds</strong>,
they are explosive and<strong>will destroy anything within
ten meters.</strong></strong> You have been warned.</p>
Strong expresses emphasis on importance and will not cause a change in the meaning of the sentence. Finally, note that both em and strong can have multiple values. For example, two strong can be used to indicate that the content is important.
It can be seen that the local emphasis and global emphasis mentioned at the second level are not accurate enough. The mystery of the difference between em and strong is fully explained in the HTML5 draft. It is recommended that you read the HTML5 draft carefully when you have time. The semantics of many elements are explained very clearly, which is very valuable for us to use the most appropriate labels in the most appropriate places.
Finally, in the replies to the article "Front End and Migrant Workers" and in the emails received, I unfortunately did not find anyone who knew the difference at the third level. Therefore, the gifts I prepared (I actually prepared 10 of them) were so lonely that I couldn’t send them out. However, this article is only an introduction. Next, I will use a series of articles to explore the semantics of elements in HTML. The promise of gifts continues to be valid, leaving it to the next topic:
Please explain the semantics of dl and list at least 5 usage scenarios.
You can check the information and post the results in the reply, or send it to me by email. The gifts are limited and will be given to the first 10 correct answers.
Supplement: After discussing it with some friends, my final opinion is:
em is the emphasis of the sentence, and whether it is added or not will cause semantic changes.
Strong is to emphasize the importance, and it has nothing to do with the local or the global situation. You can also use strong to emphasize the local part. Strong emphasizes the importance and does not change the meaning of the sentence.