在 HTML 中标记标题和标语的正确方法是什么？ [已关闭]

Question

在本节中，我有两个标题“为什么选择我们”和“加密货币的最佳选择”。

从语义和可访问性的角度来看，标记这两行文本的正确方法是什么？先用 h3 再用 h2 可以吗？

<div class="container">
    <h3>Why Choose Us</h3>
    <h2>Best Choosing For Cryptocurrency</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <div class="features">
        <div class="feature">
            <div class="feature-icon">🛡️</div>
            <div>
                <h3>World Digital Money Secure</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
            </div>
        </div>
        <div class="feature">
            <div class="feature-icon">%</div>
            <div>
                <h3>More Profits Percentage</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
            </div>
        </div>
        <div class="feature">
            <div class="feature-icon">📅</div>
            <div>
                <h3>10 Years Experience</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
            </div>
        </div>
    </div>
    <div class="placeholder"></div>
</div>

Answer 1

这只是一个无效的标题结构。

温馨提示：

• 您不应该跳过级别，例如

  <h2>

  然后

  <h4>

• 如果没有较高级别的标题，则不应有较低级别的标题，例如

  <h3>

  ，然后

  <h2>

  （如果

  <h2>

  之前没有任何

  <h3>

  ）。

第二点正是你的情况。您应该使用

<h2>

而不是

<h3>

。

鉴于屏幕阅读器和其他工具可以向用户提供标题的层次结构列表，创建不正确的结构可能会在此类列表中产生错误，从而阻止用户在最后正确阅读页面。

Answer 2

标题意味着文档大纲的新部分。在您共享的设计中，两行文本在语义上并不充当单独的标题。相反，它们充当标题和标语（或副标题），需要在 HTML 中以特定方式进行标记。

在这种情况下不要使用 h3 + h2

<!-- don't do this -->
<h3>Why Choose Us</h3>
<h2>Best Choice For Crypto</h2>

使用 h3 后跟 h2 意味着“为什么选择我们”是属于上一节的空子节，与下一节“加密货币的最佳选择”无关。这与预期的文档结构不一致，其中标题和补充副标题（或标语）一起作为单个部分的标题。

在看不到其余标记的情况下，如果 h3 前面的标题是 h1，它也可能是无效的 HTML。

在这种情况下也不要使用 h2 + h3

<!-- also don't do this -->
<h2>Why Choose Us</h2>
<h3>Best Choice For Crypto</h3>

尽管使用 h2 后跟 h3 是有效的 HTML，但在这种情况下也是不合适的。 “加密货币的最佳选择”并不是“为什么选择我们”部分的独立子部分。相反，这两个元素一起工作，充当单个部分的单个标题。

相反，使用 hgroup 和 h2

<!-- do this -->
<hgroup>
  <h2>Why Choose Us</h2>
  <p>Best Choice For Crypto</p>
</hgroup>

hgroup 元素—

<hgroup>

元素允许将标题与任何辅助内容（例如副标题、替代标题或标语）进行分组。这些类型的内容中的每一种都表示为

<p>

中的

<hgroup>

元素。

从语义上讲，尽管它的样式更大，“加密货币的最佳选择”是一个标语，补充了该部分的真实标题，即“为什么选择我们”。从语义上讲，这最符合 HTML 规范。从可访问性的角度来看，它比其他两个选项的问题也更少，因为它允许文档大纲与内容和设计的意图相匹配。