HTML语义化案例分析｜ 青训营

一、什么是HTML语义化

HTML语义化是一种Web开发技术，旨在通过使用恰当的HTML标签来增强网页内容的结构和含义，使得页面内容对于机器和人来说都更加容易理解。它不仅仅可以提高网站的可读性和可访问性，还有助于优化搜索引擎排名。

二、语义化的HTML标签

以MDN网站的《HTML：无障碍的良好基础》这一篇为例进行分析。以下是部分结构截取，完整请前往文章查看。

<main id="content" class="main-content  "><article class="main-page-content" lang="zh-CN">
<header><h1>HTML：无障碍的良好基础</h1></header>
<div class="section-content">
    <ul class="prev-next">
        <li>
            <a class="button secondary" href="/zh-CN/docs/Learn/Accessibility/What_is_accessibility"></a>
        </li>
    </ul>
    <p>在网页开发的过程中，用正确的 HTML 标签来表达正确的意图，可以提升网页的无障碍。这篇文章将会详细介绍如何最大化地提升网页的无障碍。</p>
    <figure class="table-container">
        <table class="learn-box standard-table">
          <tbody>
            <tr>
              <th scope="row">前提：</th>
              <td>
                有一定的 HTML 基础（可参阅
                <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 入门</a>），理解<a href="/zh-CN/docs/Learn/Accessibility/What_is_accessibility">什么是无障碍</a>。
              </td>
            </tr>
            <tr>
              <th scope="row">目标：</th>
              <td>了解无障碍为网页带来的好处和如何在网页中进行实现。</td>
            </tr>
          </tbody>
        </table>
    </figure>
</div>
<section aria-labelledby="html_和无障碍">
<h2 id="html_和无障碍"><a href="#html_和无障碍">HTML 和无障碍</a></h2>
...
<div class="metadata-content-container">
<div id="on-github" class="on-github">
<h3>Found a content problem with this page?</h3>
<ul>
    <li>
        <a href="https://github.com/mdn/translated-content/edit/main/files/zh-cn/learn/accessibility/html/index.md" title="This will take you to GitHub, where you'll need to sign in first." target="_blank" rel="noopener noreferrer">Edit the page on GitHub</a>.</li><li><a href="https://github.com/mdn/translated-content/issues/new?template=page-report-zh-cn.yml&amp;mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn%2FAccessibility%2FHTML&amp;metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60zh-cn%2Flearn%2Faccessibility%2Fhtml%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn%2FAccessibility%2FHTML%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fzh-cn%2Flearn%2Faccessibility%2Fhtml%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2Fd70eee4b8cf68344a9d5544cf94d090494d49a66%0A*+Document+last+modified%3A+2023-07-18T09%3A52%3A27.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report the content issue</a>
    </li>
    <li>
        <a href="https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn/accessibility/html/index.md?plain=1" title="Folder: zh-cn/learn/accessibility/html (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View the source on GitHub</a>.</li></ul>Want to get more involved?<!-- --> <a href="https://github.com/mdn/content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.</div><p class="last-modified-date">This page was last modified on<!-- --> <time datetime="2023-07-18T09:52:27.000Z">2023年7月18日</time> by<!-- --> 
        <a href="/zh-CN/docs/Learn/Accessibility/HTML/contributors.txt">MDN contributors</a>
    </li>
</ul>
</aside></article></main>

三、分析

• 在这个HTML结构中，使用了诸如<main>**、<header>、<section>、<aside>、<article>**等语义化标签，这有助于构建清晰的内容层次结构，让整篇文章更加易读，更加知道那部分的内容属于哪里，是什么。
• 每个章节也都有使用<h2>标签来标记标题，这有助于搜索引擎正确解读网页内容，有助于读者更快地找到对应的内容。
• 在HTML语义化，将结构与样式分离，这样使得页面更加易于维护和修改，也可以提高网页访问量，使得屏幕阅读器和搜索引擎更容易理解页面内容。
• 像<header>**、<main>、<footer>**这样的标签，通常是按照文章的逻辑顺序进行编排，整体层次结构更加清晰。让人更加快速定位文章的头部标题，网页主体内容和尾部。