html语义化看不懂,浅谈HTML语义化 - Web小白的个人空间 - OSCHINA - 中文开源技术交流社区...

前两天做项目时，做头部导航和侧导航的时候，采用的div，头部导航使用div的float：left，的确很方便，又比采用ul>li减少了li的list-style:none，但是在头部导航的布局上就比较麻烦了，在苦思中想到了HTML语义化，到处查找资料和结合自己的实践，接下来就浅谈HTML的语义化。

什么是HTML的语义化？HTML的语义化是指使用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲，语义化就是对数据和信息进行处理，使得机器更加容易理解。

语义化的HTML文档有助于提升你的网站对访客的易用性。对于搜索引擎来说，则有助于他们建立索引，并可能给予一个较高的权值。

事实上SEO最有效的一种办法，就是对网页的HTNL结构进行重构，实质上就是HTML的语义化。

注：HTML标签对大小写不敏感，但是推荐小写！

各种常用标签的含义

基本

…           HTML文档

        HTML 文档的元信息

…              文档的标题

        文档与外部资源的关系

           文档的样式信息

        注释

文本

…

           标题字大小(h1~h6)

…            粗体字

…            粗体字(强调)

…            斜体字

…            斜体字(强调)

…            下划线

…            居中文本

• …

           无序列表

1. …

           有序列表…            列表项目

…            超链接(锚)

          文本字体、大小、颜色

            换行

...        文档中已删除的文本

            段落

---

          水平线

        图像

表格

           表格…            表格中的行…            表头…            表格中的单元

其他

…            供用户输入的HTML表单

           框架

语义化标签要注意的一些问题

为了保证网页去掉样式后可读性依然好，并且又符合Web标准，我们应该注意以下几点：

尽可能少的使用无语义标签，如span，div；

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

不要使用纯样式标签，例如b,font和u等，改用CSS设置。语义上需要强调的文本可以包含在strong或em里，这两个标签有"强调"的语义，其中前者是默认加粗，后者是斜体。