对于 a11y 和 SEO 来说，将 h3 放在 h2 之前是一个不好的做法吗？

Question

在本节中我有两个标题

"Why Choice Us"

和

"Best Choicing For Cryptocurency"

这两个的正确标记是什么？

a11y 可以为他们放置 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>

。

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