HTML语义化标签

刘珍

摘要：随着Web2.0技术的出现，网站更趋向于HTML结构与CSS表现分离。HTML5新增了一系列的语义化标签来构造网页内容，使得HTML页面内容更直观，方便阅读、理解、维护和搜索，并且更利于完美展现和推广。

关键词：Web2.0 HTML语义化标签

引言

目前，HTML5比HTML4新增了更多的語义化标签，包含了语义和结构元素、表单元素、新多媒体元素、绘图元素等。比如：header、footer、aside等。它们的出现和使用，非常利于网页内容的构造。

（一）语义化标签的由来

Web2.0被人们描述为“作为平台的网络”。它的出现，把网络变成一个内容互动的平台，这对网页设计具有重大的影响。基于Web标准，Web2.0的网站更趋向于HTML结构和CSS表现分离。分离结构与表现的一个重要方面是使用语义化标签来构造网页内容，这恰恰也是Web2.0网站提倡的。

HTML提供网页文档的上下文结构和含义。通俗来说HTML就是划分页面内容。HTML标签语义化，简单来说，就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，能够让大家非常直观的认识标签和属性的作用与用途。不论是谁都能够看懂这块内容是什么，并且有利于搜索引擎。

比如在HTML5问世之前，我们一般采用DIV标签来表示页面布局，但这些DIV标签仅仅起到了布局、构建外观和结构的作用，做为容器的DIV标签只是定义了页面的某个部分，并没有什么实际意义（虽然我们可以通过注释语句、CSS样式中的id、class来指明、形容这块内容的意义和功能），仅仅是我们提供给浏览器的指令。但语义化标签的出现，本身就指明一定的意义，即我们平常所说的“语义”。语义化其实就是用合理的HTML标记以及其特有的属性去格式化文档内容。

HTML5的语义化标签，是HTML5的研究者花费大量精力研究分析用户的通用行为得来。如Google通过解析器浏览、分析上百万页面中的DIV标签的id名称、超十亿的网页和表格中最常见的类名，发现header、footer以及nav的类名最为普遍。

（二）语义化标签的作用

编写HTML文件时按照W3C提倡的语义化，根据内容的结构（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码，同时让各种浏览器的爬虫和机器更好地进行解析。比如某个项目里面的按钮，开发者采用DIV标签或SPAN标签制作，并在上面用事件委托的形式绑定了一些点击事件，测试时发现Safari浏览器不能正常实现预期的按钮点击效果。原因在于Safari浏览器认为DIV、SPAN标签不是可以产生交互的元素，只接受直接在这些元素上绑定事件的操作，不认可、不支持在这些元素的事件委托形式的绑定事件。

1、增加了网页对搜索引擎的友好性。

语义化标签的使用，使得网页具有良好的结构和语义，提升网站对访客的易用性，从而使网页内容能够更自然、容易地被搜索引擎抓取，有助于它们建立索引并给予一个较高的权值，可进一步加强网站的推广。

2、使HTML页面结构清晰，可读性强。

语义化标签的使用，使得内容结构和代码结构能很好地呈现。代码可读性好，比如title、label、alt往往被运用于名词解释、图片信息、相关信息的解释。

3、有利于SEO效果大大增强。

语义化标签的使用，有助于页面和搜索引擎建立良好沟通，有助于搜索引擎爬虫更好地从页面中抓取更多的有效信息，有助于浏览器的爬虫和机器很好地对页面进行解析，并且根据标签的语义来确定上下文和各个关键字的权重。事实上SEO最有效的一种方法就是对网页的HTML结构进行重构，这实质上就是语义化。与此同时，行业机构对语义化标签的扩展和浏览器厂商在技术上的支持力度也逐渐提升。HTML5中新增的语义化标签，在Chrome、opera、safari、firefox等浏览器中均得到很好支持。

4、支持更多设备能够更完美的展现网页（特别是对CSS支持较弱的设备）。

语义化标签方便其他设备（如屏幕阅读器、移动设备等）以语义的方式来渲染页面。比如屏幕阅读器会完全根据开发者的标记来“读”页面内容。即使在没有样式CSS、CSS丢失或不能正常展现的情况下，页面也能以一种文档格式显示，仍然呈现清晰结构，并且容易阅读甚至无障碍阅读。因此对有视觉障碍的用户更加友好，使用PDA、文字浏览器以及残障人士将从中受益。这进一步加强了用户体验，可提升网站对访客的易用性。

5、便于开发者阅读和写出更优雅的代码，同时便于团队开发和维护。

语义化标签更具有可读性，这得使阅读页面源代码的开发者更容易将网页分块，逐块阅读、理解和维护，迅速把握下一步开发网页的重要动向。遵循W3C标准的开发团队都遵循这个标准进行网页开发，可以快速达成共识、减少差异化，大大缩短开发时间，提高开发效率。

现在很多大型公司的前端很注重标签语义化，使用语义化标签可以使开发团队组员能够很好的理解页面结构，便于维护页面，不必再焦头烂额的猜测这部分代码代表什么内容，省下了许多不必要的时间，所以在以后的页面设计中，慢慢的将使用语义化标签培养成一种习惯，可以方便很多开发者。

（三）语义化标签的出现并不能完全弃用DIV标签

HTML5提供给我们的语义化标签对页面构造有非常重要的作用，但毕竟数量有限。因此虽然现在可以使用一些更精准的语义结构元素来替换以前学过并且使用的DIV元素，但根据页面的内容构造，页面的有些区域仍然需要使用DIV元素。

参考文献：

1、CSS从入门到精通（第2版）.曹方.化学工业出版社.2011

2、CSS+DIV网页样式布局从入门到精通.龙马工作室.人民邮电出版社.2014.10

3、Web前端开发精品课HTML与CSS基础教程.莫振杰.中国工信出版集团，人民邮电出版社.2016.3endprint