On the semantic of web

What is Web semantics?

HTML5 standard out of time, I have been surprised why to define so many header Footer Nav article standard, div busty good, convenient developer memory AH. But when the page is developed, the face of all the pages are div tags, it will be confusing, where is the page header, where is the text. Of course we can open with a browser, F12, it is clear, but if it is a web crawler, it is not so easy to identify this thing.

Referring to the definition of wiki, semantics is a special term in front-end development, the advantage is that the label semantics can help to construct good HTML structure, facilitate the indexing and crawling of search engines, and also help the page display as much as possible on different devices, and also help to build clear institutions, Facilitate the development and maintenance of the team.

In layman's terms, the structure of the HTML is clear, it is the paragraph with the P tag, which is the footer of the footer tag, and do not unify all with Div.

Why Web Semantics

In fact, the definition of wiki is very clear. The benefits of semantics are three points

1. Facilitates search
2. Easily compatible with different devices
3. Clear structure, conducive to team development, maintenance

What to do

A more classic case is that the person who is a beginner of Word will often use a space to indent, with a carriage return to fill the page, the layout of the page changes, it will be confused. So we have to use the indentation of Word itself, the page break function, really is telling the computer this layout of the real intention to make typesetting adaptability. HTML is not a binary file, causing people to be more casual at the time of writing. We should always focus on some of the semantic tags, commonly used and memorized.

• The planning of H1~h6

There should be only one headline in an article h1 , which is the structure of every blog post. Then according to the specific content of the article, there will be several h2 and nested h3 , so far my blog has not been used to H4 below the title

• P

Each paragraph should be used p to indicate, by default, p is a certain indentation and line spacing, if you do not want this layout, you should also write CSS to control

• Ul,ol,li (Unordered list,ordered list,list Item)

liMust be in ul or ol inside, when we just enumerate some data, but do not reach a point of this semantics, or in some information on the site news list, should use this semantic tag, for example, you are currently looking at.

• DL,DT,DD (Description list,description list term,description list description)

This represents a hierarchical progression of a description with a list of descriptions, a list dl dt of headings, a dd list of descriptions such as

    <dl>    <dt>中国城市</dt>    <dd>北京 </dd>    <dd>上海 </dd>    <dd>广州 </dd>    <dt>美国城市</dt>    <dd>华盛顿 </dd>    <dd>芝加哥 </dd>    <dd>纽约 </dd>    </dl>

：

• Em,strong

Because I am using markdown Grammar to write Bo, these two tags are more used by the grammar of the test italic em test to strengthen strong

• Header,nav,article,section,aside,footer

This is important for the semantics of the detail page, where a graph is used to illustrate the semantics of each label

• Th,tbody

Table header and repeating list contents, the normal table should distinguish between the table header and the contents of the body. The table header is bold and centered by default.

• Address

Represents a contact, convenient crawler immediately find your contact information, of course, it may be more practical to use the Office address

    <address>    Written by p2227<br />    contact me : kuangqiyi(At)gmail.com <br />    Address: searching the next bussiness address<br />    </address>

• Dfn,code,samp,kbd,var,cite

These elements and EM, strong are all called phrase elements, and their semantics are as follows

label	Semantics
em	Rendered as stressed text.
strong	Define the important text.
dfn	Define a definition project.
code	Defines the computer code text.
samp	Defines the sample text.
kbd	Defines the keyboard text. It indicates that the text was typed from the keyboard. It is often used in computer-related documents or manuals.
var	Defines a variable. You can use this tag with <pre> and <code> tags.
cite	Defines a reference. You can use this tag to define references in a reference, such as the title of a book or magazine.

My list of limited, detailed in the actual use to slowly remember. Concrete implementation should also be combined with a specific project team to develop a standard, and then strictly enforced, in order to implement the real.

On the semantic of web