web语义话

Posted 2020-09-16

对于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