HTML语义化的案例分析

语义化是什么？

语义化是指通过适当选择HTML元素和属性，将文档的结构和含义明确地表达出来，使得网页内容更容易理解和操作的方法。

在HTML中，语义化的目标是使用合适的标签来表示不同类型的内容。这些HTML中的元素、属性及属性值都拥有某些具体的含义，以便用户能够准确地理解其意义，同时使得搜索引擎和其他工具能够更好地理解和处理网页内容。例如，使用<header>元素来表示页眉，<nav>元素来表示导航栏，<article>元素来表示独立的内容块等等。

语义化的好处

代码可读性

使用恰当的语义化标签能够更准确地描述网页内容的结构和含义，使代码更易于阅读和理解。这对于团队合作，以及日后代码的维护和调整非常重要。
可维护性

使用恰当的标签能够提供更清晰的结构，将网页分成不同的语义块，使得开发人员可以更容易地定位、修改样式和功能，而无需破坏整体结构。这样可以减少代码的重复，提高代码的可重用性和可维护性。
搜索引擎优化

搜索引擎使用算法来理解网页的内容，而语义化的HTML结构有助于搜索引擎正确理解网页的结构和关键内容，从而使搜索引擎更好地索引和解析网页。这可以提高网页在搜索结果中的排名和可见性，带来更多的流量和用户访问。
提升无障碍性

语义化标签对于无障碍性的提升非常重要。对于使用辅助工具的用户（如视障人士使用屏幕阅读器），恰当的语义化标签能够提供更好的可访问性和可用性。这意味着用户能够更容易地获取并理解网页的结构，从而更好地浏览和使用网页内容。

案例对比分析

以MDN和菜#教程为例进行分析。以下是部分网页源代码(为便于展示已将部分代码省略)。

<main id="content" class="main-content  ">
    <article class="main-page-content" lang="zh-CN">
        <header>...
        </header>
        <div class="section-content">...
        </div>
        <section aria-labelledby="尝试一下">
            <h2 id="尝试一下"><a href="#尝试一下">尝试一下</a></h2>
            <div class="section-content">
                ...
            </div>
        </section>
        ...
        <h2 id="规范"><a href="规范">规范</a></h2>
        <table class="standard-table">
            ...
        </table>
        <h2 id="浏览器兼容性"><a href="浏览器兼容性">浏览器兼容性</a></h2>
        <figure class="table-container">...
        </figure>
        <section class="bc-legend">...
        </section>
        <div class="hidden">...
        </div>
        <section aria-labelledby="参见">...
        </section>
        <aside class="metadata">...
        </aside>
    </article>
</main>

<div class="container logo-search">
    <div class="col search row-search-mobile">
        <form action="index.php">
            <input class="placeholder" placeholder="搜索……" name="s" autocomplete="off">
        </form>
    </div>
    ...
</div>
<div class="container navigation">
    <div class="row">
        <div class="col nav">
            <ul class="pc-nav" id="runoob-detail-nav">
                ...
            </ul>
        </div>
    </div>
</div>
...
<div class="container main" style="height: auto !important;">
    <div class="row" style="height: auto !important;">
        <div class="runoob-col-md2">
            <div class="left-column">
                ...
            </div>
        </div>
        <div class="fivecol last right-column">
            ...
        </div>
    </div>
    <div id="footer" class="mar-t50">
        ...
    </div>
</div>

通过对比这两个示例，可以清楚地看出语义化标签的作用和效果以及非语义化标签的缺点。

在没有使用语义化标签的第二个网页示例中，使用了大量的<div>和自定义类名来表示网页结构和样式。虽然有id和class名，但真的很难分辨这些<div>的用途。这导致源代码缺乏明确的语义表达，使得代码不易于阅读和理解。实际上本来的源代码中还穿插了零零散散的<style>和<script>(已省略)，整个源代码就更难阅读了。

而在使用语义化标签的第一个网页示例中，使用了<main>、<article>、<header>、<section>、<footer>等具有明确语义的标签来表示网页的结构和内容。这使得源代码在没有样式和脚本的情况下依然能够传达信息，更易读也更能清晰地反映网页的结构和含义。

总结

MDN中介绍<div> 的页面有这么一条使用说明：

<div> 元素应当仅在没有任何其他语义元素（比如 <article> 或 <nav> ）可用时使用。

满屏的 div 布局往往需要依赖样式和注释来表明网页的含义。这样的源代码的语义性较弱，不易于理解和维护，也不利于代码复用。

与使用了大量的<div>和<span>等非语义化标签相比，使用恰当的语义化标签能够更准确地描述网页内容的结构和含义，使代码更易于阅读和理解。同时，语义化标签还对搜索引擎优化和无障碍性提供良好的支持，有助于网页在搜索结果中的排名，以及提供更好的访问性和可用性。在开发网页时，应尽可能采用恰当的语义化标签。

HTML语义化的案例分析 | 青训营

HTML语义化的案例分析

语义化是什么？

语义化的好处

案例对比分析

总结