语义化标签提升HTML结构质量与可访问性。用header/main/footer替代div，配合section/article/aside明确内容逻辑，避免无意义嵌套；Flexbox/Grid应直接作用于语义容器，减少class冗余。

直接用语义化标签搭骨架，比套 div 快得多，也更健壮。

用 header、main、footer 替代一堆 div class

浏览器默认不渲染这些标签的样式，但它们自带语义和隐式 ARIA 角色，对 SEO 和屏幕阅读器友好。手写时不用反复思考 class 名，结构一眼可读。

• header 放页眉、Logo、主导航，一个页面通常只用一次
• main 是页面唯一主内容区，不能嵌套在 article 或 aside 里
• footer 不一定只能在页面底部，它属于其最近的章节级祖先（比如某篇文章末尾的版权说明也可用 footer）
• 别用 div class="header" 模拟语义标签——既没语义，又增加 CSS 选择器复杂度

嵌套层级要克制：避免 div 套 div 套 div

常见错误是把所有布局都压进 div，再靠 CSS 控制位置。结果 HTML 层级深、可读差、调试难。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 优先用 section 表达逻辑区块（如“产品介绍”“用户评价”）
• 用 article 包裹独立成篇的内容（博客条目、新闻稿）
• 用 aside 放附属信息（侧边栏推荐、作者简介），不是所有右边栏都叫 sidebar
• 如果某层 div 只为加 margin/padding，大概率可以删掉，改用 CSS 的 gap 或 padding 直接作用于语义容器

Flexbox 和 Grid 应该配在语义容器上，不是 div 上

把 display: flex 写在 main 或 header 上，比写在 div.container 上更自然，也减少无意义 class。

立即学习“前端免费学习笔记（深入）”；

• main { display: flex; flex-direction: column; } 可直接控制主内容流
• header nav { display: flex; gap: 1rem; } 比给每个 li 加浮动或 inline-block 更可控
• Grid 布局适合定义整体页面网格，比如 body { display: grid; grid-template-areas: "head head" "nav main" "foot foot"; }，然后让 header、nav、main 各自 grid-area
• 别在 div 上硬套 layout class（如 class="d-flex justify-content-between"），那是 Bootstrap 的妥协，不是 HTML 本意

真正卡住人的不是标签怎么写，而是不确定某个内容该归到 section 还是 article，或者 aside 是否算主内容的一部分——这时候回看语义定义，比查 CSS 效果更快。