前端学习之路 HTML5之语义化
一 前言
最近在学习前端知识，因此想写一些博客用以记录自己所学与感悟，同时也想给正在学习这块儿知识的朋友们带来一些启发，所写内容大都为自己的理解，若有错误与不足欢迎大家指正。
二 知识剖析
什么是语义化
说的通俗一点，所谓HTML语义化就是用具有实际语义的标签去描述相应的HTML结构。 例如：header标签用来表示页面或节的页头、footer标签用来表示页面或节的页脚、nav标签用来表示页面主要导航栏等等。
三 常见问题
HTML语义化的意义
四 解决方案
- 增加页面可读性。良好的语义化代码即使失去CSS的渲染也可以呈现清晰的结构。
- 利于不同设备解析（例如移动设备、屏幕阅读器、盲人阅读器等）。
- 有利于SEO。与搜索引擎建立良好的沟通，有利于爬虫爬去更多有效信息，爬虫依赖标签确定上下文和各关键字的权重。
- 便于团队开发和维护。团队遵守相同的标准，减少差异化。
五 编码实战
首先来看个例子
选取的是一个国外网页
结构分析
<div id="header">页头</div>
<div id="nav">导航</div>
<div id="section">
<div id="article">文章</div>
<div id="aside">侧边栏</div>
</div>
<div id="footer">页脚</div>
嗯.... 若是你不想被老板鄙视或者遭到同事的白眼的话，建议你还是不要这么写了，来看看html5是如何描述结构的：
<header>页头</header>
<nav>导航</nav>
<section>
<article>文章</article>
<aside>侧边栏</aside>
</section>
<footer>页脚</footer>
可以看到的是div标签清一色地被其他标签代替了，而这些标签拥有共同的一个特点那就是具有一定的语义。 当然这个页面中的内容还可以继续细分，比如article标签中还包含着h2、p等标签，aside标签同理，这里只展示大体思路，细节就不多多赘述了，可以寻找网页自行练习。
六 注意事项
- 可以的情况下尽量不要使用无意义标签如div和span；
- 避免使用纯样式标签，html用以书写结构，样式由css设置；
- 避免标签的滥用如nav标签只表示页面主导航栏，禁止为了方便将标签用于定义之外的部分；
- 当语义不明显，可以使用div或p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利； ###具体标签我就不做过多介绍，有疑惑的可以查阅相关文档
