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 结尾放作者信息也合理。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• nav 内部推荐用 ul+li+a，辅助技术靠这个结构识别导航层级
• aside 如果放在 main 外部（如右侧通栏），它和 main 是平级关系，不是子容器
• 避免给 nav 加 class="top-nav" 这类冗余命名——标签本身已说明用途

什么时候还非得用 div？

div 没过时，它是兜底选项，不是错误选择。当你需要一个纯样式或 JS 操作用的挂载点，且没有更贴切的语义标签可用时，就用 div。比如：为一组按钮加统一动画 class；Flex/Grid 布局中需要额外包裹层来控制对齐；或者 JS 动态插入内容的容器（id="dynamic-content"）。

• 别写 <div class="header">——直接用 <code>header 标签
• 别写 <div id="content">——主内容区请用 <code>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，确认语义是否按预期暴露给了辅助技术