[HTML5]HTML语义(Semantics)

HTML 是有含义的

语义指的是计算机语言定义的符号有其规范的含义，HTML中的标签、属性和属性值都有其约定的含义。

语义和默认样式有所不同，默认样式是浏览器设定的一些常用标签的表现形式，而语义化的主要目的不是显示，而是能让大家直观的理解标记(markup)和属性(attribute)的用途和作用，比如Hx（h1,h2...)系列显然是标题， <strong>,<em>用来区别于其他文字，起到了强调的作用， <article>代表这是一段文章， <input type='email'/>代表的是邮件输入，等等。

有些元素具有通用的含义，比如段落（paragraphs）或列表（lists），有些元素则更具体，比如 <output>（计算输出），<progress>（任务进度）。

语义大体上可以分为三个层面，从上到下：结构、内容和局部说明。

结构化元素：用来组织页面

一个典型的网页通常包括：

<header> 页头，通常包含网站标识、口号和用户信息栏。
<nav> 页面菜单导航栏，网站主体频道页面的快捷链接。
<h1> 页面标题，对页面功能进行简要描述。
<article> 页面主体内容，如一篇博客。
<footer> 页脚，通常包含版权声明，国内特有的备案信息以及一些有用的快捷链接，如关于/联系/加入我们等等。

图文元素：定义和填充内容

主要有：

<p> 文章段落。
<ul> 无序列表（unordered list）。
<ol> 有序列表（ordered list）。
<li> 列表项（list item）。
<blockquote> 块引用。

内联元素：局部区别化内容

文章段落可能较长，需要对局部内容作特殊处理，比如段落首字母大写、下划线、删除线、引用、颜色突显、粗/斜体等等。

常用的有：

<strong> 重要描述。
<em> 强调用语。
<a> 链接（links），也叫锚点（anchor）。是对网站某资源的连接，可用于页面外部跳转和页面内部定位。
<small> 不那么重要的描述。
<abbr> 缩写，比如 WWW

阅读下面的文档，你很容易理解各个HTML元素的含义。

<article>

  <h1>文章标题</h1>

  <h2>文章子标题</h2>

  <p>

    一些内容描述， <em>这里强调一下</em> ，还有更 <strong>重要</strong> 的部分。

  </p>

  <p>

    另一段内容描述。

  </p>

  <h3>内容列表</h3>

  <ul>

    <li>第1章</li>

    <li>第2章</li>

    <li>第3章</li>

  </ul>

  <blockquote>

    Once said

  </blockquote>

</article>

<aside>

  <h3>边栏部分的评论列表</h3>

  <ul>

    <li><a href="#">评论1</a></li>

    <li><a href="#">评论2</a></li>

    <li><a href="#">评论3</a></li>

  </ul>

</aside>

通用元素

如果没有合适的语义元素用来表达你的内容，但出于分组或区别样式仍然需要添加一个HTML元素，那么你可以使用通用语义的元素如div和span：

<div> 用作通用块级元素
<span> 用作通用内联元素

尽管这些元素没有特定语义，但在使用CSS添加样式时仍然是有用的。

不要过度语义化

有将近100多个HTML元素可供选择： 100 semantic HTML elements。要从中挑选合适的元素来表述内容颇为麻烦。

过度追求语义化，使得页面语义结构过于繁杂，反而不易于维护，基本上，如果能使用好下面的这些元素就足够了。

结构化	图文内容	局部说明
`header` `h1` `h2` `h3` `nav` `footer` `article` `section`	`p` `ul` `ol` `li` `blockquote`	`a` `strong` `em` `q` `abbr` `small`

本文参考自：http://techbrood.com/h5b2a?p=html-semantics