address不必是footer的直接子元素，但必须作为body、article、section或footer等节元素的直接子元素；若嵌套在div等非节元素内，语义失效。

address 必须是 footer 的直接子元素吗？

不是必须，但强烈建议。address 的语义作用域由其最近的节元素（sectioning element）决定，而 footer 正是标准节元素之一。如果把它塞进 <div class="contact-box"> 或嵌套在 <code><p></p> 里，即使渲染正常，address 的语义就失效了——屏幕阅读器不会识别为“联系信息”，搜索引擎也无法提取结构化数据。

常见错误写法：

<footer><div><address>contact@example.com</address></div></footer>

这种嵌套让 address 实际脱离了 footer 的语义上下文，等同于裸用，失去价值。

正确做法是让 address 成为 footer 的**直系子元素**：

<footer><address>contact@example.com<br>+86 10 1234 5678</address></footer>

footer 里哪些内容该用 address 包裹？

只包裹真正属于“本页/本 article 所有者”的联系渠道信息，比如运营方邮箱、办公电话、寄信地址。其他内容——版权年份、公司名、导航链接、客服入口——都不该放进 address。

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

典型误用清单：

• 把 © 2024 公司名 塞进 address → 版权是法律声明，不是联系渠道
• 在 address 里写 工作时间：9:00–18:00 → 时间不是可交互的联系方式
• 放门店地址或发货地（如“仓库地址：杭州市余杭区xxx”）→ 这属于业务信息，非作者/维护者归属地
• 加 <p></p>、<ul></ul>、<div> 等块级元素 → <code>address 只允许内联内容：<a></a>、<strong></strong>、<time></time>、<br>

  合理内容示例：

  <address><a href="mailto:admin@company.com">admin@company.com</a><br><a href="tel:+861012345678">+86 10 1234 5678</a><br>北京市朝阳区建国路1号</address>

  

  Wechat Article Html

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

  下载

  为什么不能用 contact_address 或自定义标签替代 address？

  contact_address 不是 HTML 标准标签，浏览器不解析，CSS 无法选中，辅助技术完全忽略，SEO 无任何收益。它只是后端模板变量或 CMS 字段名，不是前端可用语义元素。

  更关键的是：没有替代方案能原生提供 address 的语义能力。如果你不用它，就必须靠 role="complementary" + ARIA 标签手动补全，成本高、易出错、兼容性差。

  注意两个硬约束：

  • address 必须作为 、<article></article>、<section></section> 或 <footer></footer> 的直接子元素
  • 它里面不能出现 <p></p>、<div>、<code><h2></h2> 等块级标签，否则验证失败且语义崩坏

    移动端和无障碍访问下，address 有哪些实操细节？

    移动端点击拨号和发邮件依赖协议链接是否规范。纯文本 010-12345678 不会被识别为可点击电话；contact@example.com 也不触发邮件客户端。

    必须显式使用 tel: 和 mailto: 协议：

    • <a href="tel:+861012345678">+86 10 1234 5678</a>（注意 +86 前缀和无空格格式，提升识别率）
    • <a href="mailto:info@company.com?subject=%E5%92%A8%E8%AF%A2">info@company.com</a>（可加 subject 提升用户效率）

    另外，address 默认斜体，视觉上可能弱化重点。建议用 CSS 重置：

    address { font-style: normal; }

    ，再配合 display: flex 或 grid 控制换行与对齐，避免依赖 <br> 破坏可访问性。

    最易被忽略的一点：哪怕所有代码都合法，只要 address 出现在文章正文中间、且上下文是“某产品客服”，它的语义就彻底错位——机器不会纠错，只会照搬理解为“这篇文章的作者住在客服电话背后”。