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,

: the title of the table;
: 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.

,

,

,

,

,

, are used as titles, in descending order of importance.

is the highest level.

2.

Paragraph mark, if you know

as a paragraph, you will no longer use < br/> to break lines, and there is no need for

to distinguish paragraphs from paragraphs. The text in

will wrap automatically, and the line wrapping effect is better than
.

3., and

< ;b> The label semantics is "bold"

The label semantics is "emphasis"

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 and for emphasis, and use them purely in bold. .

4.

tag,
tag,
1. tag
   The tag semantics is to define an unordered list
   The tag semantics is to define an ordered list
   1. The tag semantics is to define a list item

      So when it comes to list items, you should use

      • or
        1. (or

           for layout) , instead of using or

           or even .

           5.

           tag,

           tag,

           tag

           tag semantics define a definition list

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

           The tag semantics is the definition part of the definition item in the definition list

           Therefore, when we use a titled list, we can use

           custom list implementation

           6. Tags <🎜 The semantics of >

           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.,

           ,

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

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

           The tag can be used with to provide the source address of quoted content.

           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.

           ,

           The semantics of the tag is to define an HTML table

           The semantics of the

           tag is to define the header cell in the table

           ,	,