抛

抛弃令人厌恶的 <div />。我们应该使用语义化的 HTML 元素

2025-05-25

抛弃令人厌恶的 <div />。我们应该使用语义化的 HTML 元素

首先，我们要明确语义化 HTML 的含义。实体的语义描述了它的用途。通过使用语义化 HTML 元素，我们可以赋予代码结构以意义。不妨思考<div>一下这个标签：如果你以前从未听说过这个元素，你会认为它的用途是什么？

很难吧？🤔

想象一下，你尝试用家具店里买的一套工具来组装一张新桌子。它包含了组装桌子所需的一切，以及一本包含所有相关知识的手册。

现在想象一下，如果说明书的每一页都缺少页眉，那么查找说明书、包装盒内物品清单、保修政策等等都会变得非常困难。你仍然可以找到它们，但必须非常仔细地查看。

名称本身<div>并没有提供任何关于其可能扮演的角色的信息。现在想想标签或任何标题标签。标题元素具有一个角色，该角色描述了它作为标题所扮演的角色。页面上<h1>应该只有一个元素。 <h1>

对于您和您的网站用户来说，使用语义 HTML 元素有三个主要优点：

  • 搜索引擎优化

这是指 Google 等搜索引擎解读您网站内容的方式，它会影响您的网站在搜索结果中的显示位置。这意味着，忽视语义 HTML 可能会对找到网站并与之互动的用户数量产生负面影响。

  • 无障碍设施

使用能够更好地描述其所扮演的角色的元素，可以让屏幕阅读器更轻松地向残障用户介绍您网站的内容。

  • 代码的可读性和可维护性

使用语义化的 HTML 元素可以帮助你维护和调试代码，让你清楚地了解正在查看的代码部分。如果你与其他开发人员使用相同的代码库，这一点尤其重要。

我们可以使用许多语义元素，它们原则上可以做同样的事情，但能提供上述好处。现在我们了解了什么是语义元素以及它们为何重要，接下来我将向您展示一些可以用来替换<div>您可能仍在频繁使用的语义元素的语义元素。

在整篇文章中，我将使用MDN Web Docs为每个元素添加引号定义，然后用更简单的术语进行解释。

让我们开始吧👏。

<article>


MDN 的定义：

HTML<article>元素表示文档、页面、应用程序或网站中可独立分发或重复使用的内容（例如，用于联合发布）。示例包括：论坛帖子、杂志或报纸文章、博客文章、产品卡片、用户提交的评论、交互式小部件或小工具，或任何其他独立的内容项。

此元素通常用于包装代码库中可能包含多个内容片段的组件。例如，博客文章预览卡或文章本身，但实际上，当您的内容片段包含描述标题的内容以及标题所代表的内容时，就可以使用它。您还可以将<article>元素嵌套在一起。

示例👇

<article class="product">
  <h2>
    Coffee
  </h2>
  <article class="product-info>
    <h3>
      Product information
    </h3>
    <p>
      Very delicious coffee!
    </p>
  </article>
</article>
Enter fullscreen mode Exit fullscreen mode

<header>


MDN 的定义：

HTML<header>元素表示介绍性内容，通常是一组介绍性或导航辅助内容。它可能包含一些标题元素，也可能包含徽标、搜索表单、作者姓名和其他元素。


此元素通常用于将代表文章或帖子标题的元素分组在一起，其中至少有一个元素包含标题元素，例如<h2>。我还在网站着陆页的英雄页面中使用了它，该页面包含主标题元素<h1>，可能还有一些支持标题的图片、文本、链接或其他介绍性内容。

虽然称为页眉元素，但不必在页面顶部使用此元素，并且可以在其他部分元素（如<article>和）中使用<section>。

示例👇

<header class="header">
  <h1>
    Hero header
  </h1>
  <img src="heroimage.webp" alt="a nice descriptive alt text">
</header>
Enter fullscreen mode Exit fullscreen mode

或者

<article>
  <header>
    <h2>
      Article header
    </h2>
    <a href="/blog-article">
      Link
    </a>
  </header>
  ...
</article>
Enter fullscreen mode Exit fullscreen mode

<section>


MDN 的定义：

