语义化标签

什么是标签语义化

标签的语义

通过标签判断内容语义，例如根据h1标签判断出内容是标题，根据<p>判断内容是段落、<input>标签是输入框等。

web布局的变化

table布局

Dreamweaver+table布局=大量的 table\tr\td标签

图片来自书籍《编写高质量代码——Web前端开发修炼之道》

浏览器通过标签获得语义，而table、tr、td标签的语义分别是表格、单元行、单元列，无法直接判断出该网页的标题等内容，浏览器难以确定该网页的主要内容。

Html + CSS 布局

Hhml 专注结构，CSS专注布局。对比只有html的页面和加入CSS的页面，如下：

没有CSS时的页面：

有CSS时的页面：

判断标签是否语义化

去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

为什么标签要语义化

1. 搜索引擎友好。
2. 更容易让屏幕阅读器读出网页内容。
3. 去掉或样式丢失的时候能让页面呈现清晰的结构。
4. 便于团队开发和维护。

如何使标签更具语义化

标题内容型

标题使用<h2>而不是<div class="h2">,段落使用<p>标签，锚点使用<a>。

表单

分组表单要用<fieldset>标签包起来，并用<legend>标签进行说明表单的用途。

每个<input>标签对应的说明文本都需要使用label标签，并且通过为<input>设置id属性，在<label>标签中设置“for=someId”来让说明文本和相应的<input>关联起来。

表格

表格标题要使用<caption>，表头使用<thead>包围，主体部分使用包围，尾部使用tfoot包围，表头和一般单元格要区分开，表头用th,一般单元格用td`。

应注意的问题

• 尽可能减少使用无语义标签div和span。
• 语义不明显，可以用p也可以使用div的情况下，尽量用p。
• 不要使用纯样式标签，例如b、font和u等，改用CSS设置。
• 使用HTML5的结构元素，HTML5新特性一节中会介绍。

部分标签全称与中文翻译

参考资料

《编写高质量代码——Web前端开发修炼之道》