Semanticization of Html tags_html/css_WEB-ITnose

In order to make our website better crawled and included by search engines and obtain higher traffic more naturally, the semantics of website tags becomes particularly important. The so-called label semantics refers to the meaning of the label.

In order to better understand the semantics of tags, first look at the following example:

1 <table> 
2      <tr> 
3         <td>娱乐项目</td> 
4         <td>项目支出</td> 
5     </tr> 
6     <tr> 
7         <td>聚餐</td> 
8         <td>200元</td> 
9     </tr>
10 </table>

The above code clearly does not use semantics In order to make its structure clearer, the correct approach is as follows:

<table>    
<caption>支出统计</caption>    
<thead>        
<tr>            
<th>娱乐项目</th>            
<th>项目支出</th>        
</tr>    
</thead>    
<tbody>       
<td>聚餐</td>        
<td>200元</td>    
</tbody>
</table>

Among them,

63bd76834ec05ac1f4c0ebbeaafb0994: the title of the table;
a5d2e227ff8514159df0d7857fa34d99: Column header of a column of the table.

Yes, the purpose of semantic tags is to be friendly to search engines. With good structure and semantics, our web page content will naturally be easily crawled by search engines. This approach complies with search engine retrieval rules. , the website promotion can save a lot of effort, and it is more maintainable because the structure is clear and very easy to read. This is also an important step in search engine optimization (SEO). Of course, there is much more to SEO than that. To learn more about SEO, you can go to:

http://baike.baidu .com/link?url=f_v0cbvzTIxhwKNaJtdd-qGjGMefJww4ko9pJaZj4rJArylR_dpUZsobKKLlMKBi

http://www.seoxuetang.com/

Back to business, so what we have to do is to semanticize our HTML tags and attributes. Such as:

p Semantics: Division (separated)
span Semantics: Span (range)
ol Semantics: Ordered List (sorted list)
ul Semantics: Unordered List (unordered list)
li Semantics: List Item (List Item)

1.c852f89da0acc8a6a464f0668266042e

4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da, 684271ed9684bde649abda8831d4d355 , 3f7b3decd2dcafb07b84d2d3985d9f40, 39318b6f72ed39310530dfd69d0078e1, 4e9ee319e0fa4abc21ff286eeb145ecc, are used as titles, in descending order of importance. 4a249f0d628e2318394fd9b75b4636b1 is the highest level.

2.e388a4556c0f65e1904146cc1a846bee

Paragraph mark, if you know e388a4556c0f65e1904146cc1a846bee as a paragraph, you will no longer use 22bae102f4da5b58d7355b39d396e2b3 to break lines, and there is no need for 076402276aae5dbec7f672f8f4e5cc81076402276aae5dbec7f672f8f4e5cc81 to distinguish paragraphs from paragraphs. The text in e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 will wrap automatically, and the line wrapping effect is better than 0c6dc11e160d3b678d68754cc175188a.

3.a4b561c25d9afb9ac8dc4d70affff419, 907fae80ddef53131f3292ee4f81644b and 8e99a69fbe029cd4e2b854e244eab143

< ;b> The label semantics is "bold"

907fae80ddef53131f3292ee4f81644b The label semantics is "emphasis"

8e99a69fbe029cd4e2b854e244eab143 The label semantics is "stronger emphasis" and em is in italics by default Indicated, strong is indicated in bold.

When we know the semantics of these three tags, it is easy to decide which one to use to emphasize important keywords when doing SEO. Use 907fae80ddef53131f3292ee4f81644b and 8e99a69fbe029cd4e2b854e244eab143 for emphasis, and use them purely in bold. a4b561c25d9afb9ac8dc4d70affff419.

4.ff6d136ddc5fdfeffaf53ff6ee95f185 tag, c34106e0b4e09414b63b2ea253ff83d6 tag, 25edfb22a4f469ecb59f1190150159c6tag

ff6d136ddc5fdfeffaf53ff6ee95f185The tag semantics is to define an unordered list

c34106e0b4e09414b63b2ea253ff83d6The tag semantics is to define an ordered list

25edfb22a4f469ecb59f1190150159c6The tag semantics is to define a list item

So when it comes to list items, you should use ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6 or c34106e0b4e09414b63b2ea253ff83d625edfb22a4f469ecb59f1190150159c6 (or 5c69336ffbc20d23018e48b396cdd57a73de882deff7a050a357292d0a1fca9467bc4f89d416b0b8236eaa5f43dee742 for layout) , instead of using f5d188ed2c074f8b944552db028f98a1 or e388a4556c0f65e1904146cc1a846bee or even 45a2772a6b6107b401db3c9b82c049c2.

