语义化HTML5改造关键在于重理内容逻辑而非仅替换标签。先明确每块内容本质，再选用对应语义标签：用header/nav/main/aside/footer替换全局div；article/section/figure/time标记内容单元；清理冗余div、修正误用、保障标题层级；最后补全DOCTYPE、lang、charset、title，并用工具验证语义结构。
直接把传统页面改造成语义化HTML5，关键不是换标签，而是重理内容逻辑。先看清每一块内容“是什么”，再选对应标签，而不是“这里该放什么标签”。
第一步：替换全局结构标签
传统页面通常用一堆带ID或class的div包裹大区块，比如
、
、
。这些应直接替换成语义标签：
- <header> 替代页头区域（含logo、站点标题、主导航容器）
- <nav> 只包裹真正起导航作用的链接集合，一个页面可有多个nav（如主导航、面包屑、页脚导航），但需用aria-label区分
- <main> 包裹页面唯一的核心内容区，每个HTML文档只出现一次，不可嵌套在article或aside内
- <aside> 用于与主内容相关但可独立存在的辅助信息，比如侧边栏推荐、作者简介、广告位
- <footer> 替代页脚，注意它属于其最近的sectioning根元素（可以是body，也可以是article），不一定是整个页面最底部
第二步：识别并标记内容单元
传统代码里常看到
、
这类块。它们不是布局容器，而是独立的内容实体，应升级为：
- <article> 用于可单独分发、复用或订阅的内容，如博客文章、新闻稿、用户评论、产品卡片
- <section> 表示主题性分组，必须有明确标题（h1–h6），不能仅靠视觉样式划分；避免无标题的section
- <figure> + <figcaption> 替代图文混排的div组合，尤其当图片/图表有说明文字时
- <time datetime="YYYY-MM-DD"> 替代纯文本日期，让机器能准确识别发布时间、更新时间等
第三步：清理冗余与误用
很多老代码存在“语义污染”，需要针对性修正：
立即学习“前端免费学习笔记（深入）”；
- 删掉无意义的包装div，例如<div class="clearfix">、<div class="wrap">——这些纯为CSS服务，HTML里不需要
- 避免用<div>模拟按钮或链接，交互控件优先用<button>、<a href>，保障键盘焦点和屏幕阅读器支持
- 标题层级必须连续：h1之后应是h2，不要跳成h3；每个article、section内部也应有自己的标题流
- 不要用<article>包整页内容，也不要用<section>替代<div>做样式隔离——语义标签不是div的美化别名
第四步：补充基础语义与验证
完成主体结构调整后，还需夯实底层规范：
- DOCTYPE统一为<!DOCTYPE html>，html根标签加上lang属性，如<html lang="zh-CN">
- meta charset必须为UTF-8，title标签不可缺，且全站保持唯一h1
- 用浏览器开发者工具的“Accessibility”面板检查ARIA树是否合理，或使用axe DevTools快速扫描语义问题
- 对照语义化检查清单逐项确认：nav是否包裹了导航？main是否包裹了核心内容？article是否真的独立可分发？
