address标签必须直接嵌套在body或article内,仅允许phrasing content,禁用块级元素,现代浏览器已移除默认样式,其核心价值在于准确标识内容责任人而非物理地址。

address 标签不是“放地址的容器”,写错就等于在语义上撒谎——浏览器可能忽略,屏幕阅读器会误读,SEO 也可能打折。
address 必须是 body 或 article 的直接子元素
它不认父级是 section、div、footer 或 main。只要嵌套层级不对,语义就失效,辅助技术大概率跳过解析。
- ✅ 正确:
<address>webmaster@example.com</address> - ✅ 正确:
<article><h2>…</h2> <p>…</p> <address>作者:李四<br><a href="mailto:li@example.com">li@example.com</a> </address></article> - ❌ 错误:
<footer><address>…</address></footer>(footer不是合法父容器) - ❌ 错误:
<div class="contact"><address>…</address></div>(语义断层,等同于普通文本)
address 里只能写短语内容(phrasing content)
HTML5 明确禁止块级嵌套。用 p、div、h3 包裹联系信息,会导致验证失败,部分旧浏览器自动修复后结构不可控。
实现 Markdown↔ HTML 互转,支持导出 PDF,用于用户请求的文档格式转换。
立即学习“前端免费学习笔记(深入)”;
- ✅ 允许:
a(必须带mailto:或tel:)、strong、em、br、纯文本 - ❌ 禁止:
p、ul、h2、nav、address自嵌套 - ⚠️ 物理地址可以出现,但前提是它是责任人办公地(如“维护团队:北京市朝阳区XX路1号”),而非门店或发货地
- 示例正确写法:
作者:<strong>张三</strong><br><a href="mailto:zhang@example.com">zhang@example.com</a><br>GitHub: <a href="https://github.com/zhang">@zhang</a>
现代浏览器已移除默认斜体和换行,别靠样式判断是否生效
Chrome 120+、Firefox 125+ 等已清空 address 的默认样式:font-style: italic 和前后 margin 都没了。它现在视觉上和 div 几乎一样——但这不改变它的语义价值。
- 重置样式没问题:
address { font-style: normal; margin: 0; },但必须手动加视觉区分(比如边框、背景色、缩进) - 别用
display: block强行“恢复结构”——它本来就是块级元素,改了反而可能破坏小屏流式布局 - 如果去掉斜体后用户根本看不出这是联系信息,说明你把样式当成了语义替代品
真正难的不是怎么写标签,而是每次动笔前都得问一句:这个信息,能不能准确回答“谁写了这篇?谁负责维护?出了问题找谁?”——答不上来,就别用 address。


















