h-card：一个标准，一张名片

互联网的早期，人们尝试让网页不仅可读，还能被机器理解。h-card 正是一种在网页中嵌入“电子名片”的微格式。它的诞生深受更早的超媒体系统 HyperCard 的启发，继承了 vCard 的开放精神，是一座连接个人信息和数字世界的桥梁。

找到这个年纪比万维网还大的技术，要从不久前我访问的一些国外站点聚合项目说起。

在那些项目的互动社区里，每个网站显示出来都是一张图文并茂的名片。我觉得挺有趣，便按下了申请按钮。可猜想中的信息填写表单并未出现，取而代之的，是一段安静的文字：请验证你的 h-card。

那一刻，我忽然意识到，自己正站在一个我不曾了解的、更古老的互联网角落里。

一种于理想中诞生的格式标准

时间回溯到 2004 年。那时的网页数据大多是机器难以理解的自由文本。一群技术理想主义者发起 “微格式” 运动，他们想做一件朴素而动人的事：用简单的 HTML 标签为网页内容添加上有含义的 标签 ，从而创造一种简洁高效数据标准。

h-card 正是在这个背景下诞生的。它让人们能直接在网页中发布结构化的联系信息，并且直接复用了当时互联网上成熟的电子名片标准 —— vCard（即你手机通讯录里 .vcf 文件使用的格式）。

在网页中“种”下一张名片

使用标准化的 HTML 标签的 class 属性。最外层容器是 vcard（旧版）或 h-card（新版）。姓名为 p-name，网址为 u-url，邮箱为 u-email，地址为 p-street-address、p-locality。

下面的代码片段，就是一张静静躺在网页里的小小名片：

<div class="h-card">
  <img class="u-photo" src="/xxx.jpg" alt="头像" />
  <a class="p-name u-url" href="https://example.com/">麻子</a>
  <a class="u-email" href="mailto:mazi@example.com">mazi@example.com</a>
  <span class="p-org">吹牛科技有限公司</span>
  <div class="p-adr">
    <span class="p-locality">北京</span>
    <span class="p-country-name">中国</span>
  </div>
</div>

机器通过识别代码中 h-card、p-name、u-email 这些安静的 class，就能温柔地读懂你：你叫麻子，你的邮箱是什么，你为哪家公司做着喜欢的事。

为开放网络而生

如果说技术是 h-card 的骨架，那它背后的人文精神就是灵魂，流淌着互联网开拓者们对 “开放、去中心化、用户自主” 那份近乎固执的温柔。

在大型平台将用户数据封闭在各自系统中的今天，h-card 始终轻声说着—— “数据属于用户” 。在自己网站上发布的 h-card 信息，可以被任何遵循标准的第三方工具读取和使用，无需经过“中间人”。它是自由的。

简单的 HTML，几个 class，数据变得有温度、有意义。每个普通站长都能轻轻推开“结构化数据”那扇门，成为开放网络一分子。

在自己的小站上各自发布 h-card，像在辽阔的网络原野上，共同竖起了一块块写着名字的小木牌。一些工具会扫描这些网页中的 h-card，生成地图或联系人列表，这是分布式网络最朴素的模样。

写在最后

这里是本站 h-card 解析后的样子：My h-card

你可以使用查看源码功能，在本站任意对外页面找到它，并随意借鉴，因为这份格式本身，就是一场开放的邀请。

当然，你也可以给它加上 display 属性，让它安静地、轻轻地，抚摸你的心。