从语义与可访问性角度，如何正确标记HTML标题？<h3>后接<h2>合规吗？

一、核心规范：标题层级必须遵循逻辑递进 #

• HTML的标题标签（h1-h6）代表内容的层级结构关系，必须从高到低依次使用，绝对不能反向跳级（比如h3之后用h2是完全不符合规范的）。
• 一个页面建议只保留一个h1作为全局主标题，后续的h2、h3等要严格对应内容的从属关系。

二、针对你的两个文本的正确处理方式 #

你的区块里，“Why Choose Us”是引导性的次级文本（标语/副标题），“Best Choosing For Cryptocurrency”才是该区块的核心主标题，正确的标记逻辑如下：

1. 核心主标题用h2（前提是页面已有h1作为全局主标题），这符合层级递进的逻辑。
2. 引导性标语“Why Choose Us”不适合用标题标签——它不是内容层级的一部分，只是主标题的辅助说明，应该用<p>标签配合自定义类名（比如.subtitle）来标记，样式完全可以通过CSS调整，这样语义更准确。

三、你当前方案的问题 #

你用<h3>Why Choose Us</h3>后接<h2>Best Choosing For Cryptocurrency</h2>的写法存在两个关键问题：

• 语义混乱：反向的层级会让浏览器和辅助工具错误地认为“Best Choosing For Cryptocurrency”是“Why Choose Us”的父级标题，完全颠倒了内容的主次关系。
• 可访问性缺陷：屏幕阅读器会按标题层级播报内容结构，反向跳级会让视障用户误解内容的组织逻辑，破坏体验。

四、修正后的代码示例 #

<div class="container">
    <p class="subtitle">Why Choose Us</p>
    <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>

特殊场景的替代方案（不推荐，仅当设计强需求时使用） #

如果必须让标语有标题样式但不想破坏语义层级，可以用aria-level属性修正辅助工具的识别逻辑：

<h2 aria-level="3" class="subtitle">Why Choose Us</h2>
<h2>Best Choosing For Cryptocurrency</h2>

这里aria-level="3"告诉辅助工具这个h2的层级相当于h3，但视觉上仍可通过CSS调整样式，不过这种方式的语义清晰度远不如用p标签。

内容的提问来源于stack exchange，提问作者Asmaa Mahmoud