HTML语义化

什么是HTML的语义，直观的说就是HTML的含义，从HTML代码自己就能够判断包含内容的做用。HTML标签语义化是Web网页标准化的重要一环，也是标准制定时重要的设计原则。HTML5中新增长的不少标签（如：<article>、<nav>、<header>和<footer>等）就是基于这样的设计原则。页面标签语义化的优势明显，标签语义化使得诸如搜索引擎以及第三方内容抓取工具等更容易读懂页面代码。机器不会关注页面实际渲染的外观，只会关注页面内容自己，页面渲染的漂亮与否对机器识别毫无帮助。那么具体什么样的页面设计才是语义化的页面？浏览器会对语义化的标签设计默认的样式，因此验证页面是否语义规范的一个简单方式就是去掉CSS样式后页面是否还能正常阅读。先来看看一个例子。

假设咱们要实现以下的一个工具栏：

若是仅仅是实现这样的外观，则以下的代码加上合适的CSS样式就能够达到要求。

<div id="reader_main_action" class="reader-main-action">
    <span class="reader-action-library"></span>
    <span class="reader-action-spliter">|</span>
    <span class="reader-action-toc "></span>
    <span class="reader-action-spliter">|</span>
    <span class="reader-action-note"></span>
    <span class="reader-action-bookmark"></span>
    <span class="reader-action-highlight"></span>
</div>

再来看看第二种实现方式。按照需求，这是一个包含5个操做项的工具栏，应该使用符合语义的<ul>标签。如上的实现方式是一种常见的实现方式，但从标签语义的角度来看，不推荐此实现方式。代码中使用的标签<div>和<span>是在全部的HTML标签中最没有语义的。因此要作到标签语义化，首先要尽可能少用<div>和<span>这两个标签，在使用这两个标签时尽可能能找到更有语义的标签代替。

<ul id="reader_main_action" class="reader-main-action">
    <li class="reader-action-library"></li>
    <li class="reader-action-spliter">|</li>
    <li class="reader-action-toc"></li>
    <li class="reader-action-spliter">|</li>
    <li class="reader-action-note"></li>
    <li class="reader-action-bookmark"></li>
    <li class="reader-action-highlight"></li>
</ul>

第二个方案比第一个方案有所改进，使用了语义化的标签<ul>，可是咱们总共有五个操做项，而此方案使用了七个<li>标签。两个非操做项的分隔符占用了两个<li>标签。单纯从语义上看，两个分隔符和其余五个操做项具备等同的重要性。试想一下，搜索引擎识别此段代码时，会认为工具栏中包含七个操做项，这明显偏离了实际的语义。因此此方案须要进一步改进，去掉多余的两个<li>，使用CSS样式来实现分隔符的效果。以下是改进后的代码：

<ul id="reader_main_action" class="reader-main-action">
    <li class="reader-action-library"></li>
    <li class="reader-action-toc spliter"></li>
    <li class="reader-action-note spliter"></li>
    <li class="reader-action-bookmark"></li>
    <li class="reader-action-highlight"></li>
</ul>

使用CSS样式实现分隔符效果：

.reader-main-action .spliter {
    margin-left: 30px;
}
.reader-main-action .spliter:before {
    content: '|';
    line-height: 28px;
    font-size: 20px;
    color: #888;
    cursor: default;
    text-indent: 0;
    float: left;
    margin: 0 -20px;
}

第三个方案把无关内容的元素完全从HTML中分离了出来，删除了干扰语义的标签，是否是完美了？还差一点，假设搜索引擎解析到这段HTML代码，从语义上只能分析出这是有5个操做项的工具栏，具体每一个操做项的做用则不得而知。须要继续添加文字说明，修改后的代码以下：

<ul id="reader_main_action" class="reader-main-action">
    <li class="reader-action-library">library</li>
    <li class="reader-action-toc spliter">toc</li>
    <li class="reader-action-note spliter">note</li>
    <li class="reader-action-bookmark">bookmark</li>
    <li class="reader-action-highlight">highlight</li>
</ul>

给每一个操做项添加了名称，这下语义清晰了。由于操做项在界面上显示的是图标按钮，须要把文字隐藏掉。以下的CSS样式能够实现文字的隐藏：

.reader-main-action li {
    Text-indent: -9999px;
}

第四个方案中，添加了一些隐藏的文字，看似多余的代码，倒是颇有必要的。按照以前提到的验证HTML代码语义性的方法，去掉全部的CSS样式，只有此方案能在界面上正常显示5个操做项。以下是禁用CSS样式后，此方案的显示效果图：

编写语义明确的HTML代码须要有足够的耐心和良好的编码意识，这须要在实际的项目中不断地实践。固然编写高语义的HTML代码也是有一些最佳实践能够参考的，以下所列的是最主要的3条原则。

• 熟悉全部规范的HTML标签，理解各标签的语义，在合适的地方使用合适的标签。

