本文讲解如何修复 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;。

遵循以上结构，即可稳定、语义化地实现“文本紧贴标题正下方”的设计目标。