footer必须紧贴article内容结尾且不被其他节元素隔开，否则语义归属错误；正确位置是article结束标签前，子元素仅含作者、日期等元信息。

article内部的

该放哪儿？位置决定语义归属

footer 在 article 里不是“随便塞在最后就行”，它必须紧贴 article 内容结尾，且不能被其他节元素（如 section、div）隔开。否则浏览器解析时会把它挂到外层容器下，导致屏幕阅读器读作“整页的页脚”或完全忽略其归属。

• 放在 article 开始标签之后、正文内容之前 → 错，这是 header 的位置
• 套在 div class="meta" 里再塞进 article 底部 → 错，语义断裂，footer 的作用域变成那个 div（而 div 不是节根元素）
• 直接写在 article 结束标签前，子元素仅含作者、日期、标签、转载声明等 → 对，这才是标准用法

示例正确结构：

<article>
  <header>
    <h2>标题</h2>
  </header>
  <p>正文内容……</p>
  <footer>
    <p>作者：<span>张三</span></p>
    <p>发布时间：<time datetime="2026-05-18">2026年5月18日</time></p>
    <p>标签：<a href="/tag/html">HTML</a> <a href="/tag/seo">SEO</a></p>
  </footer>
</article>

文章版权信息能直接写在

的

里吗？

可以，但有硬性限制：版权文字本身不构成联系信息，不能用 address 包裹；只有“联系邮箱、电话、地址”这类才必须套 address。

• <footer><p>© 2026 张三. 保留所有权利。</p></footer> → 合法，语义清晰
• <footer><address>© 2026 张三</address></footer> → 错，address 只用于物理/电子联系方式，误用会误导辅助技术
• <footer><p>转载请注明出处：<a href="https://www.php.cn/link/f2d8cce98c79b34deecc466b1ee6f788"https://example.com/post/123">原文链接

>">https://example.com/post/123">原文链接

> → 推荐，符合“文章级结尾信息”定位

注意：别把全站备案号、ICP号塞进这里——那是 body 级 footer 的职责。混用会导致 SEO 结构化数据错乱，Google Search Console 可能将文章页脚识别为站点级版权。

立即学习“前端免费学习笔记（深入）”；

如何加转载链接又不破坏语义？避免常见 DOM 污染

文章底部的“转载请注明原文链接”本质是行为提示，不是元数据。直接写 <a> 即可，但要注意三点：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 不要用 rel="nofollow" 或 target="_blank" 默认加，除非业务强要求；它们对语义无影响，但可能干扰用户预期
• 别把整个 footer 套进 nav：文章页脚不是导航区，<nav aria-label="文章底部操作"> 属于过度设计
• 避免 JS 动态插入版权 HTML：若通过 document.querySelector('article').insertAdjacentHTML('beforeend', ...) 注入，容易导致 SSR/SEO 抓取不到，且与原生语义脱节

推荐静态写法：

<footer>
  <p>本文首发于 <a href="https://example.com">我的博客</a>，转载请联系授权。</p>
  <p>原文链接：<a href="https://example.com/post/123">https://example.com/post/123</a></p>
</footer>

Typecho 主题里怎么安全注入文章页脚版权？

Joe 主题等常见 Typecho 主题中，post.php 模板控制单篇文章渲染。在 </article> 前插入自定义 footer 时，需确认两点：

• 主题是否已用 article 包裹正文：检查源码是否有 <article class="post">，没有则先补上，否则 footer 语义失效
• PHP 输出逻辑是否包裹在合法 HTML 结构内：例如 <?php $this->content(); ?> 必须在 <article> 内，不能裸露在 <main> 下

典型安全插入点（在 post.php 中）：

<?php $this->content(); ?>
<footer class="post-footer">
  <p>© <?php echo date('Y'); ?> <?php $this->author(); ?>。转载请注明来源。</p>
  <p>原文链接：<a href="<?php $this->permalink(); ?>" rel="canonical"><?php $this->permalink(); ?></a></p>
</footer>

关键细节：

• 不要漏掉 </footer> 闭合标签，否则后续所有 HTML 都会被当成其子元素，CSS 选择器 article footer 失效
• rel="canonical" 是加分项，帮搜索引擎识别规范 URL，但非必需
• $this->permalink() 返回的是绝对 URL，无需拼接 base，直接输出即可

嵌套层级一旦出错，比如把这段代码放在 <header> 里或 <main> 外，footer 就脱离了 article 作用域——这是最常被忽略的结构性陷阱。