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

Source: Internet
Author: User
Tags comparison table

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

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.