web语义话
对于web语义化的理解一直不够清晰，最近看了两篇关于web语义话的文章，整理了一下，跟大家分享。
随着Web前端“结构-表现-行为”的原则不断细化，对Web语义化也提出了更高的要求。何为Web语义化？个人认为，Web语义化是指在进行HTML结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简介明了，易于进行Web操作和网站SEO，方便团队协作的一种标准，以图实现一种“无障碍”的Web开发。
我们可以通过下面两端代码来对比一下：
<header> <h1>标题</h1> </header> <main></main> <footer></footer>
此段代码能都非常直观的反应网页的组成部分：header、main、footer。不仅程序猿能够很清楚的看懂，而且也非常便于浏览器的识别。在进行SEO时，这三部分的内容是能够被搜索引擎识别的。
现在我们来对比一下另外一种写法：
<div> <span>标题</span> </div> <div></div> <div></div>
你能知道这表示的是header、main、footer三部分？显然不能。并且这种问题不是简单通过加class = "header"来实现，因为SEO是通过网页的DOM结构来搜索的，并且一个网页中的class是很多的，不要增加没必要的class。
当然在使用CSS和JavaScript时，也要尽量使class、id及函数名等实现见文知意。
而在团队协作中，践行Web语义化使得各前端工程师有一个统一的参照标准，防止了参差不齐的代码使得团队协作效率的低下和代码bug的增多。
接下来我们可以对比另外两组代码，进一步的理解web语义化：
<table> <tr> <td colspan="2">Student List</td> </tr> <tr> <td>Name</td> <td>Age</td> </tr> <tr> <td>Byron</td> <td>24</td> </tr> <tr> <td>Vincent</td> <td>25</td> </tr> <tr> <td>Casper</td> <td>27</td> </tr> </table>
就算是没有看到页面效果，相信很多同学看到内容后也能明白这个表格在描述什么，但是计算机（搜索引擎）却不明白，计算机并不知道Name或者Age代表title，而下面的是内容。但如果这么写
<table> <caption>Student List</caption> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Byron</td> <td>24</td> </tr> <tr> <td>Vincent</td> <td>25</td> </tr> <tr> <td>Casper</td> <td>27</td> </tr> </tbody> </table>
这样即使我们不看内容也能了解这大概是什么，计算机也会理解哪些是标题，哪些是header，哪些是内容。
HTML的每个标签都有其特定含义（语义），Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。
Web语义化的作用
可以归纳为以下3点：
- 语义化的Web结构利于机器识别，方便SEO；
- 语义化的Web结构代码简洁明了，利于人阅读和维护，方便以后扩展；
- 语义化的Web结构利于团队协作，减少出错几率，使工作有个统一标准；
如何实现代码语义化
其实项目在不同的要求下可能会在Web语义化方面会有不同的方式，但是个人认为，培养自己写代码时遵循Web语义化的方法是相同的。具体可以是如下步骤：
1. 首先要知道Web中的常用标签有哪些，知道每个标签的具体含义和应用场合。这些知识网上有很多资料，比如 菜鸟教程 和 w3cSchool 。这里补充一下， Code Guide 上有很全面的代码书写规范，建议大家也去看看
2. 其次，自己多实践。在敲代码的时候，多想想每个地方的结构是否都符合Web语义化。在练习中不断加深对Web语义化的理解和应用。
3. 最后，多去模仿一些网站的代码，看看别人设计的代码是如何做到Web语义化的，多吸取别人的经验和方法。
参考链接：http://www.jb51.net/web/77505.html
https://www.zhihu.com/question/20455165/answer/15183203
http://www.mamicode.com/info-detail-482090.html
