本文讲解如何修复 html 中因误用语义化标签（如将 `
` 内）和未设置 `flex-direction` 导致的文本错位问题，提供语义正确、样式可控的解决方案。
在 HTML 中，标题标签（如
）是纯语义化块级元素，其内容模型仅允许短语级内容（phrasing content），例如文字、、 等，不允许嵌套块级元素（如 、、）。您原始代码中将 直接写在 内部，属于 HTML 结构错误——尽管部分浏览器会“容错渲染”，但这会导致不可预测的布局行为、SEO 损害及无障碍访问失效。
此外，display: flex 默认采用 flex-direction: row（水平排列），因此即使结构合法，子元素也会并排显示，而非上下堆叠。
✅ 正确做法：使用语义清晰的容器包裹标题与副文本，并显式声明垂直布局：
header
text that needs to be under the header
? 关键改进说明：
- 使用 作为外层布局容器（非语义化但功能明确），内部用标准
+
组合，符合 HTML5 内容模型；
- 显式添加 flex-direction: column，确保子元素垂直堆叠；
- 为
和
分别设置 margin: 0 和 margin-top: 8px，精准控制间距（避免依赖默认 margin-bottom 的不确定性）；
- 补充 text-align: center 防止内联文本在 flex 容器中因换行或宽度变化而偏移。
⚠️ 注意事项：
- 切勿将 、
等块级元素嵌套进 ～ 中——这是 W3C 规范明确禁止的；
- 若需响应式适配，建议将内联样式迁移至 CSS 类中，并配合媒体查询调整字体大小与间距；
- 如需更高级的垂直对齐（例如标题固定、副文本动态居中），可考虑 grid 布局：display: grid; place-items: center; 配合 grid-template-rows: auto auto;。
遵循以上结构，即可稳定、语义化地实现“文本紧贴标题正下方”的设计目标。
、 此外，display: flex 默认采用 flex-direction: row（水平排列），因此即使结构合法，子元素也会并排显示，而非上下堆叠。 ✅ 正确做法：使用语义清晰的容器包裹标题与副文本，并显式声明垂直布局： text that needs to be under the header ? 关键改进说明： 组合，符合 HTML5 内容模型； 分别设置 margin: 0 和 margin-top: 8px，精准控制间距（避免依赖默认 margin-bottom 的不确定性）； ⚠️ 注意事项： 遵循以上结构，即可稳定、语义化地实现“文本紧贴标题正下方”的设计目标。 内部，属于 HTML 结构错误——尽管部分浏览器会“容错渲染”，但这会导致不可预测的布局行为、SEO 损害及无障碍访问失效。
header
+
和
～
中——这是 W3C 规范明确禁止的；
