runfast󰀦lynda

我理解的html语义化

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

为什么要用语义

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

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

如何编写html使其语义化

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

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

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

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

那么对应的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>

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