<address>标签仅用于标记文档或文章作者/拥有者的联系信息，不可用于页脚公司地址、客服电话等机构级信息；应改用<footer>配合<dl>、<a href="mailto:...">、<a href="tel:...">等语义化标签。
address 标签不是用来放任意联系信息的
<address> 在 HTML 中有明确语义：它只用于标记文档或文章的作者/拥有者的联系信息，不是“所有联系方式”的通用容器。把它用在页脚里放公司地址、客服电话、邮箱，属于语义误用——浏览器和屏幕阅读器会错误地将其理解为“当前页面作者的个人联络方式”，而非机构官方信息。
常见错误现象：<address>公司地址：北京市朝阳区xxx</address> 看似合理，实则破坏了结构化数据可读性；SEO 工具或无障碍检测会报 semantic markup misuse 警告。
- 正确场景：博客文章末尾署名作者的邮箱、GitHub 主页、个人博客链接
- 错误场景：官网页脚中重复出现的
<address>块，包含 400 电话、微信二维码、营业时间 - 替代方案：用
<footer>+ 语义化子元素（如<div class="contact-info">或<dl>描述列表）更准确
页脚联系信息该用什么 HTML 结构
如果页脚要展示机构级联系信息，优先用 <footer> 包裹，内部按信息类型选择合适标签：
- 地址文字用
<p>或<div>，必要时加aria-label（如aria-label="公司注册地址"） - 邮箱用
<a href="mailto:xxx@example.com">xxx@example.com</a>，确保可点击且被邮件客户端识别 - 电话用
<a href="tel:+861012345678">010-1234-5678</a>，注意国际格式（+86）避免 iOS 拨号失败 - 多个并列信息建议用
<dl><dt>联系电话</dt><dd><a href="tel:...">...</a></dd></dl>，结构清晰、便于 CSS 定制和屏幕阅读器解析
为什么有人坚持用 address？兼容性没问题吗
用 <address> 写页脚确实能渲染出来，也不报错，但问题不在浏览器兼容性，而在语义层断裂：
立即学习“前端免费学习笔记（深入）”；
- 辅助技术（如 VoiceOver、NVDA）会把
<address>内容读作 “author information”，用户可能困惑“这页作者怎么留了公司总机？” - 搜索引擎对
<address>的提取逻辑基于作者归属，不会把它当作企业实体地址索引 - CSS 重置中部分样式库（如 Normalize.css）会给
<address>默认斜体，若没覆盖会导致页脚字体异常 - 团队协作时，新人看到
<address>容易误以为“这是规范写法”，进一步扩散误用
实际检查与修正建议
打开浏览器开发者工具，搜索 <address>，逐个确认是否真属于“作者联系信息”。如果不是，直接替换：
<!-- 错误 --> <address> <p>客服电话：400-123-4567</p> <p>Email：support@company.com</p> </address> <p><!-- 正确 --> <footer> <dl> <dt>客服电话</dt> <dd><a href="tel:+864001234567">400-123-4567</a></dd> <dt>电子邮箱</dt> <dd><a href="mailto:support@company.com">support@company.com</a></dd> </dl> </footer>
真正容易被忽略的是：语义错误不会导致页面崩溃，但会让信息在语音交互、自动化摘要、结构化数据抽取中失效——修复成本低，长期收益高。
