使用标签可语义化标记联系信息，区别于普通段落，它明确指示作者或文档所有者的联系方式，提升SEO、可访问性及代码可读性，适用于页脚、文章作者信息等场景，并可结合Schema.org增强结构化数据。
在HTML中，标记地址的核心方式是使用
<address></address>标签。它不仅仅是让文本显示出来，更重要的是赋予这段内容“联系信息”的语义，告诉浏览器、搜索引擎和辅助技术，这里是关于作者或文档所有者的联系方式。
要标记HTML地址，我们主要依赖
<address></address>标签。这个标签专门用于表示其最近的 或
<article></article>元素的联系信息，比如作者的姓名、电子邮箱、物理地址、电话号码或网站链接。它是一种语义化标签，意味着它不仅仅是改变文本样式，更是传达了内容的类型和作用。
比如，一个最基础的地址标记可能看起来像这样：
<address> <p>张三</p> <p>北京市朝阳区大望路1号</p> <p>电话: <a href="tel:+861012345678">010-12345678</a></p> <p>邮箱: <a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p> </address>
你可能会注意到，我在这里面用了
<p></p>标签来分隔不同的信息行，这让内容结构更清晰。当然，直接使用
<br>换行符也是可以的，但从语义上讲，用
<p></p>包裹不同类型的联系信息（如姓名、地址、电话）会更好，因为它将这些信息视为独立的段落。浏览器通常会默认将
<address></address>标签内的文本显示为斜体，但这完全可以通过CSS来改变。关键在于，我们通过这个标签，明确告诉了机器，这块内容是联系方式，而非普通的文本段落。
<address></address>标签与普通段落标签有什么区别？
这个问题问得很好，我个人觉得，很多人在写HTML的时候，可能会觉得用
<p></p>或者
<div> 加上一些CSS，也能把地址显示出来，那为什么还要用 <pre class="brush:php;toolbar:false;"><address></address>呢？这其实涉及到HTML最核心的“语义化”概念。
简单来说，
<address></address>标签和
<p></p>（段落）标签最大的区别在于它们的语义。
<p></p>标签表示一段普通的文本，它没有特殊的含义，可以是文章内容，可以是描述，任何一段文字都可以放进去。而
<address></address>标签则非常具体，它明确地告诉浏览器和搜索引擎：“嘿，这里包含的是联系信息。”这种语义上的差异带来了很多实际的好处。
首先，对于搜索引擎优化（SEO）来说，语义化标签能够帮助搜索引擎更好地理解页面内容。当搜索引擎爬虫看到
<address></address>标签时，它会知道这部分内容是关于联系方式的，这对于本地搜索结果尤其重要。如果你希望你的公司地址、电话号码能在搜索结果中更准确地展示，使用
<address></address>标签会是一个加分项。
其次，辅助技术，比如屏幕阅读器，也能从中受益。当视障用户使用屏幕阅读器浏览网页时，屏幕阅读器会根据标签的语义来调整阅读方式。遇到
<address></address>标签，它可能会以更清晰、更强调的方式读出联系信息，或者提供快速跳转到这些信息的选项，这大大提升了网站的可访问性。
再者，从代码维护和可读性的角度看，使用正确的语义标签让代码更清晰。当我或其他开发者看到
<address></address>标签时，我们立即就能明白这块内容的用途，而不需要去猜测
<div> 或者 <pre class="brush:php;toolbar:false;"><p></p>里到底是什么。这在大型项目中尤其重要，能够减少沟通成本和潜在的错误。
虽然你可以用CSS把一个
<p></p>标签的内容渲染成斜体，甚至让它看起来和
<address></address>一模一样，但它在背后传递给机器的信息是完全不同的。视觉上的相似性并不能取代语义上的准确性。这就像你把一张纸条写上“联系方式”贴在门上，和直接在门牌上刻上“联系方式”的区别一样，后者更具权威性和识别度。
<address></address>标签？
理解了
<address></address>标签的语义价值，我们就能更好地判断它在实际开发中的应用场景。我觉得，这标签并不是随便一个地址都能用，它有其特定的“归属”。
最常见的，也是最推荐的使用场景，就是网站的页脚（footer）。很多网站会在页脚部分放置公司的联系地址、电话、邮箱等信息。这时候，将这些信息包裹在
<address></address>标签内是再合适不过了。它明确表示这些是网站所有者的联系方式。
<footer><address>
<p>某某科技公司</p>
<p>地址: 上海市浦东新区张江高科XX号</p>
<p>电话: <a href="tel:+862112345678">021-12345678</a></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/learn/2553" title="PHP的使用技巧集"><img
src="https://img.php.cn/upload/webcode/000/000/000/5a2a5254595b2953.png" alt="PHP的使用技巧集"></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/learn/2553" title="PHP的使用技巧集" class="overflowclass">PHP的使用技巧集</a>
<p class="overflowclass">PHP 独特的语法混合了 C、Java、Perl 以及 PHP 自创新的语法。它可以比 CGI或者Perl更快速的执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多。下面介绍了十个PHP高级应用技巧。
1, 使用 ip2long() 和 long2ip() 函数来把 IP 地址转化成整型存储到数据库里</p>
</div>
<a rel="nofollow" href="/xiazai/learn/2553" title="PHP的使用技巧集" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>邮箱: <a href="mailto:info@example.com">info@example.com</a></p>
<p><a href="https://www.example.com">www.example.com</a></p>
</address>
<p>© 2023 某某科技公司 版权所有</p>
</footer>
其次，如果你的网站是博客或新闻站点，并且每篇文章（
<article></article>）都有一个特定的作者，你可以在
<article></article>标签内部使用
<address></address>来标记该文章作者的联系信息。这通常包括作者的姓名、邮箱或个人网站链接。
<article><h1>我的编程之路</h1>
<p>这是一篇关于我编程心得的文章...</p>
<!-- 文章内容 -->
<address>
<p>作者: 李四</p>
<p>邮箱: <a href="mailto:lisi@blog.com">lisi@blog.com</a></p>
<p>个人网站: <a href="https://lisi.blog.com">lisi.blog.com</a></p>
</address>
</article>
此外，在“联系我们”页面上，作为主要的联系方式展示区域，
<address></address>标签也大有用武之地。它能确保页面上最重要的联系信息被正确地语义化。
我个人觉得，需要注意的是，
<address></address>标签不应该用来标记任意的地理位置信息。例如，如果你在文章中提到“我去了巴黎的埃菲尔铁塔”，这里的“巴黎的埃菲尔铁塔”就不应该用
<address></address>标签，因为它不是文档或文章作者的联系信息。它只是一个地点描述。对于这类地理位置，通常使用普通的段落标签或者更专业的微数据（Microdata）或JSON-LD来标记，这能更准确地描述地点的属性，而不是将其混淆为联系方式。
<address></address>标签中更好地组织地址信息？
在
<address></address>标签内部，我们不应该仅仅是堆砌文本，而是要思考如何让这些信息更具结构性，更易于机器理解，同时也方便人类阅读。这不仅仅是HTML标签的运用，更涉及到微数据（Microdata）或 Schema.org 这样的高级语义化技术。
首先，对于地址内部的行分隔
，我前面提到了用<p></p>标签包裹不同类型的联系信息是个好习惯。如果仅仅是地址内部的行切换，比如街道、城市、邮编，用
<br>标签也是可以的，但从语义上，如果每一行代表一个逻辑单元（比如姓名、街道地址、城市省份），那么用
<p></p>更好。
但真正能让地址信息“活起来”的，是结合 Schema.org 提供的
PostalAddress类型。Schema.org 是一个由Google、Microsoft、Yahoo和Yandex共同支持的结构化数据标记词汇表，它能帮助搜索引擎更好地理解网页内容。通过在
<address></address>标签内添加微数据属性，我们可以把一个普通地址变成一个“富地址”，这对于本地SEO和在搜索结果中展示富摘要（Rich Snippets）至关重要。
我们来看一个更高级的例子，如何将一个完整的邮政地址与联系方式结合，并用Schema.org进行标记：
<address itemscope itemtype="http://schema.org/PostalAddress"> <p><span itemprop="name">王五</span></p> <p><span itemprop="streetAddress">北京市海淀区中关村大街10号</span></p> <p><span itemprop="addressLocality">北京</span>, <span itemprop="addressRegion">北京</span> <span itemprop="postalCode">100080</span></p> <p><span itemprop="addressCountry">中国</span></p> <p>电话: <a href="tel:+861098765432" itemprop="telephone">010-98765432</a></p> <p>邮箱: <a href="mailto:wangwu@business.com" itemprop="email">wangwu@business.com</a></p> </address>
在这个例子中：
itemscope和
itemtype="http://schema.org/PostalAddress"告诉搜索引擎，这整个
<address></address>块描述的是一个邮政地址。
itemprop="name"标记了联系人的姓名。
itemprop="streetAddress"标记了街道地址。
itemprop="addressLocality"标记了城市。
itemprop="addressRegion"标记了省份或地区。
itemprop="postalCode"标记了邮政编码。
itemprop="addressCountry"标记了国家。
itemprop="telephone"和
itemprop="email"则分别标记了电话号码和电子邮箱。
通过这种方式，我们不仅使用了HTML的语义化标签
<address></address>，还进一步利用Schema.org的微数据，将地址的各个组成部分都明确地标记出来。这使得机器可以非常精确地解析这些信息，从而在搜索结果中提供更丰富、更有用的展示，比如直接在地图上显示位置，或者在联系信息中突出显示电话号码。这是一种兼顾了可读性、可访问性和SEO的优秀实践。在我看来，如果你真的想让你的地址信息发挥最大价值，结合Schema.org是必不可少的一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
