语义化 HTML5 DOM 树架构 Semantic HTML5 DOM Architecture
一句话定义
抛弃满屏无意义的 <div> 和 <span> 嵌套，严格使用 <header>, <nav>, <main>, <article>, <section>, <aside>, <figure>, <figcaption>, <footer> 等自带明确结构含义的原生 HTML5 标签来包裹页面内容。
打个比方 Analogy
搬家打包时，在箱子外面用大字写清楚"主卧核心衣物（<main><article>）"、"厨房杂物（<aside>）"、"废旧报纸（<footer>）"。AI 采购员一进屋，直接忽略杂物箱，1 秒钟精准抱走主卧核心箱！
岗位实战怎么做 In Practice
当 AI 搜索爬虫（如 OAI-SearchBot、PerplexityBot）抓取你的网页时，为了节省 Token 算力，它们的第一步动作是 "Boilerplate Removal（剥离网页噪音：砍掉顶部导航栏、侧边栏广告、推荐阅读和页脚版权声明，只提取正文主干）"！如果你把正文写在规范的 <main> 和 <article> 标签里，AI 提取正文准确率是 100%；如果你全站是一万层乱七八糟的 <div>，AI 可能会把你的侧边栏乱码当成正文，或者把真正的正文误删掉！
案例与避坑 Pitfalls
用 Chrome 插件 Web Developer > Outline > Show Document Outline 一键检查你的页面 DOM 骨架是否像一棵枝干分明的树。