语义化
# 1. 什么是HTML语义化
基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong）等等。
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好地解析。
# 2. 为什么要语义化
为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如 title、alt 用于解释名词或解释图片信息、label 标签的活用；
有利于 SEO 搜索引擎优化：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。
# 3. 写HTML代码时应该注意什么？
尽可能少的使用无语义的标签 div 和 span；
在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用 css 设置。
需要强调的文本，可以包含在 strong 或者 em 标签中（浏览器预设样式，能用 CSS 指定就不用他们），strong 默认样式是加粗（不要用 b），em 是斜体（不用 i）；
使用表格时，标题要用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和一般单元格要区分开，表头用 th，单元格用 td；
表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途；
每个 input 标签对应的说明文本都需要使用 label 标签，并且通过为 input 设置 id 属性，在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来。
# 4. HTML5语义标签
在 HTML5 出来之前，我们用 div 来表示页面章节，但是这些 div 都没有实际意义。（即使我们用 css 样式的 id 和 class 形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为 html5 的出现消失了，这就是我们平时说的“语义”
HTML5 元素标签包括 body article nav aside section header footer hgroup ，还有h1-h6 address。
address 代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在 footer。
h1-h6 因为 hgroup，section 和 article 的出现，h1-h6 定义也发生了变化，允许一张页面出现多个 h1。
但是也不要因为 html5 新标签的出现，而随意用之，错误的使用肯定会事与愿违。所以有些地方还是要用 div 的，就是因为div没有任何意义的元素，他只是一个标签，仅仅是用来构建外观和结构。因此是最适合做容器的标签。
# HTML5语义化标签使用
# header
header 元素代表“网页”或“section”的页眉。
通常包含 h1-h6 元素或 hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个 nav，或者任何相关 logo。
# footer
footer 元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果 footer 元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
# hgroup
hgroup 元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将 h1 到 h6 元素放在其内，譬如文章的主标题和副标题的组合
hgroup 使用注意：
如果只需要一个 h1-h6 标签就不用 hgroup
如果有连续多个 h1-h6 标签就用 hgroup
如果有连续多个标题和其他文章数据，h1-h6 标签就用 hgroup包住，和其他文章元数据一起放入 header 标签
# nav
nav 元素代表页面的导航链接区域。用于定义页面的主要导航部分。 但是我在有些时候却情不自禁的想用它，譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，但是事实上规范上说 nav 只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些 footer 元素就能够用了。
<nav>
<ul>
<li>HTML 5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>
2
3
4
5
6
7
# aside
aside 元素被包含在 article 元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的 section）
在 article 元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。
<article>
<p>内容</p>
<aside>
<h1>作者简介</h1>
<p>前端一枚</p>
</aside>
</article>
2
3
4
5
6
7
aside使用总结：
aside 在 article 内表示主要内容的附属信息；
在 article 之外则可做侧边栏，没有 article 与之对应，最好不用；
如果是广告，其他日志链接或者其他分类导航也可以用。
# section
section 元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。
section 通常还带标题，虽然 html5 中 section 会自动给标题 h1-h6 降级，但是最好手动给他们降级。如下：
<section>
<h1>section是啥？</h1>
<article>
<h2>关于section</h1>
<p>section的介绍</p>
<section>
<h3>关于其他</h3>
<p>关于其他section的介绍</p>
</section>
</article>
</section>
2
3
4
5
6
7
8
9
10
11
section使用注意：
一张页面可以用 section 划分为简介、文章条目和联系信息。不过在文章内页，最好用 article；
section 不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用 div 表示文档中的节或者段；
article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div。
# article
article 元素最容易跟 section 和 div 容易混淆，其实 article 代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的 widget 小工具。（特殊的 section）
除了它的内容，article 会有一个标题（通常会在 header 里），会有一个 footer 页脚。我们举几个例子介绍一下 article，好更好区分 article、section、div
<article>
<h1>一篇文章</h1>
<p>文章内容..</p>
<footer>
<p><small>版权：html5jscss网所属，作者：程序员</small></p>
</footer>
</article>
2
3
4
5
6
7
# figure
定义一组相关的媒体内容，通常包含图像、插图、音频、视频等内容。
# figcaption
为 figure 元素定义标题或说明文本。
# time
定义日期和时间，可以用于表示发布时间、活动时间等。
# address
定义联系信息，通常用于表示作者的联系信息或者文章的联系信息。
# progress
定义进度条，可以用于表示加载进度、任务进度等。
# meter
定义度量衡，可以用于表示测量值、比率等
# details 和 summary
定义详情和摘要，用于表示可折叠的内容。