HTML<section>元素表示文档中一个通用的独立部分，没有更具体的语义元素来表示它。除极少数例外，每个部分都应该有一个标题。

与 类似，<div>通常有比<section>元素更好的选择。即便如此，当您需要划分不适合或或类似元素<div>的内容时（只要它不用于样式设置），它仍然比 有所改进。<nav><article>

如果您需要元素包装器来进行样式设置，最好坚持使用该<div>元素。

示例👇

<section id="blog-articles">
  <h2>
    Section header
  </h2>
  ...any other content related to the section
</section>
Enter fullscreen mode Exit fullscreen mode

<nav>


MDN 的定义：

HTML<nav>元素表示页面的一部分，其目的是提供当前文档内部或指向其他文档的导航链接。导航部分的常见示例包括菜单、目录和索引。


使用它来包装用于在页面上导航的主要链接集，向屏幕阅读器用户清楚地指示您网站的主要导航链接的确切位置。

示例👇

<nav id="main-nav">
  <ul>
    <li>
      <a href="/">
        Home
      </a>
    </li>
    <li>
      <a href="/blog">
        Blog
      </a>
    </li>
  </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

<main>


MDN 的定义：

HTML<main>元素代表文档的主要内容<body>。主要内容区域包含与文档的中心主题或应用程序的核心功能直接相关或扩展的内容。

网站的每个页面都只有一个<main>元素，用于向用户指示页面主要内容的位置。这些元素是忽略网站其他页面上重复出现的次要内容（例如，包含在<nav>、<footer>和<aside>中的其他内容）后剩下的内容。这些元素有时被称为布局组件/元素。

对于需要屏幕阅读器浏览您网站的用户来说，它还发挥着重要作用，因为他们能够指示他们的浏览器直接跳转到<main>元素及其包含的内容。

示例👇

<nav id="main-nav">
  <ul>
    ...navigational links
  </ul>
</nav>
<header id="landing">
  <h1>
    Some descriptive page header
  <h1>
  <p>
    ...explanation
  </p>
  <a href="/blog">
    call to action for user
  </a>
</header>
<main>
  <h2>
    Welcome to the main content of the page
  </h2>
  <article>
    <h3>
      Article title
    </h3>
    ...
  </article>
</main>
<footer>
  ...
</footer
Enter fullscreen mode Exit fullscreen mode

<aside>


MDN 的定义：

HTML<aside>元素表示文档的一部分，其内容与文档的主要内容仅间接相关。旁注通常以侧边栏或标注框的形式呈现。

元素<aside>的作用是提供一些与其相关内容相比次要的内容。这意味着，无论元素位于文档的哪个位置，它都应该只包含用户理解主要内容时不需要明确要求的内容。

例如，在文章中提供对某事物的定义或与内容相关的进一步解释。也可以提供指向其他文章的链接，进一步阐述某个定义。

示例👇

<article>
  <h2>
    Article header
  </h2>
  <p>
    I really enjoy writing JavaScript.
  </p>
  <aside>
    JavaScript is a high-level dynamically typed programming language. You can find more information here ...
  </aside>
  <p>
    I also really like semantic HTML.
  </p>
</article>
Enter fullscreen mode Exit fullscreen mode

<details> & <summary>


MDN 的定义：

HTML 详细信息元素 ( <details>) 创建一个公开窗口小部件，其中的信息仅在窗口小部件切换为“打开”状态时可见。可以使用该<summary>元素提供摘要或标签。

当你需要一个可以切换“打开”或“关闭”状态来显示或隐藏某些内容的小部件时，这两个元素非常有用。一个典型的用例是网站的 faq（常见问题解答）部分，允许用户点击问题来显示答案。

它不使用 JavaScript，这意味着即使用户已将浏览器设置为忽略 JavaScript，它仍能正常运行，从而提高您的网站的可访问性。标签<summary>包含用户始终可见的文本，而<details>标签则包含窗口小部件处于“打开”状态时要显示的信息。

示例👇

<details>
  <summary>
    Do you offer tours of the brewery?
  </summary>
     Unfortunately at this time we do not offer tours of the brewery. We are currently building our taproom so stay tuned.
</details>
<details>
  <summary>
    Are your beers gluten-free?
  </summary>
     All of our beers are gluten-free and vegan-friendly!
