HTML5语义优化核心是用header、nav、main、article等标签真实反映内容含义与层级，严格遵循h1–h6标题逻辑顺序，配合time、address等辅助标签及JSON-LD结构化数据，实现搜索引擎、屏幕阅读器与开发者三方可读统一。
HTML5文档结构的语义优化，核心是让每个标签真实反映内容的含义与层级关系，而不是仅用于视觉布局。这直接决定搜索引擎能否准确抓取主次信息、屏幕阅读器能否顺畅导航、开发者能否快速理解逻辑——三者统一，才叫真正“可读”的页面。
用对语义标签搭建清晰骨架
header、nav、main、article、section、aside、footer 不是装饰品，而是内容角色的声明。比如：
- main 必须且只能出现一次，包裹页面唯一核心内容，排除导航、侧边栏、页脚等干扰；
- article 适用于可独立存在、可被聚合或转发的内容单元（如一篇博客、一条新闻），而 section 是按主题组织的普通内容分组，不强调独立性；
- nav 仅用于主要导航链接集合，面包屑、页内锚点跳转、版权链接等不属于它；
- 避免把整个页面塞进一个
<div class="wrapper">，再靠CSS强行模拟语义——机器无法识别这种“伪结构”。
标题层级必须严格遵循逻辑顺序
h1–h6 不是样式工具，而是内容叙事的提纲。一个页面只有一个 h1，代表整体主题；h2 是一级子主题，h3 是 h2 下的展开，依此类推。跳跃或倒置会破坏机器理解：
- 不能 h1 后直接跟 h3，中间缺失 h2 意味着信息断层；
- 不要为字号大就用 h2，哪怕视觉上需要小字号，也应通过 CSS 调整，保留语义正确性；
- article 内部可有自己的 h1（表示该文独立主题），但整个页面仍需一个全局 h1 作为总览。
辅助标签强化内容意图表达
除了骨架和标题，细节标签让机器更懂“这是什么”：
立即学习“前端免费学习笔记（深入）”；
- 用 time 标记发布时间：
<time datetime="2026-06-14">今天</time>，便于搜索引擎提取时效性； - 用 address 包裹联系信息，区别于普通段落；
- 列表必须用 ul 或 ol，而非 div + 自定义符号——这对辅助技术识别项目关系至关重要；
- 强调语气用 em（语义强调）或 strong（重要性强调），比单纯加粗更准确。
配合结构化数据补全语义细节
语义标签解决“这是哪块内容”，结构化数据（如 JSON-LD）回答“这块内容具体是什么”。两者缺一不可：
- 在 main 或 article 区域内嵌入
BlogPosting或NewsArticle类型的 Schema； - 标注 headline、datePublished、author、image 等字段，支持搜索结果中显示富摘要；
- 用 breadcrumb 配合
BreadcrumbListSchema，明确页面在网站中的路径位置。
