联系信息标签 - <address>

什么是 <address> 标签？

<address> 是HTML中的语义化标签，用于定义文档或文章作者的联系信息。它通常包含电子邮件地址、电话号码、实际地址、社交媒体链接等联系信息。

基本语法

html 
<address>
  <!-- 联系信息 -->
</address>

典型用法

文档作者信息

html 
<article>
  <header>
    <h2>文章标题</h2>
  </header>
  <p>文章内容...</p>
  
  <footer>
    <p>作者：张三</p>
    <address>
      邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a><br>
      电话：<a href="tel:+861234567890">123-456-7890</a><br>
      地址：北京市朝阳区XX路XX号
    </address>
  </footer>
</article>

网站联系信息

html 
<footer>
  <div class="container">
    <h3>联系我们</h3>
    <address>
      <p>公司名称：XX科技有限公司</p>
      <p>地址：上海市浦东新区XX大道XX号</p>
      <p>电话：<a href="tel:+8602112345678">021-1234-5678</a></p>
      <p>邮箱：<a href="mailto:info@example.com">info@example.com</a></p>
      <p>微信公众号：example_official</p>
    </address>
  </div>
</footer>

文章引用来源

html 
<blockquote>
  <p>这是一段引用的内容...</p>
  <footer>
    <address>
      — <a href="https://example.com">引用来源网站</a>
    </address>
  </footer>
</blockquote>

与其他标签的区别

<address> vs <p>

  • <address> 具有明确的语义，表示联系信息
  • <p> 只是一个普通的段落标签，没有特定语义

<address> vs <div>

  • <address> 是语义化标签，专门用于联系信息
  • <div> 是无语义的容器，主要用于布局和样式

全局属性

<address> 标签支持所有HTML全局属性：

属性 描述
class 为元素指定一个或多个类名
id 为元素指定唯一ID
style 为元素指定内联样式
title 提供有关元素的额外信息

最佳实践

  1. 语义化使用：仅将 <address> 用于表示联系信息，不要用于其他用途

  2. 适当内容：在 <address> 中只包含与联系相关的信息

  3. 使用链接：对于电子邮件、电话等可交互的联系信息，使用 <a> 标签创建链接

  4. 正确嵌套：可以在 <footer>、<article> 等元素内部使用 <address>

浏览器兼容性

所有现代浏览器都支持 <address> 标签，它是HTML规范的核心部分。

总结

<address> 标签是HTML中重要的语义化标签，它提供了明确的联系信息标识，有助于：

  • 提高页面的可访问性，帮助辅助技术用户识别联系信息
  • 改善搜索引擎优化，使搜索引擎更好地理解页面内容
  • 增强代码的可读性和可维护性
  • 提供清晰的内容结构，便于未来的开发和维护
最后更新：2026-02-07