语义化标签是页面模块化开发的前提，article用于可独立分发的内容，section用于有主题且带标题的非独立区块，nav仅包裹主导航链接，aside仅包含相关但可移除的内容，类名前缀须与语义容器一致，样式应基于类名而非标签。
页面模块化开发必须以语义化标签为结构前提，否则所谓“模块”只是视觉切片，不是逻辑单元。 用 div 套 div 再加一堆 BEM 类名，不如一个语义正确的 article 或 section 配合清晰的类前缀——前者维护成本随嵌套指数增长，后者改布局不碰 HTML。
怎么选 section 还是 article？看内容能否独立存在
选错最直接的表现是：复制整块 HTML 到 RSS 阅读器或分享卡片里，标题没了、时间丢了、链接失效了。
-
article必须自带完整语义上下文：至少含一个<h2></h2>或更高级别标题、可识别的作者/时间（如<time datetime="2026-08-25"></time>）、独立 URL 或 permalink 属性 -
section不要求独立分发，但必须有主题且带标题；空section是结构污染，删掉它不影响主干理解 - 博客列表页里每条摘要用
article，整个“热门文章”区块用section包裹，并配<h2>热门文章</h2>
nav 和 aside 的边界在哪？别靠位置判断
很多人把右侧栏一律塞进 aside，把顶部菜单全扔进 nav，结果屏幕阅读器报错：“导航区域包含非链接内容”。
-
nav只包裹**主导航链接组**：首页、分类、关于、联系等跳转目标明确的链接；面包屑、分页、筛选项建议加aria-label="breadcrumb"后再用nav，但不是必须 -
aside关键在“相关但可移除”：作者简介、延伸阅读、广告位都算；但登录框、购物车入口这类交互功能不属于aside，应归入form或独立模块 - 页脚里的“友情链接”如果数量少、非核心导航，用
div+aria-label更稳妥，硬套nav反而干扰辅助技术
BEM 类名怎么和语义标签对齐？先定容器，再命名
写 .card__title 却把标题放在 <div class="card"> 里，等于把语义链从根上剪断——<code>div 没语义，card__title 再规范也白搭。
- 类名前缀必须和语义容器一致：
<article class="post"><h2 class="post__title"></h2></article>，而不是<div class="post"> <h2 class="card__title"> </h2> <li> <code>__element只用于该语义块内部子节点：一个post模块里的post__meta不能用于侧边栏摘要的元信息 - 避免双重语义：
<article class="card"></article>是错的，article已是语义块，“card”只是视觉表现，应通过 CSS 实现圆角、阴影等 - 样式规则只响应类名：
.sidebar、.main-content，不响应aside或main标签 - 需要纯语义无布局影响时，用
display: contents让语义标签不参与盒模型（注意兼容性：IE 不支持） - 构建工具中复用模块，用
<template></template>或组件化方案，但模板内部仍要保持语义结构，不能吐出一堆div
样式层为什么不能直接写 section { float: right; }？
这种写法等于把布局逻辑焊死在语义标签上。换响应式方案时，你得改 HTML，而不是只调 CSS —— 这就违背了结构与表现分离的基本原则。
真正难的不是记住每个标签怎么用，而是每次写 <section></section> 之前，停下来问一句：它有没有标题？删掉它，主内容还完整吗？这个判断比查文档花的时间多，但省下的维护成本远不止十倍。
