Html skills: Make your code semantic. html skills: Make semantic code

Html skills: Make your code semantic. html skills: Make semantic code

First, there is a difference between the Semantics (Semantics) and the default style. The default style is the representation of some common tags set by the browser, the main purpose of semantics is to give you an intuitive understanding of the use and role of tags and attributes.

Html semantics seems to be a common problem. Baidu also has a lot of articles about semantics. 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.

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 to define 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's WebDeveloper Tools for Chrome plug-in is recommended, or Firefox's Web Developer plug-in), 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:

The Code is as follows:
<! -- Non-semantic -->
<Div id = "header">
<Div class = "h1"> Mr. Think blog </div>
<Div class = "h2"> focus on Web Front-end technology, love Php, and advocate simple life. </div>
</Div>

<! -- After semantics -->
<Div id = "header">
<H1> Mr. Think blog <H2> focus on Web Front-end technology, love Php, and advocate simple life. </Div>

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 styles.
Appendix: Chinese-English comparison table of tag Semantics

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