HTML tips: Make your code semantic

I recently read "Web Front-end development practices", and many of them deserve to be learned by friends on the front-end. based on my daily coding experience, I will share some front-end skills I learned from the book and summarized.

HTML semantics seems to be a common problem. Google also has a lot of semanticArticle. Why do we need semantic tags? In my opinion:Every tag in HTML has its specific meaning. Semantics means that we can use the appropriate tag at the appropriate position, to make people and machines (machines can be understood as browsers and search engines) clear at a glance.If my explanation is not clear enough, please google.

How can I use appropriate labels in a proper position?
This is a simple understanding logic. For example, H1 ~ H6 labels are used for title classes; Ul is used for unordered lists; OL is used for filling lists; DL is used for defining lists; em, strong labels are used to emphasize... to put it bluntly, each English definition of an HTML Tag determines its semantics (in the end of this article, I will put a comparison table of Common English definitions of HTML tags for reference ).
What makes people and machines clear at a glance?
The best way to check whether HTML pages are semantic is to remove the CSS links of the pages and check whether the webpage structure is orderly and whether the pages are still readable. Why? We all know that browsers have default styles (Chrome Web Developer Tools for chrome plug-in or Firefox Web Developer plug-in is recommended), such as H1 ~ H6, there will be bold/default style with reduced font size in turn, top and bottom margins, UL, ol, DL have default project symbols, strong has bold style by default... therefore, for the same page, HTML with good semantics can still perform well when CSS is removed from the page.
Another point is that good Semantic encoding is more friendly to search engines. Search Spider doesn't know your CSS, but it can recognize HTML tags.
The following is a simple example:

  Mr. Think's blog focuses on Web Front-end technologies, loves PHP, and advocates simple life.

  Mr. Think's blog focuses on Web Front-end technologies, loves PHP, and advocates simple life.
 

Through the simple example above and without any CSS definition, you should understand the difference between the two. if you are learning HTML5, its header, footer, sidebar, article and other elements are newly added semantic tags.
HTML coding semantics is a step towards high-quality front-end development. that is, better compliance with web standards can also make your pages still orderly after removing the style. for more details about semantics, You can Google or read the third chapter of Adam's Web Front-end development practices.
Appendix: Tag semantics comparison table in Chinese and English (deleting tags not supported by html5)

Tag Name	English	Chinese Translation
A	Anchor	Anchor
Abbr	Abbreviation	Acronyms
Acronym	Acronym	Abbreviation of the first letter
Address	Address	Address
B	Bold	Bold
Big	Big	Increase
BLOCKQUOTE	Block quotation	The block is referenced in
BR	Break	Line feed
Caption	Caption	Title
Center	Center	Center
Dd	Definition description	Definition description
Del	Delete	Delete
Div	Division	Separate
DL	Definition list	Definition list
DT	Definition term	Define terminology
Em	Emphasized	Increase
Fieldset	Fieldset	Domain set
Font	Font	Font
H1 ~ H6	Header1 ~ Header6	Title 1 ~ Title 6
HR	Horizontal rule	Level
I	Italic	Italics
INS	Inserted	Insert
Legend	Legend	Icon
Li	LIST ITEM	LIST ITEMS
Ol	Ordered list	Sort list
P	Paragraph	Section
Pre	Preformatted	Predefined format
S	Strikethrough	Strikethrough
Small	Small	Small
Span	Span	Range
Strong	Strong	Increase
Sub	Subscripted	Table below
Sup	Superscripted	Superscript
U	Underlined	Underline
Ul	Unordered list	Unordered list
VaR	Variable	Variable

Blog published in mr. Think: http://mrthink.net/html-tips-semantization/ reprint please note