HTML语义化 以及HTML5新的语义化标签

什么是语义化？
语义化就是用有一定语义的英文字母（标签）表示，尽量使用官方的有语义的标签。

为什么要语义化？
1、呈现好的内容结构和代码结构
2、提高用户体验（title、alt）
3、利用SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键词的权重
4、方便其他设备解析以语义的方式来渲染网页
5、语义化更具可读性，遵循W3C标准，规范

构建页面要那些注意？
1、减少使用无语义的标签div和span
2、语义不明时，尽量用p（p默认有上下边距，可以兼容特殊终端）
3、不要使用纯样式的标签（b、font、u）改用css设置
4、需要强调的文本，包含在strong或者em（斜体）标签中（浏览器预设样式，能用CSS就不用它们）
5、使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
6、表单域要用fieldset标签包起来，并用legend标签说明表单的用途（fieldset 元素可将表单内的相关元素分组）；
使用form表单中自带的fieldset与legend标签：

<form method="post">  
    <fieldset>  
        <legend><b>第一题</b></legend>  
        <p>题目题目题目</p>  
        <ul>  
            <li><input type="radio"  value="1" checked="checked" />一选项</li>  
            <li><input type="radio"  value="2" />二选项</li>  
            <li><input type="radio"  value="3" />三选项</li>  
        </ul>  
    </fieldset>  
    <fieldset>  
        <legend><b>第二题</b></legend>  
        <p>题目题目题目</p>  
        <ul>  
            <li><input type="radio"  value="1" checked="checked" />一选项</li>  
            <li><input type="radio"  value="2" />二选项</li>  
            <li><input type="radio"  value="3"/>三选项</li>  
        </ul>  
    </fieldset>  
</form>  

7、每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

HTML新增的语义标签：
1、header 标签定义文档的页眉（网站标志、主导航、全站连接、搜索框）

2、nav

定义导航连接的部分（仅对文档中重要的链接使用，不推荐页脚使用）
3、article

定义外部的内容 （外部的文章，文本）
4、footer

定义文档或者节的页脚（文档作者、版权信息、使用条款连接、联系信息）等
5、aside

内容摘要（页面侧边栏、广告栏、友情链接、文章引语）
6、section
一个主体性的内容内容分组，通常包含一个头部，可能还包含一个尾部（footer）

<section>
    <header></header>
</section>
<section>
    <footer></footer>
</section>

7、main
显示页面的主题内容。每个页面只能包含一个main标签，main标签中不能包含网站标题、logo、主导航、版权声明等信息。

<main>
    <article>
        文章内容
    </article>
    <article>
        文章内容
   </article>
</main>

8、figure 用于对元素进行组合
9、

标签定义figure元素的标题，“figcaption”元素应该被置于“figure”元素的第一个和最后一个子元素的位置。