ADDRESS标签标注联系信息的HTML文档结构应用-html教程-PHP中文网

必须是或的直接子元素，仅用于标识页面维护者或文章作者；内容限于内联可交互联系项，禁止块级元素，第三方地址不可使用。

address标签标注联系信息的html文档结构应用

address 必须是 body 或 article 的直接子元素

它不是装饰性容器，语义绑定只在两个位置生效：作为直接子元素时，代表整页维护者；作为 <article></article> 直接子元素时，仅代表该文作者。写在 <section></section>、<div>、<code><header></header> 里，浏览器和读屏工具就当没看见。

常见错误：<div class="contact"><address>...</address></div> —— 这种嵌套直接废掉语义，HTML 验证器会报错，SEO 无法提取权属关系。

合法位置示例：<address>...</address> 或 <article><address>...</address></article>
同一页面可有多个 <address></address>，但必须各自归属清晰：页脚一个（网站维护者），每篇博客末尾一个（文章作者）
转载内容时，别把原文作者的 <address></address> 搬到自己页面顶层——这等于告诉辅助技术“本页作者是别人”

address 里只能放内联可交互联系项

HTML5 明确限定其内容模型为 phrasing content，即只能包含内联级、可联络、归属明确的信息。不允许 <p></p>、<div>、<code><h3></h3>、<ul></ul> 等块级元素，否则解析器可能静默修复或跳过整段。

正确写法靠 <br> 换行，而不是用块级标签强行分段。例如：

<address>
张三 <a href="mailto:zhang@example.com">zhang@example.com</a><br><a href="tel:+861012345678">+86 10 1234 5678</a><br>
北京市朝阳区XX路1号（办公地）
</address>

✅ 允许：<a></a>（带 mailto: 或 tel:）、<strong></strong>、<em></em>、纯文本地址（仅限责任人实际办公地）
❌ 禁止：<p>客服电话：010-xxx</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<h3>联系我们</h3>、单写“上海市浦东新区XX大厦”（无可联络性、无归属说明）
⚠️ 物理地址若保留，必须搭配可点击联系方式，且注明用途（如“来信请寄：…”或“办公地：…”）

第三方地址一律不用 address 标签

客户地址、门店位置、发货地、快递收货地址、地图嵌入代码……这些都不是“谁写了这个页面”的答案，塞进 <address></address> 不仅语义错位，还会干扰屏幕阅读器判断，削弱结构化数据识别效果。

替代方案要按场景选：

标记门店或服务网点 → 用 <section></section> + itemprop="address" 微数据，或 JSON-LD 的 ContactPoint / LocalBusiness
展示多个客户地址列表 → 每个用 <section></section> 包裹，配合 aria-label 和 role="region"
需要 SEO 富摘要 → JSON-LD 是首选，Google 明确支持 @type: LocalBusiness 中的 address 字段

最容易被忽略的一点：即使 HTML 渲染正常、页面看起来“没问题”，只要地址不属于当前页面或文章的责任人，<address></address> 就没起作用——对机器无效，对人反而造成误导。

现代浏览器已移除 address 默认样式

Chrome 120+、Firefox 125+ 等主流浏览器已彻底取消 <address></address> 的 font-style: italic 和外边距。它现在视觉上和 <div> 几乎一样，不能靠斜体暗示“这是联系信息”。 <p>但别用 CSS 强行加 <code>display: block 或撑开 margin —— 它本来就是块级元素，改 display 可能在小屏破坏流式布局。

推荐做法：用视觉区分代替默认样式，比如 address { border-left: 2px solid #007bff; padding-left: 1rem; }
千万别只写 <address>张三</address> —— 没邮箱、没电话、没链接，语义就断了，读屏软件会误报“此处有联系信息”却找不到入口
所有 <a></a> 必须真实可点击：mailto: 能唤起邮件客户端，tel: 能触发拨号，图标链接必须配文字说明（纯 Twitter 图标不可访问）