html语义（二）

仅仅从标签上理解语义未免显得狭隘，语义应当不止如此。语义还应包括结构上的先后和层级逻辑。此处我们不讨论微格式，有关微格式，大家可以下去查阅资料。

一.结构上的先后（内容的重要性）。

什么才是具有良构的页面，如果不查看源代码，裸奔的页面层次结构清晰，内容划分合理，就算是一个具有良构的页面。

当然，即便是看起来长得一样的裸奔页面，其html结构可能也写的五花八门。这才是语义里最难也最有意思的地方。

我们来看看，一个最简单的页面的合理结构。

通常一个页面基本组成有三个部分，头部，内容和底部。html的书写顺序也应当如此，从头到底。

头部通常包含关于网站的logo，搜索，注册，导航等重要的信息，而内容部分可能包括了侧边栏信息和主要内容信息，底部就是无关紧要的联系信息和版权信息了。

那么，具体到头部的话，哪部分内容应当放在前面，哪部分应当放在后面，这是要权衡的。对于内容部分，分为侧栏和主要内容，假如是后台系统的话，谁前谁后都无所谓，若是前台，那就得把重要内容放在前面，侧边栏放在后面了。

来看看人人网的个人主页截图，这是个很好的反面教材：

 

哎，人人网都成这个吊样了，可见他们的前端是多么的懒惰啊。

相比之下，豆瓣就不一样了，难道是凑巧？

这里我们再说一个特例，比如导航（只有一级）。通常导航是使用无序列表来实现的。既然是无序列表，那么回到我们对无序列表的理解，导航的链接是不分先后次序的。

而事实上，大多数的导航链接是有先后顺序的，首页就放在第一位，产品介绍，产品新闻之类的就排在后面。从这个层面去理解的话，这种导航不是无序列表，而是有序列表。

来看看google产品面包屑的html结构：

使用了有序列表，而不是无脑的无序列表。

所以，对于内容先后性的理解也可以促使我们用到更合理的标签来规划页面。

二.层级逻辑

层级逻辑其实是指标签嵌套的逻辑。如果没有嵌套，语义显得单纯好理解，但是加了嵌套，语义就丰富多彩了。

对比以下两个示例：

1.

<p><a href="#">我家的<strong>小狗狗</strong></a></p>

2.

<a href="#"><p>我家的<strong>小狗狗</strong></p></a>

从html5角度来看，第二个示例的嵌套是合理的。

想想，a>span 和 span>a的区别。

好了，再对比另外两个示例：

1.

<h1>娱乐新闻<a href="#" class="more">更多</a></h1>

2.

<header><h1>娱乐新闻></h1><a href="#" class="more">更多</a></header>

其中缘由，各自去想吧。