</details>
Enter fullscreen mode Exit fullscreen mode

<figure> & <figcaption>


MDN 的定义：

HTML<figure>元素（带可选标题的图形）表示自包含的内容，可能带有可选的标题，该标题使用 ( <figcaption>) 元素指定。图形、其标题及其内容被视为一个整体。

通常，<figure>元素包含一张图片（尽管并非必需），并且通常附带一个<figcaption>提供元素描述的元素。您还可以包含其他元素，例如<p>与图片相关的标签。

<figure>根据我的经验，当您在某些文章或帖子中包含与您在撰写的内容相关的内容（例如图像、图表或代码片段）时，包含该元素很有用。

示例👇

<article>
  <h2>
    Article header
  </h2>
  <p>
    ...some introductory text
  </p>
  <figure>
    <img src="post.webp" alt="a nice descriptive alt text" />
    <figcaption>
      Photo taken by Kieran Roberts
    </figcaption>
  </figure>
  <p>
    ..rest of the article
  </p>
</article>
Enter fullscreen mode Exit fullscreen mode

<blockquote>


MDN 的定义：

HTML<blockquote>元素（或 HTML 块引用元素）指示所包含的文本是扩展引用。通常，通过缩进来呈现视觉效果（有关如何更改缩进，请参阅注释）。可以使用 cite 属性提供引用来源的 URL，而可以使用<cite>元素提供来源的文本表示。

<blockquote>当您想在网站中包含来自其他来源的文本时，请使用。元素cite上的 属性<blockquote>应用于提供内容的原始来源。

示例👇

<blockquote cite="link to the souce">
  <p>
    This is an inspirational quote from another source
  </p>
  <footer>
    Source author, <cite>content of the citation</cite>
  <footer>
</blockquote>
Enter fullscreen mode Exit fullscreen mode

<abbr>...</abbr>


MDN 的定义：

HTML 缩写元素 ( <abbr>) 表示缩写或首字母缩略词；可选的 title 属性可以为缩写提供扩展或描述。如果存在，标题必须包含完整的描述，不得包含任何其他内容。

这个元素非常适合为您网站上的首字母缩略词提供简单但有效的工具提示效果。我已经在我的作品集中为 JavaScript(js) 等内容添加了这个属性。title当用户将鼠标悬停在首字母缩略词上时，该属性会提供该缩略词的完整描述。

示例👇

<p>
  I really enjoy working with<abbr title="JavaScript"> js </abbr>and I am now learning <abbr title="TypeScript"> ts </abbr>.
</p>
Enter fullscreen mode Exit fullscreen mode

<footer>...</footer>


MDN 的定义：

HTML<footer>元素表示其最近的章节内容或章节根元素的页脚。页脚通常包含章节作者的信息、版权数据或相关文档的链接。

通常，人们会<footer>在文档底部添加一个 or 元素，但我们也可以添加<footer>for each <article>or<section>元素，只要它没有其他<footer>or<header>元素作为后代。在 or 元素中，<footer>您可以包含任何与元素位置相关的文本、图像或链接。

示例👇

<footer>
  <p>
    This is the end of the site
  </p>
</footer>
Enter fullscreen mode Exit fullscreen mode

或者

<article>
  <h2>
    Article header
  </h2>
  <p>
    Article content
  </p>
  <footer>
    <p>
      Article footer
    </p>
  <footer>
</article>
Enter fullscreen mode Exit fullscreen mode

结论

我希望您已经学到了一些有关语义 HTML 的知识，您可以将这些知识运用到未来的项目中，以使与您的网站互动的每个人都能更轻松地访问您的标记！

您可以关注我@Kieran6dev，我始终很活跃并且很高兴与您联系！

感谢阅读👋

文章来源：https://dev.to/kieran6roberts/ditch-the-dreaded-div-semantic-html-elements-we-should-use-instead-1k60
Devto 翻译
PREV
我第一次如何构建一个真实世界的项目🌈目录项目介绍👋技术栈⚛️线框和设计🎨数据建模💾项目组织🗂️Sprint 01：前端📲Sprint 02：后端📊Sprint 03：实现功能⭐Sprint 04：修复和部署☁️结论✅
NEXT
我最喜欢的 Web 开发工具！