昨天说到了nav元素，nav元素的确是描述导航，但这个导航应该是对本网站而言的，不应该将nav用到对于外部的友情链接啊，收藏夹或什么的，总之，对元素来说，要实施他正确的语义才是我们要讨论和研究的事情。

我们可以用article来描述页面想表达的实际内容，也就是说，这个内容页的核心信息。你可以这样考虑，这个页面中绝对不能去掉的内容有哪些（比如屏幕大小不够，带宽不够，存储空间不够，在各种恶劣的环境下），这些绝对不能去掉的，代表本业务核心价值的信息，就可以用article来描述。一般来讲，内容总应该有一个标题，所以article往往会包含一个h标记，如果有多个h标记，或页眉描述，请参考前面的文章。

如果article的内容比较多，需要有章节之分（给用于小屏幕的移动浏览器，或阅读器提示可以分页什么的）我们可以用section来描述。section和p不同，p描述的是一个段落，以我的理解就是一个自然段，前面空两格，一个自然回车，组成了一个p，多个p组成了一个section，而且有可能多个p还可以外带一个h什么的。当然是文档，就会有可能有header和footer的存在了。比如：

1. <article> 
2.     <hgroup> 
3.         <h1> 
4.             主标题  
5.         </h1> 
6.         <h2> 
7.             副标题  
8.         </h2> 
9.     </hgroup> 
10.     <section> 
11.         <h1> 
12.             第一章</h1> 
13.         <p> 
14.             自然段</p> 
15.         <p> 
16.             自然段</p> 
17.         <p> 
18.             自然段</p> 
19.         <p> 
20.             自然段</p> 
21.     </section> 
22.     <section> 
23.         <h1> 
24.             第二章</h1> 
25.         <p> 
26.             自然段</p> 
27.         <p> 
28.             自然段</p> 
29.         <p> 
30.             自然段</p> 
31.         <p> 
32.             自然段</p> 
33.     </section> 
34.     <footer> 
35.         <time>发表日期</time> 
36.     </footer> 
37. </article> 

上面这些元素中，用的比较灵活的是section，section描述的是一段独立的文本，其也可以包含article元素，马上我们就可以看到；section也可以描述一些简单的独立文本信息，这个时候它类似span元素。

 

在页面中那些附属的信息，比如广告，看了这篇文章的人也看了以下文章，相关产品啥的，这些有关联又不是正文的内容，我们用aside来描述。aside中的内容可以用ol和ul列出，也可以用article或section较为详细的描述。

1. <aside> 
2.     <article> 
3.         <header> 
4.             <h1> 
5.                 向你推荐</h1> 
6.             <h2> 
7.                 喜欢这篇文章的人还喜欢……</h2> 
8.         </header> 
9.         <ol> 
10.             <li> 
11.                 <section> 
12.                     <article> 
13.                         <h1> 
14.                             文章标题</h1> 
15.                         <section> 
16.                             <p> 
17.                                 摘要</p> 
18.                         </section> 
19.                     </article> 
20.                 </section> 
21.             </li> 
22.             <li> 
23.                 <section> 
24.                     <article> 
25.                         <h1> 
26.                             文章标题</h1> 
27.                         <section> 
28.                             <p> 
29.                                 摘要</p> 
30.                         </section> 
31.                     </article> 
32.                 </section> 
33.             </li> 
34.         </ol> 
35.         <footer> 
36.             <article> 
37.                 <h1> 
38.                     其他更多推荐</h1> 
39.                 <ol> 
40.                     <li>推荐1</li> 
41.                     <li>推荐2</li> 
42.                     <li>推荐3</li> 
43.                 </ol> 
44.             </article> 
45.         </footer> 
46.     </article> 
47. </aside> 

上面的代码描述了推荐两个有摘要的文章，和三个简单列表，当然列表中可以有链接。

 

现在所有的页面都会有图片，没有图片纯文字的页面设计非常少见了。在html4中我的理解是，如果图片代表了具体含义（该图片的存在与否会对页面的数据造成信息缺失）比如：广告图片（没有的话，广告商会很生气），公司logo，产品照片或用于对信息描述的照片，这些元素需要用img来描述，如果你认可这点，就应该明白为什么img强制需要alt属性了，在意外情况下，用户也应该从alt信息中获取你本来需要表达的数据信息。如果图片是提示性含义，比如箭头，hot，装饰性的，那用div的背景来处理，如果浏览器在特定设备上忽略这些元素，对页面本身的信息表达也没有影响。

原先的img虽然有alt属性，不过alt的属性不是显性的表现出来的，但一般出版网的规范是图片下面有一个关于图片的说明，html5现在是彻底的要要page真正的变成document，所以给出了一个新的描述标签figure。这是一个很好的标签，可以对文档内的图片给出独立的数据区域和和说明。

1. <figure> 
2.     <img alt="" /> 
3.     <img alt="" /> 
4.     <img alt="" /> 
5.     <img alt="" /> 
6.     <figcaption>这四个产品是我们最新的……</figcaption> 
7. </figure> 

要注意的是，figure希望内容是可以被描述或应该被描述的，而且描述的信息应该是和文档主题内容有关的，所以公司的logo显然不适合使用figure描述。如果你的文章中的配图和正文的主要内容也没有很多关联，比如弄了一个风景或人物照片仅仅是意境方面的，而不是描述文章中人物或地点的，那也不需要用figure元素，直接考虑img或div好了。

另外一个问题就是，在VS2008的HTML5验证中figcaption元素不支持。

还有就是figure不仅仅是描述图片，主要是描述信息流，所以figure应该可以包含描述图片，报表什么的。

这些HTML5提供的新的结构性的语义标签，基本上不是用来定义新的语义，都是用来定义新的语义区域，对阅读者来说没有什么大的意义，应该还是W3C的最初愿望，element定义是为了设备准备的，应该能让浏览器可以正确的了解你的信息，以便在特定的场合进行优化处理。

本文转自shyleoking 51CTO博客，原文链接:http://blog.51cto.com/shyleoking/803101