从header、nav、main、footer四标签起步最稳妥；header用于介绍性内容，nav仅包裹主导航链接，main每页唯一且不可嵌套，footer属区块底部而非整页底端。
从 header、nav、main、footer 四个标签起步最稳妥
别一上来就啃 article、section、aside，这四个基础标签覆盖了 90% 的页面骨架需求，且浏览器兼容性好（IE9+ 全支持），语义清晰，新手不容易套错。
常见错误现象：把整个顶部区域写成 <div class="header">，结果搜索引擎抓不到结构信号，屏幕阅读器也跳不过去；或者把导航栏塞进 <code>header 里却不单独用 nav 包裹，导致语义断裂。
-
header只用于页面或区块的「介绍性内容」——比如网站 logo、主标题、搜索框，不是所有顶部都叫 header -
nav必须包裹「主导航链接」，且一个页面通常只用一次；面包屑、页内锚点链接不属于nav范畴 -
main每页只能有一个，且不能嵌套在header、footer、aside或nav里 -
footer是当前「所在区块」的底部信息，不一定是整页最底下；文章末尾的版权申明也可以用footer
什么时候该用 section 而不是 div？看有没有标题
判断标准很简单：section 必须有可感知的标题（h1–h6），否则就是 div。它代表一个「有主题的独立内容组」，不是视觉分块工具。
使用场景举例：产品介绍页里「功能亮点」「客户案例」「技术参数」三个模块，每个都有 <h2>功能亮点</h2>，才适合用 section 包裹；如果只是单纯为了加 margin 或背景色而拆块，就该用 div + CSS。
容易踩的坑：section 嵌套过深（比如 section > section > section），反而让结构更难读；或者用 section 替代 article 放博客正文——article 才是能独立分发、复用的内容单元。
article 和 main 别混着用：一个管内容粒度，一个管页面角色
main 是页面级容器，表示「这个页面的核心内容在哪」；article 是内容级容器，表示「这段内容本身是否自成一体、可被转载或 RSS 抓取」。
典型组合：
- 首页：用
main包住整个主体，里面放多个article（每篇博客摘要） - 单篇博客页：用
main包住全文，再用article包住h1+ 正文 + 评论区（因为整篇是独立内容） - 新闻列表页：每个
article包一个标题+摘要+发布时间，main包住全部article
性能影响：过度使用 article 不会拖慢页面，但会让辅助技术（如屏幕阅读器）误判内容权重；反过来，该用 article 却用 div，会丢失内容可重用性。
别忽略 strong 和 em 这类「微语义」标签
它们不是装饰，而是明确表达语气和重要性。搜索引擎和无障碍设备都会识别：strong 表示强重要性（比周围文字更关键），em 表示强调（语气上的重音）。
对比示例：
<p>请<strong>务必在截止前提交</strong>申请材料。</p> <p>我们<em>确实</em>收到了您的反馈。</p>
错误用法：<b></b> 和 <i></i> 仅保留视觉效果（加粗/斜体），没有语义；除非你真需要「纯样式无含义」，否则优先选 strong 和 em。
容易被忽略的点：这些标签会影响语音合成器的语调停顿，对无障碍访问不是可选项，而是基础要求。
