语义化重构应优先使用 header、nav、article、aside、footer 等标签替代无意义 div，main 全局唯一且仅包裹核心内容，section 需配 h2+ 标题，列表结构统一用 ul/ol+li，纯布局 div 可保留。

别再把 div 当万能胶用了。重构不是批量搜索替换，而是先读懂页面在说什么，再给每块内容配对“身份证”——也就是语义化标签。

看 class 名和上下文，判断该不该换

很多 class 名已经暴露了真实意图，直接照着翻译就行：

• class="header"、id="top-nav"、role="banner" → 换成
• class="nav"、aria-label="主导航" → 换成
• class="article"、class="post"、data-type="blog" → 换成
• class="sidebar"、class="related-links" → 换成
• class="footer"、id="copyright" → 换成
• 纯布局用的 div（比如为了 flex 包裹、加 margin、清浮动）→ 留着 div 就行，不强求换

main 和 section 别混用

全局只能有一个，代表当前视图里真正要读的内容。首页有轮播、商品列表、推荐文章？它们不是三个 main，而是用

分开，整体包进一个

里。

常见错误：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

立即学习“前端免费学习笔记（深入）”；

• 每个卡片区域都套一个
  → 浏览器会警告，屏幕阅读器可能跳过内层
• 把广告位、登录框塞进
  → 扭曲语义，影响 SEO 和无障碍体验
• section 里没标题（h2/h3）→ 它就只是个空盒子，建议补上标题或改用 div

列表类结构优先用 ul/ol

导航菜单、产品卡片组、步骤说明、标签云，只要内容是并列项或有序流程，就该用列表：

• 外层
  → 改成

  或

  1. 每个子
     → 改成
  3. 链接保留在 li 内部，不要把 a 当父容器
  4. 纯图标社交栏也建议用
     ，哪怕视觉上没圆点——因为它们是并列可操作项

  样式断了别慌：浏览器默认会给 ul/ol 加 margin 和项目符号，重置常用写法是

  ul, ol { margin: 0; padding: 0; list-style: none; }

  标题层级必须跟语义标签对齐

  光有

  没用，里面得有对应层级的标题：
  • 整个页面只有一个 h1，通常放在
    或

    里
  • 每个
    或

    应该以 h2 开头（h1 已被主区域占用）
  • 嵌套的
    用 h3，依此类推，不能跳级也不能重复用 h1
  • 如果某个 div 原本没标题，硬加上 h2 可能反而误导机器——不如保留 div 或加 aria-label