Web语义化的理解

1.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的增多。

2.Web语义化的作用

可以归纳为以下3点：
- 语义化的Web结构利于机器识别，方便SEO；
- 语义化的Web结构代码简洁明了，利于人阅读和维护，方便以后扩展；
- 语义化的Web结构利于团队协作，减少出错几率，使工作有个统一标准；

3.如何实现代码语义化

其实项目在不同的要求下可能会在Web语义化方面会有不同的方式，但是个人认为，培养自己写代码时遵循Web语义化的方法是相同的。具体可以是如下步骤：
1. 首先要知道Web中的常用标签有哪些，知道每个标签的具体含义和应用场合。这些知识网上有很多资料，比如 菜鸟教程 和 w3cSchool 。这里补充一下， Code Guide 上有很全面的代码书写规范，建议大家也去看看
2. 其次，自己多实践。在敲代码的时候，多想想每个地方的结构是否都符合Web语义化。在练习中不断加深对Web语义化的理解和应用。
3. 最后，多去模仿一些网站的代码，看看别人设计的代码是如何做到Web语义化的，多吸取别人的经验和方法。