语义化标签比div更可靠易维护，section/article/aside等标签明确内容逻辑与角色，需遵循标题要求、避免滥用、控制嵌套深度，并用列表替代多p模拟结构，header/footer/nav定义页面骨架且可复用。
直接用语义化区块标签划分，比手动加 <div> 更可靠、更易维护。
<h3>用 <code><section></section> 和 <article></article> 划分内容逻辑区域
这两个标签不是“装饰用”的，而是告诉浏览器和辅助技术：“这一块内容有独立主题”。比如博客正文用 <article></article>，文内小节用 <section></section>，侧边栏用 <aside></aside>。它们自带隐式 ARIA role，对 SEO 和屏幕阅读器友好。
-
<section></section>必须包含一个标题（<h2></h2>–<h6></h6>），否则语义失效；<article></article>可独立分发（如 RSS 抓取），适合新闻、帖子等可复用内容 - 别把
<section></section>当成“万能容器”——如果只是为了加 margin 或背景色，用带 class 的<div> 更合适 <li>嵌套层级不宜过深：避免 <code><section><section><section></section></section></section>，三级以上建议重构内容结构 - 如果是并列项（如功能点、步骤说明），优先用
<ul></ul>或<ol></ol>，即使视觉上不显示项目符号 - 如果是视觉卡片组（如三栏服务介绍），用
<div class="card-grid"> 包裹一组 <code><article></article>或<section></section>，而非堆砌<p></p> - 浏览器默认给
<p></p>加margin，但连续多个<p></p>会产生外边距合并（margin collapse），导致实际间距不可控 -
<nav></nav>应只包裹导航链接集合，不要塞搜索框或登录按钮（那些属于<header></header>内容） - 同一页面中可有多个
<header></header>：每个<article></article>或<section></section>都可自带<header></header> - 用 CSS 选择器时注意作用域：
article header h2和body > header h1是不同层级，别混用
避免用多个 <p></p> 模拟列表或卡片组
常见错误是把一段产品介绍硬拆成 5 个 <p></p>，只为控制每段间距。这破坏了语义，也增加 CSS 调试成本。
用 <header></header>、<footer></footer>、<nav></nav> 明确页面骨架
这些标签本身不提供样式，但定义了页面级区域边界。比如 <header></header> 不只是放 logo，它应包含本页的主导航或页眉信息；<footer></footer> 是当前 <article></article> 或整个 的结尾信息，不是全站底部版权栏的代名词。
真正难的不是选哪个标签，而是判断“这段内容在整页信息流中扮演什么角色”。写完 HTML 后，试着关掉 CSS 看纯结构——如果还能理清主次和顺序，那划分就是有效的。
