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 |