Analysis of HTML semantic tags

What is HTML semantics

HTML semantics means selecting appropriate tags to write code based on specific content. It makes it easier for developers to read and write more elegant code, and at the same time allows search engine crawlers to better identify it.

Why semantics

Beneficial to SEO: Search engine crawlers cannot read unsemantic spans and divs, so semantic tags can enable crawlers to capture more effective information.
Preparation for CSS file reading failure: In case the CSS file fails, semantic HTML can also present better content structure and code structure.
Facilitate parsing by other devices (such as screen readers, blind readers, mobile devices).
Facilitates team development and maintenance.

Analysis of specific semantic tags

This article is mainly to analyze the differences in semantics of some HTML tags. At the same time, we also explore the newly added semantic tags of HTML5.

1. ul/ol (list label)

Although ul and ol are both list items, there is still a big difference in their specific use.

A. ul (unordered list)

Note: The full English name of ul unordered listis translated into Chinese as an unordered list. Represents an item in a list. There is no order of precedence. Most lists on web pages are unordered lists.

<ul>
  <li>Lxxyx的博客</li>
  <li>Lxxyx的评论</li>
  <li>联系Lxxyx</li>
</ul>
<!-- 列表中的三个项目，均没有前后顺序的分别。 -->

B. ol (ordered list)

Explanation: The full English name of ol ordered listrepresents the items in the list. There is a sequence. This is the essential difference between ol and ul.

<ol>
  <li>1. Lxxyx的第一篇文章</li>
  <li>2. Lxxyx的第二篇文章</li>
  <li>3. Lxxyx的第三篇文章</li>
</ol>
<!-- 列表中的三个项目，有前后顺序的分别。 -->

2. dl, dt, dd (definition list)

Note: dl, dt, dd are custom lists, but their usage is different from the previous ul/ol. A custom list is not just a list of items, but a combination of items and their comments.

dl: English meaning is definition list, it functions as a definition list.
dt: English meaning is defines terms, the function is to define the items in the list.
dd: The English meaning is defines descriptionthat it is used to define comments for items in the list.

Example:

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

C. b/strong, i/em (emphasis tag)

Note: In HTML, b and strong are both bold, and i and em are italic. But from HTML4 to HTML5, another change has occurred. So it is necessary to write it down.

1. b/strong(bold)

Note: Although b and strong have the same display effect, they both make the font bold. But b has changed again in HTML5.

b tag (bold):

HTML4 definition:

The  tag is for "offset text conventionally styled in bold, without conveying any extra emphasis or importance.
// It means that the b tag only means bold, without any emphasis. (Just for layout or good looks)
<hr/>

HTML5 definition:

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. // 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
. Text. Like keywords in the summary, product names. Or a typesetting method that represents emphasis

2.strong tag (full name is stronger emphasis):

 represents a span of text with strong importance.a  tag within another  tag has even more importance.

// The meaning of the strong tag is to emphasize the tone and emphasize more importance. If two strong tags are nested, it also means extremely important. The importance of strong is greater than that of em tag

Summary: b is just bold and has no semantic meaning. But the strong tag means to emphasize the tone.

2. i/em(italic)

Explanation: Just like the relationship between b and strong. The correspondence between i and em is also easy to understand.

i tag (full name is italic):

HTML4 definition:

The  tag is for "text conventionally styled in italic". There is no semantic meaning.
// HTML4 means that the i tag just displays the font in italics without any semantic meaning
<hr/>

HTML5 definition:

The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose.
// The i element now represents a span of text that highlights different opinions or moods in the article, such as foreign language, technology Terminology, or italicized text for typography

em (full name is emphasis):

The  represents a span of text with emphatic stress.

// It means that em has the meaning of emphasis.

Summary: i is just italicized and has no semantic meaning. But the em tag has enhanced semantics.

3.em/strong (emphasis tag)

Note: In the above introduction, em and strong have been introduced. The difference can be distinguished by reading English.
The full name of em is: emphasis, which means emphasis.
The full name of strong is: stronger emphasis, which means a stronger emphasis.
Summary: Both em and strong tags have emphasis semantics, but the emphasis expressed by the strong tag is greater than that of em.

Summary and reference links

In this part, I consulted too many documents and information. After reading html4, I found that html5 had changed its meaning, so I had no choice but to go to w3c to read the specifications.
Summary: i and b are given semantics in Html5, which is different from html4. The difference between em and strong is the degree of emphasis.

Reference links:

Using and elements
HTML5: The Semantic Difference Between Bold and Strong

Summarize

That’s all for the moment. The focus is on the differences between b/strong and i/em tags. It is also a blind spot in current front-end learning.
I saw a sentence two days ago:

"Many people work very hard to learn JavaScript, thinking that learning JavaScript is everything. But they ignore the fact that JavaScript is actually a 'glue language', which is used to bond HTML and CSS."

After seeing this sentence, I decided to study HTML and CSS seriously during the winter vacation. Although these things are simple, they are also difficult to write well. For example, I recently learned Sass, PS cutting, etc. No matter which one, it is a technical blind spot.