address仅用于标记责任归属方联系信息,必须绑定最近的article或body作用域,内容限于phrasing content(如a[href^="mailto:"]、em、纯文本),禁止嵌套块级元素或滥用为通用地址容器。

address 是唯一专用于标记“责任归属方联系信息”的 HTML 语义化标签,但必须严格匹配作用域——它不是通用地址容器,也不是作者署名标签。
什么时候该用 address?看最近的 article 或 body
它的语义绑定在最近的 article 或顶层 body 上:
- 在
article内部出现 → 表示这篇文章的作者/编辑/维护者联系方式(如博客正文末尾的作者:李四 @#@#@#@#@#@#@#@#@#@0) - 在
body顶层(未被article包裹)→ 表示整个页面的拥有者、技术支持或网站管理员(如官网首页页脚的@#@#@#@#@#@#@#@#@#@1) - 嵌套在
section或div里,但外层没有article→ 不触发语义绑定,等同于无效使用
address 里能写什么?哪些内容模型合法
HTML5 明确限定其内容为 phrasing content(短语内容),只允许内联元素:
- ✅ 允许:
a(必须带href="mailto:"或tel:)、em、strong、br、纯文本 - ❌ 禁止:
p、div、h2、ul、nav、甚至另一个address—— 这些会导致验证失败,部分屏幕阅读器可能跳过解析 - ⚠️ 物理地址可以写,但前提是它是责任人归属地(如“维护团队办公地:北京市朝阳区XX路1号”),不是门店地址或发货地
常见误用:为什么 address 不是“放地址的通用容器”
很多人把 address 当成 div class="contact" 用,结果破坏语义:
- 在页脚堆砌公司总部地址、客服电话、微信二维码、版权信息 ——
address只负责“谁在负责这个页面”,版权属于法律声明,应另用small或footer > p - 在
header或导航栏里塞address—— 它不该出现在页面开头,也不表示全局联系方式 - 把转载文章的原文作者信息塞进自己页面顶层的
address—— 这等于向辅助技术撒谎,语义归属错位 - 仅为了文字变斜体而用它 —— 现代浏览器(Chrome 120+、Firefox 125+)已移除默认
font-style: italic,靠样式当语义替代品不可靠
真正难的不是怎么写,而是判断“这个邮箱/电话/链接,是否能回答‘谁写了这篇、谁负责维护、出了问题找谁’——一旦归属模糊,address 就失效了。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











