address标签专指页面或文章作者/责任人的联系信息，非物理地址；语义绑定最近article或body，仅允许短语内容，现代浏览器已移除默认斜体与间距。
address 元素不是用来放任意地址的
<address> 在 HTML 中有明确语义：它只用于标记「联系信息」，且必须是当前文档或页面作者/所有者的联系信息。把公司总部地址、门店地址、客服地址直接塞进 <address>，属于语义误用——屏幕阅读器会把它读作“作者联系方式”，搜索引擎也可能降权或忽略。
常见错误现象：
• 页面底部用 <address> 包裹「北京市朝阳区XX路XX号」
• 多个门店地址循环渲染到多个 <address> 里
• 和 <footer> 混用，以为“在页脚里就天然适合”
- 正确场景：仅当该地址代表本页内容的责任主体（如博客作者工作室、开源项目维护者所在地）时才用
<address> - 公司官网首页的「关于我们 → 地址」模块，应该用
<div>或<section>+ 适当的 ARIA 标签（如aria-label="公司总部地址"） - 如果真要用语义化标签，
<dl>（配合<dt>/<dd>）比<address>更合适，例如：<dl><br> <dt>地址</dt><br> <dd>上海市浦东新区世纪大道1号</dd><br></dl>
结构化地址该用什么属性？
纯文本地址对无障碍和结构化数据都不友好。想让地图应用、邮件客户端或搜索引擎识别地址，得靠显式语义。
关键点：
• itemprop（Schema.org）是目前最通用的方案
• aria-label 是无障碍兜底手段，但不能替代结构化数据
• 不要依赖 CSS 类名（如 .street）来暗示含义，辅助技术看不到
立即学习“前端免费学习笔记（深入）”；
- 推荐写法（支持 Google 富媒体搜索）：
<div itemscope itemtype="https://schema.org/Organization"><br> <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"><br> <span itemprop="streetAddress">深圳市南山区科技园科发路8号</span><br> <span itemprop="addressLocality">深圳市</span><br> <span itemprop="addressRegion">广东省</span><br> <span itemprop="postalCode">518057</span><br> </div><br></div>
-
streetAddress必须是街道级精确地址；addressLocality是城市，不是“华南地区”这类模糊词 - 如果只有一处地址，
itemscope可以直接放在外层容器上，避免嵌套过深
多地址场景下怎么避免语义污染
门店列表、服务网点页常犯的错：给每个地址都套一个 <address>，结果页面被解析成“几十个作者”。这既违反 HTML 规范，也干扰结构化数据提取。
真实使用场景：
• 连锁店官网的「查找附近门店」
• SaaS 后台中客户填写的多个收货地址
• 政府网站公示的下属单位地址清单
- 统一用
<article>或<section>包裹单个地址块，加role="region"和aria-labelledby提升可访问性 - 每条地址内部用
<dl>+itemprop组合，不要拆成一堆<p> - 禁止在
<address>内部再嵌套<address>—— HTML5 明确不允许嵌套 - 如果地址带地图链接，
<a href="https://maps.apple.com/?q=...">比图片更可靠，且应加rel="noopener"
兼容性和渲染差异要注意什么
浏览器对 <address> 的默认样式极简（通常只是斜体），但部分旧版 IE 或邮件客户端会强制加 margin 或 font-style，导致布局偏移。这不是 bug，而是规范允许的呈现自由。
- CSS 重置建议：
address {<br> font-style: normal;<br> margin: 0;<br>}不要只靠font-style: normal，因为某些 UA 样式表可能还设了 padding - 在 email 模板中完全避免
<address>—— 多数邮件客户端不识别其语义，且默认样式不可控 - 若需响应式地址排版（比如手机端地址字段竖排），用
<dl>比<address>更易通过 CSS 控制<dt>/<dd>的流向
真正容易被忽略的点：地址里的中文括号（如「（总机）」）、全角空格、换行符，在 Schema 解析时可能导致 streetAddress 截断或校验失败。入库前最好用正则清理：str.replace(/[\u3000\s\uFF08\uFF09]+/g, ' ').trim()。
