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