HTML语义化 | 青训营

HTML语义化是指在编写HTML代码时，使用具有语义容器特征的标签来描述网页内容结构，让机器、搜索引擎和用户更容易理解网页内容的结构和元素。HTML语义化是网页优化的基础之一，对于SEO、前端开发、用户体验等方面都非常重要。 下面以实际网站为例，通过对比语义化标签和非语义化标签的使用差异，探讨HTML语义化的重要性。

1. 京东商城

京东商城作为国内知名的电商网站，其HTML代码没有采用过多的语义化标签，而是大量使用了div和span等非语义化标签。以页面头部菜单为例，代码如下：

```<div class="w">
    <div class="fore1">
        <a href="http://www.jd.com/" class="link-home">京东首页</a>
        <div class="dt">我的京东</div>
        <div class="dd">
            <ul>
                <li><a href="https://passport.jd.com/new/login.aspx?ReturnUrl=http%3A%2F%2Fwww.jd.com%2F" target="_top" title="请登录">请登录</a></li>
                <li><a href="https://passport.jd.com/new/register.aspx?ReturnUrl=http%3A%2F%2Fwww.jd.com%2F" target="_top" title="免费注册">免费注册</a></li>
            </ul>
        </div>
    </div>
</div>

从结构上看，这个页面使用了大量的div标签和少量的a、ul、li标签，在代码缺少注释的情况下，很难让人一眼看懂它的结构和意图。相比之下，如果使用语义化标签，这段代码能够更容易理解和维护。例如，用header标签代替最外层的div，用nav标签代替数组成菜单的ul和li标签，代码如下：

```<header>
    <div class="w">
        <a href="http://www.jd.com/" class="link-home">京东首页</a>
        <nav>
            <ul>
                <li><a href="https://passport.jd.com/new/login.aspx?ReturnUrl=http%3A%2F%2Fwww.jd.com%2F" target="_top" title="请登录">请登录</a></li>
                <li><a href="https://passport.jd.com/new/register.aspx?ReturnUrl=http%3A%2F%2Fwww.jd.com%2F" target="_top" title="免费注册">免费注册</a></li>
            </ul>
        </nav>
    </div>
</header>

可以看到，使用语义化标签后，代码的可读性和可维护性都会得到显著提升。

2. 知乎

知乎是一个以问答社区为主的网站，其HTML代码采用了很多语义化标签，如header、nav、article、section等。以一个问题详情页面为例，其HTML代码如下：

```<header class="QuestionHeader">
    <h1 class="QuestionHeader-title">{{ questionData.title }}</h1>
    <div class="QuestionHeader-meta">
        <div class="RichText ztext">
            <span>
                发布于&nbsp;
            </span>
            <span itemprop="dateCreated">
                {{ questionData.created | formatDate }}
            </span>
        </div>
        <div class="QuestionHeader-actions">
            <button class="Button QuestionHeaderFollowButton QuestionHeaderUnfollowButton Button--plain" type="button">
                <div class="Button-content">
                    <span class="Button-icon Icon Icon--follow"></span>关注问题
                </div>
            </button>
            <button class="Button QuestionHeaderFollowButton Button--primary" type="button">
                <div class="Button-content">
                    <span class="Button-icon Icon Icon--plus"></span>写回答
                </div>
            </button>
        </div>
    </div>
</header>
<main>
    <article class="Question-main" id="QuestionAnswers">
        <section class="QuestionAnswers-answers">
            <div class="ListShortcut"></div>
            <div class="ListShortcut"></div>
            <div class="ListShortcut"></div>
            <div class="ListShortcut"></div>
            <div class="ListShortcut"></div>
            <div class="ListShortcut"></div>
            <div class="ListShortcut"></div>
            <div class="ListShortcut"></div>
            <div class="ListShortcut"></div>
            <div class="ListShortcut"></div>
            <div class="ListShortcut"></div>
        </section>
    </article>
</main>

可以看到，知乎使用了很多语义化标签，并给每个元素都加上了有意义的class名称，不仅方便搜索引擎分析网页内容结构，也让代码更易于理解和维护。因此，在开发过程中，尽量采用语义化标签能够大大提高网页的可读性和可维护性。

3.总结

HTML语义化不仅有助于机器对网页内容进行分析和理解，更能够提高网页的可读性和可维护性。在编写HTML代码时，尽量采用语义化标签，给每个元素都加上有意义的class名称，尽量避免使用过多、重复、嵌套的无语义标签，可以让代码更加优雅，有助于开发过程的顺利进行。

4.补充（关于HTML语义化的知识和重要性）

HTML语义化指的是在HTML代码中，用合适的标签和属性来表示页面元素的结构和含义，从而使页面在没有CSS样式和JavaScript的情况下也能够被正确地理解和阅读。具体来说，它包括以下几个方面：

1. 选择合适的标签：使用合适的HTML标签，比如p、h1、ul、ol等，来标示出页面的结构和层次，而不是仅仅使用div或span等非语义化的标签。
2. 使用有意义的ID和class属性：通过为页面元素添加有意义的ID和class属性，来描述它们的作用和含义，从而使页面更具可读性和可维护性。
3. 标示表格数据：对于表格这种特殊的元素，使用thead、tbody、tfoot等语义化标签，以及th和td等标记区分表头和数据单元格，从而使表格更具有可读性和无障碍性。
4. 给链接和图片添加说明：对于链接和图片这种常用的元素，要为它们添加合适的alt和title属性，以描述它们的作用和内容，这也有助于提高搜索引擎对页面的理解。