HTML5语义化标签的核心是按内容功能正确选用并嵌套标签。文章必须用<article>包裹，其内部可含独立<header>（含标题、时间等元信息）和<footer>（含署名、标签等收尾信息），二者均需合规嵌套且不可滥用；同时需补充alt、datetime等细节以提升可访问性与SEO。
HTML5语义化标签不是装饰，而是告诉浏览器和辅助工具“这部分内容是什么”。构建文章头尾，关键不是套用标签，而是按内容功能选对标签、放对位置、嵌套合规。
文章头部用 <header>，但不止放在页面最上面
一个页面可以有多个 <header>：一个属于整页（网站头部），另一个属于某篇文章本身。文章头部应包含标题、作者、发布时间等元信息，且必须嵌套在 <article> 内部或紧邻其前。
- 在
<article>开始后立即写<header>，里面放<h1>或<h2>标题（避免与页面级<h1>冲突） - 可加入
<time datetime="2026-07-28">2026年7月28日</time>表达时间语义 - 不要把正文第一段塞进
<header>—— 它只承载介绍性内容，不承载主体论述
文章尾部用 <footer>，不是所有底部都叫 footer
文章级 <footer> 应出现在 <article> 内部末尾，用于署名、分类、相关链接等与该文直接相关的收尾信息。它和页面底部的全局 <footer> 是两回事，可同时存在。
- 放在
</article>前，例如：<footer><p>作者：张三｜标签：HTML5, 语义化</p></footer> - 避免放入广告、无关导航或全站版权——这些属于页面级
<footer>的职责 - 如果文章无明确尾注需求，可省略文章级
<footer>，不必强行添加
<article> 是文章结构的容器核心
没有 <article>，就谈不上“文章”的语义化头尾。它代表一篇独立、完整、可单独分发的内容单元（如博客、新闻、评论），是 <header> 和 <footer> 的合法父容器。
立即学习“前端免费学习笔记（深入）”；
- 每个独立文章必须包裹在单独的
<article>中 -
<article>内可嵌套自己的<header>、<footer>和多个<section>（如“背景”“分析”“结语”） - 禁止把整页布局（比如侧边栏、主导航）放进
<article>—— 它只管这一篇文章
别漏掉可访问性和SEO细节
语义标签的价值在机器读取时才真正显现。光写对标签不够，还要补上支撑逻辑的细节。
- 文章标题用
<h2>而非<h1>（除非它是页面唯一主内容），保持标题层级清晰 - 为图片加
alt属性，<time>标签带datetime属性，让时间可被解析 - 若页面含多篇文章，确保每篇
<article>都有唯一标识（如id或itemprop），方便结构化数据提取
