address必须是article的直接子元素，不能嵌套在div或footer中；其内容仅限短语级可交互信息，需为每篇article独立设置，且须手动添加视觉样式以保障可识别性。
address必须是article的直接子元素，不能嵌套在div或footer里
如果你把address写在<article><div><address>...</address></div></article>里，浏览器和屏幕阅读器就认不出这是作者联系信息——语义链断了。它只看离得最近的合法父容器，而div不是sectioning root，不会触发归属绑定。
正确结构只有两种：
<article><h1>标题</h1><p>正文</p><address>author@example.com</address></article><article><header><h2>标题</h2></header><p>正文</p><address>GitHub: @zhang</address></article>
注意：footer本身不传递语义，哪怕它在article内部，只要address没直接挂到article下，就失效。
address里只能放可交互的短语内容，别塞p或h3
HTML5 明确限制address的内容模型为 phrasing content，也就是内联级、能直接联络的项。常见错误是加个<h3>作者信息</h3>当标题，或者用<p>邮箱：xxx</p>包装——这两者都会让验证失败，部分读屏软件跳过整段。
立即学习“前端免费学习笔记（深入）”；
合法写法包括：
-
webmaster@site.com（带mailto:链接） -
+86 10 1234 5678（带tel:） -
GitHub: @zhang（纯文本+链接组合） -
办公地址：北京市朝阳区XX路1号（前端组收）（物理地址必须带明确责任人和联络意图）
换行只能用<br>，比如：author@example.com<br>tel:+861012345678<br>GitHub: @zhang。
同一页面多个article，每个都要独立配address
博客列表页有5篇文章？那就该有5个article，每个末尾各自跟一个address。别图省事全堆在页面底部的<footer>里——那样只有一个会被识别为“页面级”联系人，其余全降级成普通文本。
这种结构才对：
<article> <h2>第一篇</h2> <p>内容...</p> <address>author1@site.com</address> </article> <article> <h2>第二篇</h2> <p>内容...</p> <address>author2@site.com</address> </article>
如果某篇文章是团队合著，address里写<strong>前端组</strong> web@team.org比单写“XXX公司”更准确——重点是“谁负责这篇”，不是“公司叫什么”。
现代浏览器已移除斜体，但语义还在，你得手动加视觉提示
Chrome 120+ 和 Firefox 125+ 已彻底清空address的默认样式：font-style: italic、margin 全没了。它现在视觉上和div一样，但语义没丢——问题是你不加样式，用户根本看不出这是联系信息。
推荐最小化重置：
address {
font-style: normal;
margin-top: 1em;
padding-left: 1em;
border-left: 2px solid #007bff;
}
别写display: block，它本来就是块级；也别依赖颜色或图标暗示语义，无障碍测试会失败。真正容易被忽略的是：每次加address前，都得确认它回答的是“谁写了这篇”，而不是“客服在哪找”。边界模糊时，宁可不用，也别硬套。
