1、什么是HTML语义化？
“语义化”指的是在需要更少的人类干预的情况下，能够研究和手机信息，让网页能够被机器理解，最终让人类受益。
语义化的目的就是让大家直观的认识标签（markup）和属性（attribute）的用途和作用。很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。
2、HTML语义化有什么好处？
- 在没有css的情况下，页面也能呈现出比较好的内容结构、代码结构。
- 用户体验较好：例如：label标签的活用、title、alt用于解释名词或解释图片。
- 方便其他设备解析（阅读器、移动设备）以意义的方式来渲染网页。
- 便于团队维护：语义化的HTML更具可读性，团队遵循W3C标准。
- 有利于SEO：和搜索引擎建立友好的交流，有利于爬虫抓取更多的有效信息。
- header元素
该元素是网页或者section的页眉部分，通常包含h标签，包括网站标志、全局导航、全站链接、搜索框等。
也可以包含一节的目录或者nav或者相关的logo。
一个页面可以有多个header标签。
eg、
<header> <hgroup> <h1>网站标题</h1> <h1>网站副标题</h1> </hgroup> </header>
- title元素
该元素用来简短的描述网页内容，在页面中唯一存在。
搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。
- foot元素
该元素代表网页或section的页脚，通常包含该节内容的基本信息，或者代表附录、索引、许可协议、标签类别等信息。
一个页面中可以有多个footer，可以是任何网页或section的底部。
eg、
eg、 <footer> COPYRIGHT@浮川之畔 </footer>
- hgroup元素
该元素代表网页或section的标题。可以将h1到h6的标签放在里面。
注：如果只有一个h标签，就不用hgroup。
如果有多个连续的h标签就用hgroup。
eg、
eg、 <hgroup> <h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1> <h2>HTML 5</h2> </hgroup>
- nav标签
该元素是页面的导航链接区域，仅对页面中重要的链接群使用。
用来定义页面的主要导航部分。
eg、
<nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav>
- aside元素
该元素用来指定附注栏，通常被包含在article元素中作为主要内容的附属部分，其中的内容可以是与当前文章有关的相关资料、标签、名词解释等，是特殊的section。
eg、
<article> <p>内容</p> <aside> <h1>作者简介</h1> <p>浮川之畔，新入门码农</p> </aside> </article>
- main元素
该元素是页面的主体内容，一个页面只能使用一次。
- article元素
该元素包含一个报纸一样的东西，代表一个在文档、页面或网站中自成一体的内容。
如果在article中再嵌套article就代表内嵌的article中的内容和外部的是有关系的。
eg、
<article> <header> <h1>一篇文章</h1> <p><time pubdate datetime="2012-10-03">2012/10/03</time></p> </header> <p>文章内容..</p> <article> <h2>评论</h2> <article> <header> <h3>评论者: XXX</h3> <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p> </header> <p>哈哈哈</p> </article> <article> <header> <h3>评论者: XXX</h3> <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p> </header> <p>哈？哈？哈？</p> </article> </article> </article>
article内部还可以嵌套section
eg、
<article> <h1>前端技术</h1> <p>前端技术有那些</p> <section> <h2>CSS</h2> <p>样式..</p> </section> <section> <h2>JS</h2> <p>脚本</p> </section> </article>
section 内部嵌套article。article是大主体，section是构成这个大主体的一部分。
eg、
<section> <h1>介绍: 网站制作成员配备</h1> <article> <h2>设计师</h2> <p>设计网页的...</p> </article> <article> <h2>程序员</h2> <p>后台写程序的..</p> </article> <article> <h2>前端工程师</h2> <p>给楼上两位打杂的..</p> </article> </section>
使用注意：
自身独立使用：article
相关内容使用：section
无语义使用：div
- section元素
该元素代表网页中的‘节或段。“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。
section标签内通常带有标题。
一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article。section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。
article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div
eg、
<section> <h1>section是啥？</h1> <article> <h2>关于section</h1> <p>section的介绍</p> <section> <h3>关于其他</h3> <p>关于其他section的介绍</p> </section> </article> </section>
- small元素
该元素指定细则，输入免责声明、注解、署名、版权等。只能用于短语，不能用在长的法律声明。
- address元素
该元素用来表示作者、相关人士或组织的联系信息。
- del元素
该元素表示被移除的内容。
- ins元素
该元素表示被添加的内容。
