html5语义化本质是将网页从“视觉容器”转变为“内容文档”，用等标签直接表达逻辑角色，而非依赖class猜测结构，使代码自我表达、提升seo与可访问性。

从 div 时代过渡到 HTML5 语义化时代，本质不是换几个标签，而是把“怎么画出来”转向“它本来是什么”。过去靠 class 名猜结构，现在用标签名直接说清意图——代码开始像文档一样自我表达。

结构优先：先想内容角色，再想视觉位置

div 布局常从视觉出发：“顶部放 logo，左边是菜单，中间写正文”。而语义化布局要求反向思考：这段内容在逻辑上属于什么角色？是页面的

，还是某篇文章的

？是导航集合

，还是独立章节

？

• 一个新闻列表页，每条新闻应包裹在
  中，而非

  侧边栏若含作者介绍、相关链接等辅助信息，更适合用

  ，而非

  只包裹真正核心内容，不混入广告、推荐位或页脚链接

  标签即契约：每个语义标签自带隐含规则

  语义标签不是样式容器，而是结构承诺。浏览器、爬虫、屏幕阅读器会按约定解读它们，所以误用会破坏逻辑。

  

  HTML Extract

  使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

  下载

  • 可出现在页面任意层级，但内部不宜塞主文段落；它负责引导，不承载主体
  • 应只包含导航链接，避免夹杂搜索框或登录按钮（这些可用

    或单独处理）
  • 需有标题（h1–h6），否则它只是个无意义分组；没有标题的区块，优先考虑用

    div 回归本位：只做纯样式与行为容器

    语义化不等于消灭 div。当一段内容确实没有明确语义角色（比如动画挂载点、JS 动态插入区、纯粹的网格容器），或者需要绕过语义约束做特殊布局时，div 仍是合理选择。

    • Flex/Grid 布局的外层容器常用
      ，因为它的职责是“排列子元素”，而非“定义内容类型”
    • 第三方组件嵌入点（如地图、评论插件）用
      更稳妥，避免语义干扰
    • class="grid-item" 或 id="modal-root" 这类纯功能标识，仍由 div 承担

    兼容与渐进：旧项目也能逐步升级

    语义化不是重构门槛，而是可拆解的实践路径。老项目不必一夜重写，可以从关键区块入手。

    • 先替换页面级结构：
      →

      ，

      →

      再梳理内容流：把长文章中的

      区块套上

      ，把独立评论块换成

      最后清理冗余：去掉无实际作用的 wrapper div，用 CSS Grid / Flex 直接控制子元素