语义标签不是“美化div”的替代品，而是定义结构契约：section需有主题和标题，main必须唯一且不嵌套于article或section中，否则导致无障碍失效、SEO降权、JS查询失准。
用 <main></main>、<section></section> 划清逻辑边界，不是套标签而是定契约
很多人把语义标签当“美化div”的替代品，结果写了一堆 <section></section> 却没主题，<main></main> 里嵌了三个 <article></article> 还混着广告位——这不是模块化，是语义污染。浏览器、屏幕阅读器、CSS 选择器都依赖这些标签做上下文推断，一旦错用，无障碍失效、SEO降权、JS查询失准都会跟着来。
关键判断标准就一条：<section></section> 必须有可被独立理解的主题（比如“用户评价区”），且内部应至少含一个 <h2></h2>～<h6></h6>；<main></main> 只能出现一次，且不能被 <article></article> 或 <aside></aside> 包裹。
-
<main></main>被嵌在<article></article>里 → 结构错误，开发者工具会标红 -
<section></section>套三层以上（<section></section>><section></section>><section></section>）→ 语义稀释，建议抽成独立组件或改用<nav></nav>/<aside></aside> - 用
<div class="header"> 替代 <code><header></header>→ 失去结构锚点，后续 JS 用document.querySelector('header')就查不到组件复用不能靠手写
<!--#include-->，得绑定构建阶段直接在 HTML 里写
<!--#include file="header.html"-->看似省事，但开发时无法预览、热更新失效、样式作用域失控——改一个页眉，十页全崩。真正可用的路径是：把公共模块（如
navbar.html、footer.html）统一放在src/components/下，用构建工具注入：
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- Vite 用户用
vite-plugin-html，支持data-props传参，例如<include src="./components/navbar.html" data-props='{"theme":"dark"}'/> - Webpack 用户配
html-loader+html-webpack-plugin，避免运行时请求开销 - 所有注入点必须带唯一标识，如
data-role="header-slot"，否则 JS 初始化时容易绑错事件
嵌套陷阱比样式更致命：哪些组合浏览器会直接报错
语义标签之间有隐含逻辑约束，违反会导致 DOM 树异常、辅助技术误读，甚至被 Chrome DevTools 标为 “Accessibility error”。
-
<footer></footer>出现在<header></header>内部 → 语义冲突，即使视觉上它紧贴顶部下方，也必须保持兄弟级关系 -
<nav></nav>里塞<button></button>或搜索框 → 导航语义被破坏，“欢迎回来，张三”这类状态文本该移进<header></header>或独立<section></section> - 多个
<header></header>全塞进一个顶层<div class="wrapper"> → 丢失内容粒度，RSS 抓取和搜索引擎无法识别各文章独立标题层级 <h3> <code>data-module是模块行为的开关，不是装饰性属性光有结构还不够，得让模块具备可操作性。
data-module不是用来“加个标识好看”的，它是 JS 控制模块生命周期的入口。比如轮播图模块：
<section data-module="slider" data-autoplay="true" data-interval="5000">，JS 初始化时直接读取属性，不用再遍历 DOM 找配置对象。- 避免写
data-module="slider-v2"这类带版本号的值——版本应由文件路径或构建产物哈希控制，属性值只表达行为意图 - 不要在
data-属性里塞 JSON 字符串，复杂配置用单独的data-config-id="home-slider-1"关联外部数据源 -
data-module值必须全局唯一且小写连字符，如data-module="product-grid"，方便 CSS 用属性选择器[data-module="product-grid"]隔离样式
- 避免写
- Vite 用户用
