我理解的html语义化

September 16, 2015

前端面试题中，关于html语义化常常会被提出，不同人有不同的理解，但简单来讲便是用正确的标签做正确的事情。语义化更具体的描述了作者对被显示数据的理解。这样看不管是人和机器都可以在既定的规范中理解作者的意图。

为什么要用语义

遵循语义化的好处不仅仅在你搜索到的好处之内，语义化的代码具有更好的亲和力，更主要的是逐渐使网页标准化。

具体来讲讲用正确的标签做正确的事情的意义！

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

如何编写html使其语义化

在编写 HTML 的时候我们需要先了解模块在页面中的职能（即语义），然后依据各个模块的职能来选择合适的元素，例如：

导航模块应该使用 nav
文章模块就应该使用 article
头部模块应该使用 header
无编号列表模块应该使用 ul

HTML5 引入了一系列的语义标签，如 header, footer, article, section, nav, 等等。

简单来讲就是先了解模块在页面中的职能（语义），后编写 HTML 代码。

例如：在编写主导航的时候我们应该这么分析：

主导航这个容器应该用 nav
容器里面有个列表，用 ul
每个链接放在个别的条目 li 里面

那么对应的html应该是这样的：

<nav class="main-nav">
  <ul>
    <li><a href="#">archive</a></li>
    <li><a href="#">projects</a></li>
    <li><a href="#">about</a></li>
  </ul>
</nav>

很明显，当我们看到一个 nav 就知道是导航，不需要去看它的风格。这也是分离内容和页面的表现方法。

对于模块语义的理解不同人会不一样，比如导航内的 4 个链接并不一定非要认为是一个无编号列表，也可以简单地将他们看做 4 个 a 标签的堆叠，从而对应的代码为：

<nav class="main-nav">
    <a href="#">archive</a>
    <a href="#">projects</a>
    <a href="#">about</a>    
</nav>

但总体上使用的标签不能和语义本身偏离太多。