`lisi@example.com”）

出现在 顶层（未被

包裹）→ 表示整个页面的责任方（如公司官网首页底部的“维护：前端组｜webmaster@company.com”）

如果页面有多个独立文章区块，每个

应该有自己的 address，而不是全塞进页脚共用一个

address 里能写什么？只允许短语内容

HTML5 明确限制其内容模型为 phrasing content，也就是纯内联结构。任何块级元素都非法。

• ✅ 允许：a、em、strong、br、纯文本（如“作者：王五”）
• ❌ 禁止：p、div、ul、h2、section —— 即使只是用来“美化换行”也不行
• ⚠️ 物理地址（如“北京市海淀区XX路1号”）可以出现，但必须作为联系人信息的一部分，比如“作者：张三｜zhang@example.com｜北京市海淀区XX路1号”，单独一行街道地址不算有效联系归属

常见误用：这些情况别硬套 address

语义错位比样式错更难修复，因为辅助技术和 SEO 工具会直接采信它的含义。

• 页脚里的“客服电话：400-123-4567” → 这是服务入口，不是页面责任人，改用

  或带 aria-label="客服联系方式" 的 div

• “© 2024 XXX公司” 版权声明 → 属于元数据，应使用 或

• 产品页写的“发货地：杭州市西湖区” → 是业务属性，不是作者归属，用普通 p 或 span 即可
• 把 GitHub 图标、Twitter 图标列表塞进 address → 图标本身无语义，应包裹在 a 内，且链接目标必须真实指向责任人主页（href="https://github.com/zhang" 可以，href="#" 不行）

样式与兼容性要注意的细节

浏览器默认给 address 加 font-style: italic 和前后换行，这不是 bug，是规范建议行为。

• 取消斜体可以，但别用 display: block 强行撑高——它本就是行内级语义容器，破坏流式布局会影响小屏阅读体验
• 不要全局 text-align: center，作者信息左对齐更符合阅读习惯，也利于屏幕阅读器线性播报
• 深色模式下检查 a:link 颜色对比度，邮箱链接失效等于直接丢掉联系通道
• 若服务端动态生成，避免填入 admin@example.com 这类 placeholder，空值比假值更诚实

最难的从来不是怎么写这个标签，而是每次写之前多问一句：这段信息，到底是在告诉用户“谁负责这个内容”，还是仅仅“这里有个地址”？前者用 address，后者绕开它。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问