5.5c69336ffbc20d23018e48b396cdd57a tag, 73de882deff7a050a357292d0a1fca94 tag, 67bc4f89d416b0b8236eaa5f43dee742 tag

5c69336ffbc20d23018e48b396cdd57a tag semantics define a definition list

73de882deff7a050a357292d0a1fca94The tag semantics is the definition part of the item in the definition list (i.e. the term part)

67bc4f89d416b0b8236eaa5f43dee742The tag semantics is the definition part of the definition item in the definition list

Therefore, when we use a titled list, we can use 5c69336ffbc20d23018e48b396cdd57a73de882deff7a050a357292d0a1fca9467bc4f89d416b0b8236eaa5f43dee742 custom list implementation

6. Tags

tags are used to combine inline elements

in the document (in addition, the difference between

should be distinguished,

is a block-level element (block level), but inline elements. The content of the former will automatically wrap, while the content of the latter will not automatically wrap before and after

)

7.1244aa79a84dea840d8e55c52dc97869, b8a712a75cab9a5aded02f74998372b4, f3a85e1241a187c5ac462d886e9a968b

1244aa79a84dea840d8e55c52dc97869 The semantics of the tags are to mark short single-line quotes, and the web browser will automatically recognize them. The content between 1244aa79a84dea840d8e55c52dc97869

b8a712a75cab9a5aded02f74998372b4 The semantics of the tag are used to mark long quotes of one or more paragraphs

f3a85e1241a187c5ac462d886e9a968b The tag can be used with

Look at an example

1 <p> <cite>孔子</cite>曰：<q>有朋自远方来，不亦乐乎</q>.2 </p>

1 <blockquote cite=" 
2  <p>&#8220;我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，
我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，为了兼容 Netscape 和 IE，网站
不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来
支持这种新技术或新设备，例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大
量的带宽；针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是
一种恶性循环，是一种巨大的浪费。&#8221;
3 </p>
4 </blockquote>

8.f5d188ed2c074f8b944552db028f98a1, b4d429308760b6c2d20d6300079ed38e, b6c5a531a458a2e790c1fd6421739d1c, 63bd76834ec05ac1f4c0ebbeaafb0994

The semantics of thef5d188ed2c074f8b944552db028f98a1 tag is to define an HTML table

The semantics of the

b4d429308760b6c2d20d6300079ed38e tag is to define the header cell in the table

63bd76834ec05ac1f4c0ebbeaafb0994 The semantics of the tag is to define the table title

9.bb9345e55eb71822850ff156dfde57c8 tag, d5fd7aea971a85678ba271703566ebfd tag, 4750256ae76b6b9d804861d8f69e79d3 tag The semantics of the ;input> tag is used to collect user information. According to different type attribute values, the input field has many forms. Input fields can be text fields, checkboxes, masked text controls, radio buttons, buttons, etc. The semantics of the

4750256ae76b6b9d804861d8f69e79d3 tag provides more powerful functions for defining multi-line text input controls

button controls compared with 8e03557d3950bf880a2e4583affa2fab and richer content. Everything between the bb9345e55eb71822850ff156dfde57c8 and 65281c5ac262bf6d81768915a4a77ac0 tags is the content of the button, including any acceptable body content, such as text or multimedia content. The semantics of the

tag is used to collect user information. According to different type attribute values, the input field has many forms. Input fields can be text fields, checkboxes, masked text controls, radio buttons, buttons, etc.

button control provides more powerful functions and richer content than . Everything between the tags is the button's content, including any acceptable body content, such as text or multimedia content.

10.2e1cf0710519d5598b1f0f14c36ba674 Label

2e1cf0710519d5598b1f0f14c36ba674 The semantics of the label is to define a label (mark) for the input element

11.426be984ffbbb815d7d88e3543a85d91, 823db3943044a0a9a620ada8d4b1d965

The semantics of the 426be984ffbbb815d7d88e3543a85d91 tag is to define text that has been inserted into the document. The semantics of the

823db3943044a0a9a620ada8d4b1d965 tag is to define deleted text in the document.

426be984ffbbb815d7d88e3543a85d91 is used together with 823db3943044a0a9a620ada8d4b1d965 to describe updates and corrections in the document. If you know del, don't use 2e44d2d3284d23d932e1fd85f3d4cf3a as a strikethrough. Using del is obviously more semantic. And del also has cite and datetime to indicate the reason for deletion and the time of deletion. ins means insert and also has such attributes.

For the usage of these two tags, please see: http://www.w3school.com.cn/tags/tag_ins.asp

http://www.w3school.com.cn/tags/tag_del.asp

The above is the Html tag The content of semantic_html/css_WEB-ITnose, please pay attention to the PHP Chinese website (www.php.cn) for more related content!