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