article 用于可独立传播的内容（如博客正文），section 用于有主题但不可独立的分组，div 适用于无语义的样式容器；语义正确性影响 RSS、阅读模式和无障碍访问。
article 和 section 的核心区别只看一条：能不能单独发到 Twitter 上让人看懂
能 → article；不能但有主题 → section；既不能独立又没主题 → 老实用 div。
这不是风格选择，是语义声明。浏览器不渲染差异，但 RSS 解析器只抓 article，阅读模式优先提取 article，读屏软件靠它构建导航树。
- 把博客正文复制进新 HTML 文件打开，能独立成篇、有标题/作者/时间 → 必须用
article - “安装步骤”“常见错误码”这种脱离当前页面就只剩半句话的模块 → 用
section，且必须带<h2></h2>或更低级标题 - 轮播图外层、JS 挂载点、纯背景色容器 → 别硬套
section，div更诚实，也更可控
section 不带标题等于没写
没有 <h1></h1>–<h6></h6> 的 section 在无障碍树里不会被识别为逻辑单元，Chrome DevTools 的 Accessibility 面板里压根不显示它。
- 标题不必紧贴开头，但必须在同一个
section元素内（比如<section><p>说明文字</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a> <p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <h3>注意事项</h3></section>合法） - 嵌套的
section不能共用父级标题：外层用<h2></h2>，内层就得用<h3></h3>，否则结构树会错乱 - 如果只是想加 margin 或背景色，
div+ class 是更直接的选择；真要语义分组，先补标题，再套section
嵌套时最容易踩的坑：section 里塞一堆 article
article 可以嵌套在 section 里（如「最新文章」列表），但反过来不合理——section 表示主题分组，不是内容容器。
- ✅ 合理：
<section><h2>技术文章</h2> <article>…</article><article>…</article></section>—— 这些文章共享同一主题，且各自独立可分发 - ❌ 错误：
<section><article>摘要A</article><article>摘要B</article></section>但它们没正文、没作者、没独立 URL，实际该用<main></main>或<div> 包裹，每篇仍用 <code>article - ⚠️ 注意：嵌套层级深了，
header和footer容易归属错位——内层article的<header></header>描述的是它自己，不是外层那个 - 必须小写：
<article>✔️，<Article>❌ - 必须有
<!DOCTYPE html>开头，否则 IE9+ 以下、旧版 Safari 可能当未知元素处理 - IE8 及更早需
document.createElement('article')注册，但实际项目中建议直接放弃支持，或用 polyfill 降级
兼容性和拼写底线：IE8 及更早版本不认它们
article 和 section 是 HTML5 原生标签，不是 CSS 类名。拼错、漏 <!DOCTYPE html>，语义直接归零。
真正难判断的，往往不是单个标签用法，而是整页信息架构是否支持这种嵌套——如果你不确定某个区块该用 section 还是 article，先问自己：它摘出来发到 Twitter 或转发给同事，别人能不能看懂？不能，就不是 article。
