怎样在网页中展示联系人信息：Address标签定义联系方式区块

<address>标签仅用于标记网页作者或拥有者的联系信息，如页脚的运营方邮箱、地址、电话，不可用于客服电话、社交链接或表单旁的联系提示；错误使用会损害无障碍访问。

Address 标签不是用来标记任意联系人信息的

<address> 的语义非常明确：它只用于表示**作者/拥有者**的联系信息，比如网页底部的网站运营方邮箱、物理地址或联系电话。它不适用于产品页的客服电话、文章作者的社交链接（除非是整页作者）、或表单旁的“联系我们”区块。浏览器不会为它添加特殊样式，但屏幕阅读器会将其识别为“联系信息区域”，错误使用会干扰无障碍访问。

常见误用场景和替代方案

以下情况不该用 <address>：

• 商品详情页里的“客服电话：400-123-4567” → 改用 <p> 或带 role="note" 的容器，配合 <a href="tel:4001234567">
• 侧边栏“关注我们”图标链接 → 用 <div> 或 <nav aria-label="社交媒体"> 更准确
• 表单上方的“有问题？发邮件到 [email protected]” → 用 <p> + <a href="mailto:[email protected]">

真正该用 Address 的典型位置

仅在以下上下文中合理使用 <address>：

• 页面 <footer> 中声明本页内容归属方，例如：

  <footer>  <address>    联系我们：<a href="mailto:[email protected]">[email protected]</a>｜    地址：北京市朝阳区某某路1号  </address></footer>

• 博客文章末尾署名区块（且该作者即整篇内容责任方）：

  <article>  <h2>如何调试 CSS Grid</h2>  <address>作者：<a href="https://www.php.cn/link/24d510a6f87403bf5b83f64726c3fd90">张三</a></address>  <p>本文发布于 2024 年…</p></article>

兼容性和样式注意事项

<address> 在所有现代浏览器中默认显示为斜体（源于历史样式），但这只是 UA stylesheet 的默认行为，并非语义要求。如果你希望保持正体，必须显式重置：

address {  font-style: normal;}

另外注意：<address> 不能嵌套另一个 <address>，也不能直接包含 <h1>–<h6>；若需结构化字段（如“电话”“邮箱”“地址”分项），应使用 <dl> 或 <ul> 配合 ARIA 标签，而不是强行拆解 <address>。

最容易被忽略的一点：语义错误比样式难修复——一旦用错 <address>，后期做无障碍审计或 SEO 优化时，得逐页排查 DOM 结构，而不是改一行 CSS 就能解决。