HTML语义化之常见模块

用合理的HTML标记以及特有的属性去格式化文档内容。

浏览器会根据标签的语义给定一个默认的样式。

判断网页标签语义是否良好的一个简单方法就是:去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。语义良好的网页去掉样式后结构依然很清晰。

一个语义良好的页面，h标签应该是完整有序没有断层的。

标题与内容

标题和内容模块如下图所示。

这种标题配内容的模块。我们可以用如下几种方案来实现同样的效果

方案一

<div class="h2">标签的语义<a href="#">更多 &gt;&gt;</a></div>
<div class="p">
HTML才是最重要的...修饰结构的。<span class="strong">正确地做法是先确定HTML</span>，确定语义化的标签，再来选用合适的CSS
</div>
<div class="p">
判断网页标...简单方法就是:<span class="strong">去掉样式</span>，看网页结构是否组...结构依然很清晰。一个语义良好的页面，<span class="strong">h标签应...有断层的</span>。
</div>
.h2 { position: relative; border-bottom: 1px dashed #222; }
.h2 a { position: absolute; right: 0; top: 0; }
.p { text-indent: 2em; line-height: 150%; margin-top: 20px; }
.strong { color: red; }

视觉效果达到了，再来看看它的语义吧。我们只能看到‘分隔’ div、‘范围’span这样的无语义标签，从标签上看不出结构的逻辑。这显然是不行的，我们需要用标签代码能够清晰地透露出“标题”，“内容”，“被强调的文本”等信息。

方案二

<h2>标签的语义<a href="#">更多 &gt;&gt;</a></h2>
<p>HTML才是最...来修饰结构的。<strong>正确地做法是先确定HTML</strong>，确定语义化的标签，再来选用合适的CSS</p>
<p>判断网页标签语...简单方法就是:<strong>去掉样式</strong>
一个语义良好的页面，<strong>h标签应该是完整有序没有断层的</strong>。</p>
h2 { position: relative; border-bottom: 1px dashed #222; }
h2 a { position: absolute; right: 0; top: 0; }
p { text-indent: 2em; line-height: 150%; margin-top: 20px; }
strong { color: red; }

方案二大有改进，从标签中能清楚地看到标题和内容的划分，也能看到“根据浏览器的默认样式”被强调了。但还有要改进的地方<h2>标签的语义<a href="#">更多 &gt;&gt;</a></h2>，更多信息它不应属于二级标题的，虽然视觉上它和“标签语义”是放在同一行的，但事实上它并不属于标题！让我们再改进一下。

方案三

<h2>标签的语义</h2>
<a href="#">更多 &gt;&gt;</a>
<p>HTML才是最...来修饰结构的。<strong>正确地做法是先确定HTML</strong>，确定语义化的标签，再来选用合适的CSS</p>
<p>判断网页标签语...简单方法就是:<strong>去掉样式</strong>
一个语义良好的页面，<strong>h标签应该是完整有序没有断层的</strong>。</p>

此时语义是不错了，但根据方案三的HTML结构，我们很难通过CSS完成设计图中的设计。于是要借助无语义化的div和span了。

<div class="header">
    <h2>标签的语义</h2>
    <a href="#">更多 &gt;&gt;</a></div>
<p>HTML才是最...来修饰结构的。<strong>正确地做法是先确定HTML</strong>，确定语义化的标签，再来选用合适的CSS</p>
<p>判断网页标签语...简单方法就是:<strong>去掉样式</strong>
一个语义良好的页面，<strong>h标签应该是完整有序没有断层的</strong>。</p>

添加适当的无语义标签div和span，这样我们的代码既精简，语义又清晰。这里需要特别说明的是，当页面内标签无法满足设计需要时，才适当添加div和span等无语义标签来辅助实现。

语义化标签应注意的其他问题

1. 尽可能少地使用无语义化标签div和span

2. 在语义不明显，既可以用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利；

3. 语义上需要强调的文本可以包在strong或em标签里，strong和em有”强调”的语义，其中strong的默认样式是加粗，而em的默认样式是斜体。

更新2013-08-12

为什么要语义化

1. 手持移动设备的无障碍阅读

手持移动设备可能对CSS的解析能力较弱，这时可能就需要更语义化的标签来体现一个页面的易读性

2. 搜索引擎的友好收录

蜘蛛爬行能够根据标签的使用来确定上下和各关键字的权重

3. 盲人等一些障碍人士的更好地阅读

4. 技术趋势所需

正如HTML初衷那样，各个标签的本义就是希望在特定的地方使用合适的标签，而不是去用样式来表现一个不语义的标签。

5. 便于团队醒目的可持续运用及维护

语义化的命名能够使我们在多人协作一个项目时更加有序和快捷。