HTML语义化的案例分析——以MDN网站为例

站长

2023年09月04日 22:45 · 阅读数 17

一些杂七杂八碎碎念

还记得一年前学习三板斧时候，被<div>、<span>这种块元素和行内元素折磨的痛苦，特别是学到浮动时，对于导航栏布局，经常是要调整很久，后面学习了盒子布局之后，才稍稍舒服了些，然后慢慢学习了解之后，学到了语义化标签，到现在还记得使用<nav>标签时候的惊喜，竟然一个标签就可以把布局弄好，着实让我惊讶。

写这篇文章主要是被青训营的一个笔记创作方向点起，联想到被<nav>标签所带来的惊喜，于是随手在搜索引擎搜索关于语义化标签的相关内容，找了很多网站，发现很多其实都没有用到语义化标签，这可让我开始苦恼，也稍稍疑惑为何语义化标签如此好用，结构清晰明了，但是用的人相对还是很少，大多数还是用div这样的标签进行搭建。搜着搜着，突然看到MDN的一篇文章名为：《HTML：无障碍的良好基础》（developer.mozilla.org/zh-CN/docs/…）于是被吸引点进去浏览。开篇的一句话，“在网页开发的过程中，用正确的 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>**这样的标签，通常是按照文章的逻辑顺序进行编排，整体层次结构更加清晰。让人更加快速定位文章的头部标题，网页主体内容和尾部。

四、语义化标签对无障碍阅读的好处（偏个题）

无障碍阅读是指确保网站、应用程序和其他电子文档对所有用户，包括视力障碍用户、听力障碍用户等等，都能够无障碍地访问和使用。以下是语义化标签对无障碍阅读的优点

HTML语义化标签能够提供更加准确的信息结构，帮助屏幕阅读器正确解读网页内容，使得内容更加易于理解。（屏幕阅读器是一种辅助技术，能够将网页内容转换为音频或者盲文，供视力障碍用户阅读）
像一些身体障碍用户，可能会比较依赖键盘来进行操作。使用语义化标签能够帮助他们通过键盘轻松导航到页面的不同部分，无需使用鼠标来点击。
对于**<img>**标签的alt属性，可能我们只是认为当网络不好，无法加载图像时对图像进行一些描述，并没有太多用处，但其实它对于听力障碍用户来说，提供这种描述性的代替文本有助于传达图像内容，帮助他们更好地理解文章等等内容。
对于视障用户，理解表单的含义特别重要。使用适当的表单标签比如**<label>、<input>的type属性以及<fieldset>**等能够增强表单的可访问性，并使得表单内容更易理解和使用。

五、小总结

合理地使用HTML语义化标签，对于我们开发者而言，可以让网页结构更加清晰、内容更加易读、网页的访问量也比较可观，增强SEO优化，提高搜索引擎的识别度，从而为用户带来更好的体验。作为开发者，我们也不仅仅要关注大多数的需求，少数人群的需求我们也应该兼顾。HTML语义化标签对无障碍阅读有这么重要的作用，这也是我今天才了解到的。它使得网页内容对于各类用户更加友好和易于使用。对所有用户做到尊重和关心，做一个更有人文关怀的开发者，也是我的追求。（如果有任何不对的地方，请大家指正。）