仅用于标注页面或文章作者/拥有者的联系信息，应置于或末尾，内容限文本、、、、，禁用等块级元素，浏览器默认斜体，公司地址等非归属信息须改用等替代方案。
<address></address> 只用于标注“当前页面或文章的作者/拥有者”联系信息
它不是用来放任意地址、客服电话或公司总部位置的。浏览器和屏幕阅读器会把 <address></address> 当作语义化元数据处理，只适用于归属声明——比如这篇博客谁写的、这个文档归哪个团队维护。
常见误用现象：
• 把「北京市朝阳区某某大厦10层」直接包进 <address></address>
• 在页脚塞入「400-123-4567｜service@example.com」却不说明这是谁的联系方式
• 多个 <address></address> 块混用，但没对应到具体文章/区块的作者
- 每个
<article></article>或最多一个<address></address>，且应放在末尾附近 - 内容建议包含：作者名（
<a href="mailto:..."></a>或<a href="https://..."></a>）、邮箱、个人博客、GitHub 主页等可指向“责任人”的链接 - 纯文本地址、电话、微信二维码等非归属型信息，改用
<p></p>或<div role="region" aria-label="联系方式"> <h3>嵌套规则：能用哪些标签？不能用哪些？</h3> <p><code><address></address>允许直接子元素只有文本、<a></a>、<em></em>、<strong></strong>、<br>—— 注意：<div>、<code><p></p>、<ul></ul>都不合法，HTML5 规范明确禁止块级容器嵌套。错误示例会导致验证失败，部分辅助技术可能跳过解析：
立即学习“前端免费学习笔记（深入）”；
<address> <p>作者：张三</p> <p><a href="mailto:zhang@example.com">zhang@example.com</a></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/1404" title="IBM Watson"><img src="https://img.php.cn/upload/ai_manual/001/431/639/68b6d12632818974.png" alt="IBM Watson" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/1404" title="IBM Watson">IBM Watson</a> <p>IBM Watson文字转语音</p> </div> <a href="/ai/1404" title="IBM Watson" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </address>正确写法（扁平化、无
<p></p>）：<address> 作者：<strong>张三</strong> <br> <a href="mailto:zhang@example.com">zhang@example.com</a> <br> <a href="https://zhang.example.com">个人博客</a> </address>
CSS 样式与默认行为要注意什么？
多数浏览器会给
<address></address>加上斜体（font-style: italic），这不是 bug，而是规范建议样式。如果你取消斜体，语义不会丢失，但需确认视觉上仍能区分其元信息属性。- 避免用
display: block或margin破坏原有行内流布局，尤其在小屏下易撑开空白 - 不要用
text-align: center一概居中——作者信息通常左对齐更自然 - 若页面有深色模式，记得同步设置
<address> a:link</address>的颜色对比度，否则邮箱链接可能不可读
替代方案：当真要放公司地址/客服电话时该用什么？
用普通语义容器 + ARIA 补充说明更稳妥。例如页脚的实体地址：
<div role="complementary" aria-label="公司办公地址"> <p>北京市朝阳区建国路88号SOHO现代城A座10层</p> <p>电话：<a href="https://www.php.cn/link/c36c440058793ea4dc91347ea01c6727">010-8765-4321</a></p> </div>
关键点：
• 不强行套<address></address>
• 用role="complementary"表明这是辅助性区域
•aria-label明确用途，让屏幕阅读器用户一听就懂
•tel:和mailto:协议保留可点击性真正容易被忽略的是：很多人以为加了结构标签就等于做好了无障碍，其实
<address></address>的语义非常窄，用错反而干扰理解。标联系信息前，先问一句——这个信息到底是在回答「谁负责这个页面？」，还是仅仅「我们公司在哪？」 - 避免用
