让标签语义化成为一种习惯

分类栏目：用户体验 - 前端开发

版权信息： 原创作品、版权所有，禁止匿名转载，分享请注明版权。

32513

发布于 8 条评论

前段时间，在网上浏览时，发现国内几家互联网巨头公司的前端开发招聘题目，依然都提到一个标签语义化的问题，这个话题在已经是老生常谈了，但依旧问题多多，归结于一个习惯吧，有时间我也太懒，没有多加考虑就直接写代码，我知道我错了！童鞋们，我们得让标签语义化成为一种习惯！今天就再普及一下标签语义化，也鞭策下自己，别整天迷迷糊糊的！

why-tag-semantics

在网页设计中，我们时常都会听到标签语义化这个名词，HTML标签语义化的设计思维其实就是给某块内容用上一个最恰当最合适的标签，这样一来，不管是谁都能看懂这块内容是什么。

一个网页就好像是一栋房子，HTML结构就是一面面的墙，而标签则是一块块的砖，砖要摆放有序，整整齐齐，墙才会牢固。最后css则是装饰材料，美不美就靠她了。因此，我们要有一个优秀的网页，既要提供一个干净而又有清晰结构的HTML，更加离不开css的极致美化。

从上面也说明标签语义化极其重要，HTML每个标签都有自己的语义，都有自己适用的范围。但往往会被我们忽略或者被我们滥用，举个例子：在一个页面中<div>用了几十个甚至上百个，这是个无意义的标签，只是表示一个层而已，非常不利于后期的维护；而<table>标签则是一个数据标签，该用的时候，我们就要大胆使用。

标签语义化的好处

让你使用标签语义化的理由可以有无数条：

  1. 去掉样式或者样式丢失时页面结构依然清晰分明
  2. 移动设备能够更加完美的展示你的网页（移动设备对css的支持较弱）
  3. 阅读器会根据标签的语义自动解析，呈现更容易阅读的内容形式（无障碍阅读）
  4. 搜索引擎会根据标签的语义确定上下文和权重问题
  5. 便于后期的开发以及维护，团队合作效率提高
  6. ……

HTML标签语义汇总

为了更快更好的运用标签语义化，下面的表单列出了所有的HTML标签以及标签的描述。以下列表按字母顺序排列，其中 new :为 HTML5 中的新标签。

标签 描述
<!–…–> 定义注释。
<!DOCTYPE> 定义文档类型。
<a> 定义超链接。
<abbr> 定义缩写。
<acronym> HTML 5 中不支持。定义首字母缩写。
<address> 定义地址元素。
<applet> HTML 5 中不支持。定义 applet。
<area> 定义图像映射中的区域。
<article> 定义 article。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<b> 定义粗体文本。
<base> 定义页面中所有链接的基准 URL。
<basefont> HTML 5 中不支持。请使用 CSS 代替。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文本显示的方向。
<big> HTML 5 中不支持。定义大号文本。
<blockquote> 定义长的引用。
<body> 定义 body 元素。
<br> 插入换行符。
<button> 定义按钮。
<canvas> 定义图形。
<caption> 定义表格标题。
<center> HTML 5 中不支持。定义居中的文本。
<cite> 定义引用。
<code> 定义计算机代码文本。
<col> 定义表格列的属性。
<colgroup> 定义表格列的分组。
<command> 定义命令按钮。
<datalist> 定义下拉列表。
<dd> 定义定义的描述。
<del> 定义删除文本。
<details> 定义元素的细节。
<dfn> 定义定义项目。
<dir> HTML 5 中不支持。定义目录列表。
<div> 定义文档中的一个部分。
<dl> 定义定义列表。
<dt> 定义定义的项目。
<em> 定义强调文本。
<embed> 定义外部交互内容或插件。
<fieldset> 定义 fieldset。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
<font> HTML 5 中不支持。
<footer> 定义 section 或 page 的页脚。
<form> 定义表单。
<frame> HTML 5 中不支持。定义子窗口（框架）。
<frameset> HTML 5 中不支持。定义框架的集。
<h1> to <h6> 定义标题 1 到标题 6。
<head> 定义关于文档的信息。
<header> 定义 section 或 page 的页眉。
<hgroup> 定义有关文档中的 section 的信息。
<hr> 定义水平线。
<html> 定义 html 文档。
<i> 定义斜体文本。
<iframe> 定义行内的子窗口（框架）。
<img> 定义图像。
<input> 定义输入域。
<ins> 定义插入文本。
<keygen> 定义生成密钥。
<isindex> HTML 5 中不支持。定义单行的输入域。
<kbd> 定义键盘文本。
<label> 定义表单控件的标注。
<legend> 定义 fieldset 中的标题。
<li> 定义列表的项目。
<link> 定义资源引用。
<map> 定义图像映射。
<mark> 定义有记号的文本。
<menu> 定义菜单列表。
<meta> 定义元信息。
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<noframes> HTML 5 中不支持。定义 noframe 部分。
<noscript> 定义 noscript 部分。
<object> 定义嵌入对象。
<ol> 定义有序列表。
<optgroup> 定义选项组。
<option> 定义下拉列表中的选项。
<output> 定义输出的一些类型。
<p> 定义段落。
<param> 为对象定义参数。
<pre> 定义预格式化文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> HTML 5 中不支持。定义加删除线的文本。
<samp> 定义样本计算机代码。
<script> 定义脚本。
<section> 定义 section。
<select> 定义可选列表。
<small> 将旁注 (side comments) 呈现为小型文本。
<source> 定义媒介源。
<span> 定义文档中的 section。
<strike> HTML 5 中不支持。定义加删除线的文本。
<strong> 定义强调文本。
<style> 定义样式定义。
<sub> 定义下标文本。
<summary> 定义 details 元素的标题。
<sup> 定义上标文本。
<table> 定义表格。
<tbody> 定义表格的主体。
<td> 定义表格单元。
<textarea> 定义 textarea。
<tfoot> 定义表格的脚注。
<th> 定义表头。
<thead> 定义表头。
<time> 定义日期/时间。
<title> 定义文档的标题。
<tr> 定义表格行。
<track> 定义用在媒体播放器中的文本轨道。
<tt> HTML 5 中不支持。定义打字机文本。
<u> HTML 5 中不支持。定义下划线文本。
<ul> 定义无序列表。
<var> 定义变量。
<video> 定义视频。
<xmp> HTML 5 中不支持。定义预格式文本。

相关推荐

全部评论 / 8

  1. danny

    还是不懂语义化是什么意思 :sad:

    danny 2013-02-17
    20

  2. 多右键一下知名门户网站，看看人家怎么写，多手写点代码，很容易就会

    笔记本 2013-02-17
    19

  3. 个人觉得 aside 是表示 边栏/次要内容/主要内容的补充内容
    而不是 页面之外的内容 感觉不太准确.

    潜行者m 2013-02-17
    18
    1. Javin

      嗯，可以这样理解，非常感谢。

      1号 Javin 2013-02-17

  4. 一有空就看一眼，很快就记住了

    websjk 2013-02-17
    17

  5. 标签太多，头疼

    Musk 2013-02-17
    16
    1. Javin

      熟悉一下，常用的标签其实也就那几个。

      1号 Javin 2013-02-17

    2. 多用用，就熟悉了

      HTML5G 2013-02-17