address标签专用于声明页面或文章的责任人联系信息,如作者、维护者邮箱或官网链接;仅允许嵌套a、em、br等短语内容,作用域限于最近article或body顶层,不可用于普通地址或跨作用域混用。

address 标签不是用来放“地址”的,而是用来声明“谁负责这个页面或这篇文章”——它只表达归属关系,不表达地理位置或服务入口。
什么时候该用 address?看作用域和责任人
它的语义绑定在最近的 article 或 body 上:
- 在
article内部出现 → 表示该文章的作者/编辑/贡献者联系方式 - 在
body顶层(没被article包裹)→ 表示整个页面的拥有者、维护者或版权归属方 - 嵌套在
section里但外面没有article→ 不触发语义绑定,等同于无效使用
典型场景包括:博客正文末尾的作者邮箱、独立作品页底部的署名链接、公司官网首页 footer 中的 webmaster@company.com。不是所有“带联系字样的内容”都适合它。
address 里能写什么?别碰块级元素
HTML5 明确限制其内容模型为 phrasing content(短语内容),也就是说只能包含内联级元素:
立即学习“前端免费学习笔记(深入)”;
- 允许:
a(带mailto:或tel:)、em、strong、br、纯文本 - 禁止:
p、div、h2、ul、nav—— 这些会导致 HTML 验证失败,部分屏幕阅读器可能跳过解析 - 物理地址可以写,但前提是它是作者/组织的归属地址(如“维护团队办公地:北京市朝阳区XX路1号”),而非门店位置或发货地
错误写法:<address>
<p>作者:李四</p>
<p>邮箱:li@example.com</p>
</address>;正确写法:<address>作者:<strong>李四</strong><br><a href="mailto:li@example.com">li@example.com</a>
</address>
为什么浏览器默认斜体?样式和语义必须分开
旧版浏览器把 address 渲染为斜体,是因为规范建议“视觉上区分元信息”,但这不是语义本身。现代浏览器(如 Chrome 120+、Firefox 125+)已移除默认样式,address 默认无斜体、无 margin、无换行。
- 如果你依赖斜体来提示用户这是联系信息,说明你把样式当成了语义替代品
- 取消斜体没问题:
address { font-style: normal; },但要确保视觉上仍有区分(比如加边框、缩进或颜色) - 不要用
display: block强行撑开结构——它本来就是块级元素,强行改 display 可能在小屏破坏流式布局
最易被忽略的一点:一个页面可以有多个 address,但每个都必须严格对应其语义作用域。跨作用域混用(比如在转载文章里把原文作者信息塞进自己页面顶层的 address),等于向辅助技术撒谎。



















