article元素必须包裹全部正文内容，不能只包段落；它需包含主标题、作者、时间、图片及版权等完整结构，确保内容独立自洽，且内部header/footer具有局部语义，不可滥用或遗漏关键元素。
article 元素必须包裹全部正文内容，不能只包段落
语义化文章页的核心是 <article></article>，但它不是“装饰标签”——浏览器、爬虫和读屏软件都依赖它判断内容的独立性与完整性。常见错误是把 <article></article> 仅套在 <p></p> 上，而漏掉标题、作者信息、时间、图片等附属内容。
正确做法是：从主标题到文末版权信息，所有属于该篇文章的结构都应放在同一层 <article></article> 内。例如：
<article><header><h1>标题</h1>
<p class="byline">作者：张三 发布于 <time datetime="2024-05-20">2024年5月20日</time></p>
</header><figure>
@@##@@
<figcaption>图注说明</figcaption></figure><p>正文第一段…</p>
<p>第二段…</p>
<footer><p>© 2024 版权所有</p>
</footer></article>
-
<header></header>和<footer></footer>在<article></article>内有独立语义，不等于页面顶部/底部 -
<time datetime="..."></time>的datetime属性必须用机器可读格式（如YYYY-MM-DD），否则无法被解析为日期 - 避免把广告、相关推荐、侧边栏塞进
<article></article>—— 它们不属于这篇文章本身
img 必须配 alt，且空 alt 只用于纯装饰图
很多“语义化模板”直接写 <img src="cover.jpg" alt="封面描述">，这会破坏可访问性，也违反 W3C 基本要求。屏幕阅读器遇到无 alt 的图片会读出文件名，非常混乱。
实操规则很明确：
- 内容型图片（封面、插图、图表）：用描述性文字填
alt，比如alt="两名开发者在白板前讨论架构设计" - 纯装饰图（分隔线、背景花边）：写
alt=""（空字符串，不是省略） - 图标类图片若已有文本说明（如旁边有“编辑”文字），可用
alt=""；否则仍需描述功能，如alt="删除此条评论" - 避免
alt="图片"、alt="logo"这类无效值 —— 它没提供任何信息
aside 放相关推荐，但别放导航或网站通用组件
<aside></aside> 常被误用为“侧边栏容器”。它的语义是“与当前内容相关但可独立存在的补充信息”，比如文章里的术语解释、作者简介、同类文章推荐。
以下场景不能用 <aside></aside>：
- 全站导航菜单（该用
<nav></nav>） - 页脚版权栏（该用
<footer></footer>，且是级） - 广告位（除非广告内容明确关联本文，比如“本文提到的工具官网”，否则建议用
<section></section>+ ARIA 标识） - 评论区（它是文章的直接交互延伸，更适合放在
<article></article>底部或独立<section></section>）
一个合理用法示例：
<article>
…正文…
<aside><h2>延伸阅读</h2>
<ul>
<li><a href="/post/css-grid">CSS Grid 布局详解</a></li>
<li><a href="/post/responsive-images">响应式图片最佳实践</a></li>
</ul></aside></article>
不要为了语义强行嵌套 header/footer
看到别人模板里有 <header><h1>...</h1></header> 就照搬？小心掉坑。HTML5 规范明确：只有当需要将一组介绍性内容（标题+副标题+作者+时间等）作为逻辑单元时，才用 <header></header>。
常见误用：
- 单个
<h1></h1>单独包一层<header></header>—— 没必要，<h1></h1>自身已含语义 - 在
<article></article>外再套一层<header></header>放网站 logo —— 那是级的全局<header></header>，和文章无关 -
<footer></footer>里塞“回到顶部”按钮 —— 这属于交互控件，不是元数据，建议用<div role="region"> 或普通 <code><div> <p>判断标准很简单：删掉这个 <code><header></header>或<footer></footer>，里面的内容是否依然能自然归属到当前<article></article>？如果答案是否定的，那它就不该存在。语义化不是贴标签比赛，而是让结构真实反映内容关系。最常被忽略的一点：同一页面多个
<article></article>时，每个都必须有自己独立的<header></header>和<footer></footer>—— 共用会导致语义坍塌。
