关于HTML语义化

HTML5
,

什么是HTML语义化？

通俗讲，就是将内容放置在最合适的HTML标签中，使网页具有一定的层次结构，可以让人和机器读懂内容是什么。

语义化的好处

- 去掉样式或者样式丢失时页面结构依然清晰分明
- 阅读器会根据标签的语义自动解析，呈现更容易阅读的内容形式
- 利于搜索引擎建立索引，提高权值。
- 便于开发和维护,可读性强
…

如何编写语义化的HTML代码？

语义化的一个简单实例

1
2
3
4
5
6
7
8
<h1>文档标题</h1>
<h2>次级标题</h2>
<p>这是文章段落，一般文章段落都会比其他HTML标签所包含的内容要多。段落中基本都是文字，一般为3-6行，也可能10多行。是网页主要的阅读部分。</p>
<dl>
<dt>上海滩</dt>
<dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后，产生了巨大的轰动效应。</dd>
</dl>

  1. 必须了解每个标签的语义，例如<p>是一个段落；<strong>是表示强调；<ul><li>是一个无序列表等等…

  2. 然后做到结构与样式彻底分离，所以最好不要使用b、font、u等标签，改用css设置，html的作用应该是告诉我们内容是什么，而不是它长什么样子。

  3. HTML5中增加了更多的语义化标签，我们应该使用这些标签代替原来无意义的标签，比如div标签实际并没有意义。HTML5中可以使用如下标签进行布局：

其他一些注意点：

  • 在语义不明显时，既可以使用div或者p时，尽量用p,因为p在默认情况下有上下间距，对兼容特殊终端有利；

  • 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

  • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；