main必须全页唯一，仅包裹不可省略的主体内容；section是带标题的主题逻辑块；article是可独立分发的内容单元，三者表达逻辑归属而非视觉容器。
用 main、section、article 划分核心内容区块
这三个标签直接表达「内容归属关系」，不是视觉盒子，而是逻辑容器。main 必须全页唯一，只包真正不可省略的主体内容（比如一篇博文正文、商品列表页的卡片流），不能塞导航或侧边栏；section 是带主题的逻辑块，每个都该有 h2–h6 标题，例如“技术特性”“用户评价”“FAQ”；article 更严格——内容得能独立存在、被 RSS 抓取或单独分享，像博客文章、新闻条目、评论卡片。
-
main里可以嵌套多个section或article，但别把整个首页套进一个section - 同一页面中多个
article之间不能嵌套，也不能用article包导航或页脚 - 如果某块内容没标题、也没独立分发价值，就别硬套
section或article，div更诚实
用 header、nav、aside、footer 标注功能边界
它们不负责“装内容”，而是声明“这堆东西是干什么的”。header 可多次出现：整页顶部放 Logo 和主导航，每个 article 里也能有自己的 header（含标题和发布时间）；nav 只用于主要导航链接集合，页内锚点菜单或面包屑不算；aside 不是“右边那个栏”，而是语义上可分离的附属信息，比如术语解释、延伸阅读、作者简介；footer 同样可多处使用，整页底部放版权，单个 article 结尾放作者信息也合理。
-
nav内部推荐用ul+li+a，辅助技术靠这个结构识别导航层级 -
aside如果放在main外部（如右侧通栏），它和main是平级关系，不是子容器 - 避免给
nav加 class="top-nav" 这类冗余命名——标签本身已说明用途
什么时候还非得用 div？
div 没过时，它是兜底选项，不是错误选择。当你需要一个纯样式或 JS 操作用的挂载点，且没有更贴切的语义标签可用时，就用 div。比如：为一组按钮加统一动画 class；Flex/Grid 布局中需要额外包裹层来控制对齐；或者 JS 动态插入内容的容器（id="dynamic-content"）。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 别写
<div class="header">——直接用header标签 - 别写
<div id="content">——主内容区请用main - 用
div时，class 名应描述用途（loading-spinner）而非位置（right-column）
容易被忽略的兼容性与可访问性细节
语义标签的价值不在视觉，而在 DOM 结构和 ARIA 隐式角色。比如 main 自带 role="main"，屏幕阅读器会提供快捷跳转；nav 对应 role="navigation"。但这些隐式角色在旧版 IE 中不生效，若需支持 IE11，得手动补 role 属性。另外，所有语义标签都默认是块级元素，但它们的 display 行为可被 CSS 覆盖——比如把 nav 设成 display: inline-flex 不影响语义，只是改变了渲染方式。
立即学习“前端免费学习笔记（深入）”；
- 别为了“看起来整齐”而把
section套在article外面——article本身已是完整语义单元 - 标题层级必须真实反映内容结构，
section里的h3不能比父级main的h1还高 - 用开发者工具检查元素的 computed role，确认语义是否按预期暴露给了辅助技术
