在看前端秋招面试经历的时候，基本上是逃不过HTML5语义化这个概念，这里记录一下。
虽然标签种类繁多，在编写过程中可能会分不清到底应该使用哪个标签来定义某个块内容。所以在使用时，不是很清楚应该要用什么标签时，还是会选择使用<div>,但为了更好的理解语义化，还是最好使用相对应的标签。
什么是语义元素？
答：用合理、正确的标签来展示内容
语义元素清楚地向浏览器和开发者描述其意义。
非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。
语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容。
语义化的优点：
- 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便其他设备解析，如盲人阅读器根据语义渲染网页
- 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
HTML5 中新的语义元素
许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：<div id="nav"> <div class="header"> <div id="footer">。
HTML5 提供了定义页面不同部分的新语义元素：
- article
- aside
- details
- figcaption
- figure
- footer
- header
- main
- mark
- nav
- ection
- summary
- time
下面对一些标签做简要介绍：
1、<header>
<header> 元素为文档或节规定页眉。<header> 元素应该被用作介绍性内容的容器。
一个文档中可以有多个 <header> 元素。
但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素
2、<nav>
<nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。在一个文档中，可定义多个<nav>元素。<nav> 元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于 <nav> 元素中！
3、<section>
<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。
如果元素内容可以分为几个部分的话，应该使用 <article> 而不是 <section>。
不要把 <section>元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。
这几个标签，比较容易混淆的是<section>、<article>，所以这里特别说明：
“当需要连锁elemen的内容时，建议作者使用article元素而不是section元素。”
通俗来说就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境，是否完整、独立来判断。
4、<article>
在 HTML5 标准中，<article> 元素定义完整的相关元素自包含块。<section> 元素被定义为相关元素块。
我们不能够使用该定义来决定如何嵌套元素！
在很多网站上，您会发现 <section> 元素包含 <article> 元素的 HTML 页面，还有 <article> 元素包含 <section> 元素的页面。
您还会发现 <section> 元素包含 <section> 元素，同时 <article> 元素包含 <article> 元素。
5、<aside>
<aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。6、<footer>
<footer> 定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。使用footer插入联系信息时，应在 footer 元素内使用 <address> 元素。
注意不能包含<footer>或者<header>