若是不考虑HTML的语义，使用<div>和<span>就足够构建页面上大部分的布局，可是这两个标签是没有任何语义的标签。HTML语义化首先要从HTML标签语义化入手，HTML标签是页面内容的载体，语义化的标签相对因而对所包含内容的一个总体声明，也使得页面总体结构清晰。网页的开发者应该熟悉全部规范的HTML标签的使用场景，在合适的地方使用合适的标签。例如，标签Hx系列则表示标题，在网页中展现各层级的标题时使用、<ul>和<ol>表示列表，在展示各类数据列表或者菜单是使用，其它使用率较高的语义标签有：<p>、<em>、<strong>、<table>、<site>、<blockquote>等，以及HTML5新加入的标签：<header><footer><article><section><nav><aside>等。W3C规范中针对全部标签都有详细的解释和使用场景示例，这些最基本的内容须要前端开发者熟练掌握。

• 熟悉各标签规范的属性，给HTML标签设置必要的属性。

和标签语义化的重要性同样，某些属性的设置也是HTML语义化重要的环节。在不少规范中规定须要设置的两个属性是alt属性和title属性，这两个属性设置的也是为了提升HTML的语义。在<img>标签中，alt是必需要设置的属性，由于<img>是自闭合标签，并无包含能够解释说明图片的额外信息。title属性是可选属性，当标签包含的内容不足以说明语义时，能够经过title添加额外的信息。以下示例展现这两个属性的使用：

<!—alt属性除了对图片做解释说明以外，当图片在浏览器中未加载时的显示的代替文字-->
<img src="/img/loading.gif" alt="data loading…" />
<!—title属性是对元素的解释说明，而且做为在浏览器中当鼠标移到元素上时显示的提示文本-->
<a href="" title=""></a>

还有一个重要的属性是<label>标签中的for属性。<label>标签是<input>元素定义的标注。以下示例是<lable>标签的一种不规范用法，倒是常见的用法。

<form>
    <label>User Name：</label>
    <input type="text" name="user_name" id=" user_name" />
</form>

代码中的<label>标签和<input>标签仅仅是从UI的视觉上是关联在一块儿的，可是从代码自己并不能看出二者之间的关系。<label>标签上少了一个for属性。<label>标签的for属性值指代一个表单元素，属性值为此表单元素的id值。for属性的做用不只把<lable>标签上的触发事件指向了for属性指代的表单元素，也从语义上绑定了<lable>和此表单元素。应该给如上示例中的<label>添加for属性，示例修改以下：

<form>
    <label for="user_name">User Name：</label>
    <input type="text" name="user_name" id="user_name" />
</form>

• 样式和结构分离。

咱们以前提到的样式和结构分离，主要说的是CSS样式和HTML结构的分离。这里会更进一步，把HTML代码中用于表达外观的部分从HTML中删除，并改用CSS样式实现。简洁的HTML代码会代码的语义更加明确。以下的示例代码是上面的示例中展现分隔符的HTML代码：

<ul id="reader_main_action" class="reader-main-action">
    <li class="reader-action-spliter">|</li>
</ul>

CSS中的两个伪类:before和:after很适合在这样的场景中使用，在元素的前面或者后面添加修饰性的文字或者外观，实现了内容的添加并同时没有破坏HTML代码的语义。这里展现一个经常使用的场景，应该不少人写过这样的代码。示例以下：从实际需求分析，分隔符并非网页内容的一部分，只是用于内容的分割，因此应该从HTML代码中分离，并使用CSS样式实现相同的效果，本例的CSS样式的实现可参照上面示例方案3中展现的代码。

<div id="main">
    <div class="sidebar">this is the side bar.</div>
    <div class="content">this is the main content.</div>
    <div class="clear"></div>
</div>

对应的CSS样式为：

.sidebar { float: left; width:150px; }
.container { float:right; width:450px;}
.clear { clear:both; }

代码中为了清除元素的浮动而添加了一个<div>元素，并给此<div>元素添加了clear样式。可能不少人以为这是一个常规的作法，可是这种写法是破坏了HTML代码的语义，并非一种好的方案，应该删除这个多余的<div>元素，并改用CSS样式来实现，以下示例代码：

<div id="main clearfix">
    <div class="sidebar">this is the side bar.</div>
    <div class="content">this is the main content.</div>
</div>

对应的CSS类clearfix的声明为：

.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

上面的示例使用了:before和:after伪类，很好地解决了因为多余的元素而破坏HTML代码的语义的问题。

另一个常常滥用的标签就是<br >换行符标签。不少新手常常会使用此标签让元素换行显示，甚至会连续使用多个<br>标签来加大元素之间的行距。

<div>
    <span>title</span><br><br>
    <span>item1</span><br>
    <span>item2</span><br>
    <span>item3</span><br>
</div>

这算是很初级的错误了，彻底没有理解<br>标签的语义。<br>标签仅仅用于文本内容中的换行。

以下是从W3C网站上引用的示例：

<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p>

若是要实现元素之间的换行或者增长行间距则能够经过设置display、margin或者是padding等样式。

另外咱们在构建页面的时候，常常会添加图片，可是图片是以img元素存在，仍是以背景图方式存在？不少时候，咱们并无仔细考虑这样的问题，实现的方式很随意。其实，从HTML语义的角度考虑，很容易决定应该使用img元素仍是背景图。若是图片是做为页面内容的一部分，则应该使用img元素，若是图片仅仅是装饰做用，则应该使用背景图方式。

在构建页面的HTML时，若是能遵照以上介绍的这三点规则，则基本能够保证页面HTML代码的高语义。