语义化
转自雨落
为什么需要语义化
- 易修改，易维护
- 无障碍阅读支持
- 搜索引擎友好，有利于 SEO
- 面向未来，浏览器在未来可能提供丰富的支持
结构语义化
语义元素是页面结构的规范化，不会对内容有本质的影响。
头部
<header>元素有两种用法，标注内容的标题和标注网页的页眉，如上图。
除非必要（内容标题附带其他信息的情况下：发布时间，作者等），一般不在内容中使用。因而，网页中可以包含多个<header>元素。
按照 HTML5 的规定，<header>中应包含某个级别的标题，所以应隐式或显式地包含标题。通常不希望将显示的标题设置为display: none，一方面遵守规范，一方面提供了无障碍阅读而不至于影响到页面设计。
导航栏
导航栏使用<nav>看起来是理所当然的，另外，它也用于一组文章的链接。一个页面可以包含多个<nav>元素，但通常仅在页面的主要导航部分使用。
<!-- demo 1 -->
<nav>
<!-- 此处是链接 -->
<aside></aside>
<aside></aside>
</nav>
<!-- demo 2 -->
<aside>
<nav>
<!-- 此处是链接 -->
</nav>
<section></section>
</aside>
如果侧边栏中包含其它不同于链接的区块，第二种方案更合适。
导航通常包含一组链接，链接普遍使用列表来组织。
<nav>
<ul>
<li><a href="#" title="第一章">第一章</a><li>
<li><a href="#" title="第二章">第二章</a><li>
</ul>
</nav>
附注
<aside>元素仅仅是侧栏，它表示与它周围文本没有密切关系的内容。文章中同样可以使用<aside>元素来说明文章的附加内容，解释说明某个观点，相关内容链接等等。
当aside用于侧栏时，表示整个网页的附加内容。通常广告区域，搜索，分享链接位于侧栏。侧栏中<section>元素规定了一个区域，通常是带标题的内容。
<aside>标签适合标记的内容区块：
- 与页面主体并列显示的小内容块
- 独立内容，清单，表单等
- 分组内容，如 CMS 系统中的文章分类区块
- 比较长文档的一部分，可能仅仅是为了正确规定页面大纲
<div>标签依然是可用的，当你觉得其他标签都不太合适时。新的语义元素出现之前，都可以这么做。
页脚
标准规定<footer>元素仅可以包含版权，来源信息，法律限制等文本或链接信息。如果需要在页脚中包含其它内容，使用<div>标签。
<div>
<aside>
<!-- 其它内容 -->
</aside>
<footer>
<!-- 法律，版权 -->
</footer>
</div>
主要内容
在 HTML5.1 中规定了<main>标签来标识主体内容。<main>标签不能包含在其它区块元素中，通常是<body>的子标签，或者是全局<div>的子标签。<main>标签可以帮助屏幕阅读工具识别页面的主体部分，让访问者迅速获得有用信息。
文章
<article>表示一个完整的，自成一体的内容块，如文章，新闻报道。<article>应该包含完整的标题，文章署名，发布时间和正文。当语义与表现发生冲突时，例如有时需要将文章分成多个页面显示，那么每个页面的文章区域都需要用<article>标记。
文章中包含插图时，用<figure>标签。
<article>
<h1>第一章</h1>
<p>
<!-- 内容 -->
</p>
<figure>
<img src="#" alt="插图">
<figcaption>一个插图</figcaption>
</figure>
</article>
上述情况下，<figcaption>包含了插图的详细解释，则<img>中的alt属性可以省略。
