CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-zebra-design-disabled vector-feature-custom-font-size-clientpref-disabled vector-feature-client-preferences-disabled vector-feature-typography-survey-disabled vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>h-card - IndieWeb</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-zebra-design-disabled vector-feature-custom-font-size-clientpref-disabled vector-feature-client-preferences-disabled vector-feature-typography-survey-disabled vector-toc-available";var cookie=document.cookie.match(/(?:^|; )wikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"a2e41ea7a3ea9cfa07d31003","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"h-card","wgTitle":"h-card","wgCurRevisionId":96016,"wgRevisionId":96016,"wgArticleId":385,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["building-blocks","microformats"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"h-card","wgRelevantArticleId":385,"wgIsProbablyEditable":false,"wgRelevantPageIsProbablyEditable":false,"wgRestrictionEdit":[],"wgRestrictionMove":[]};RLSTATE={"skins.vector.user.styles":"ready","site.styles":"ready","user.styles":"ready","skins.vector.user":"ready","user":"ready","user.options":"loading","codex-search-styles":"ready","skins.vector.styles" :"ready","skins.vector.icons":"ready"};RLPAGEMODULES=["site","mediawiki.page.ready","mediawiki.toc","skins.vector.js"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/wiki/load.php?lang=en&modules=codex-search-styles%7Cskins.vector.icons%2Cstyles&only=styles&skin=vector-2022"> <script async="" src="/wiki/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/wiki/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.41.0"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="description" content="h-card is the microformats2 vocabulary for marking up people, organizations, and venues on web sites, and supersedes hCard. Colloquially many will use the term "h-card" as a synonym for an online equivalent of a business card since it often contains identity information including name, address, photo, and related contact information."> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0"> <link rel="icon" href="/favicon.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="IndieWeb (en)"> <link rel="EditURI" type="application/rsd+xml" href="https://indieweb.org/wiki/api.php?action=rsd"> <link rel="license" href="/IndieWebCamp:Copyrights"> <link rel="alternate" type="application/atom+xml" title="IndieWeb Atom feed" href="/wiki/index.php?title=Special:RecentChanges&feed=atom"> <meta property="og:type" content="article"> <meta property="og:site_name" content="IndieWeb"> <meta property="og:title" content="h-card"> <meta property="og:description" content="h-card is the microformats2 vocabulary for marking up people, organizations, and venues on web sites, and supersedes hCard. Colloquially many will use the term "h-card" as a synonym for an online equivalent of a business card since it often contains identity information including name, address, photo, and related contact information."> <meta property="og:url" content="https://indieweb.org/h-card"> <link rel="webmention" href="https://webmention.io/indiewebcamp/webmention"> <script src="https://cdn.usefathom.com/script.js" site="ZPHFRYAA" defer></script> </head> <body class="skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-h-card rootpage-h-card skin-vector-2022 action-view skin--responsive"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site" role="navigation"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-" class="vector-menu mw-portlet mw-portlet- emptyPortlet" > <div class="vector-menu-heading"> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-Explore_the_IndieWeb" class="vector-menu mw-portlet mw-portlet-Explore_the_IndieWeb" > <div class="vector-menu-heading"> Explore the IndieWeb </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-🗽-Principles" class="mw-list-item"><a href="/principles"><span>🗽 Principles</span></a></li><li id="n-📜-Community-posts" class="mw-list-item"><a href="https://stream.indieweb.org/"><span>📜 Community posts</span></a></li><li id="n-🌐-Visit-a-random-site" class="mw-list-item"><a href="https://xn--sr8hvo.ws/random"><span>🌐 Visit a random site</span></a></li><li id="n-🎉-Get-a-personal-site" class="mw-list-item"><a href="/Getting_Started"><span>🎉 Get a personal site</span></a></li><li id="n-ℹ️-FAQ" class="mw-list-item"><a href="/FAQ"><span>ℹ️ FAQ</span></a></li><li id="n-🎁-2024-Gift-Calendar!" class="mw-list-item"><a href="/IndieWeb_Gift_Calendar"><span>🎁 2024 Gift Calendar!</span></a></li> </ul> </div> </div> <div id="p-Join_the_community!" class="vector-menu mw-portlet mw-portlet-Join_the_community" > <div class="vector-menu-heading"> Join the community! </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-🌈-Code-of-conduct" class="mw-list-item"><a href="/code-of-conduct"><span>🌈 Code of conduct</span></a></li><li id="n-📅-Events:-IndieWebCamps,-Homebrew-Website-Clubs-(HWC),-and-more!" class="mw-list-item"><a href="https://events.indieweb.org/"><span>📅 Events: IndieWebCamps, Homebrew Website Clubs (HWC), and more!</span></a></li><li id="n-👥--Meetups:-2025-04-09" class="mw-list-item"><a href="https://events.indieweb.org/tag/hwc"><span>👥 Meetups: 2025-04-09</span></a></li><li id="n-🎪-IWC-San-Diego-12/7…8" class="mw-list-item"><a href="/next-iwc"><span>🎪 IWC San Diego 12/7…8</span></a></li><li id="n-💬-Join-#indieweb-chat" class="mw-list-item"><a href="/discuss"><span>💬 Join #indieweb chat</span></a></li><li id="n-📜-Chat-log" class="mw-list-item"><a href="https://chat.indieweb.org/"><span>📜 Chat log</span></a></li><li id="n-📩-Subscribe-to-newsletter" class="mw-list-item"><a href="/this-week-in-the-indieweb"><span>📩 Subscribe to newsletter</span></a></li><li id="n-❤️-Sponsor" class="mw-list-item"><a href="/how-to-sponsor"><span>❤️ Sponsor</span></a></li> </ul> </div> </div> <div id="p-Developers" class="vector-menu mw-portlet mw-portlet-Developers" > <div class="vector-menu-heading"> Developers </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-🔩-Building-Blocks" class="mw-list-item"><a href="/Category:building-blocks"><span>🔩 Building Blocks</span></a></li><li id="n-📑-Projects" class="mw-list-item"><a href="/Projects"><span>📑 Projects</span></a></li><li id="n-🧰-Standards" class="mw-list-item"><a href="https://spec.indieweb.org/"><span>🧰 Standards</span></a></li><li id="n-💬-Join-developer-chat" class="mw-list-item"><a href="/discuss#dev"><span>💬 Join developer chat</span></a></li> </ul> </div> </div> <div id="p-Wiki_resources" class="vector-menu mw-portlet mw-portlet-Wiki_resources" > <div class="vector-menu-heading"> Wiki resources </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-👤-Login" class="mw-list-item"><a href="https://sso.indieweb.org/login?url=https%3A%2F%2Findieweb.org%2F"><span>👤 Login</span></a></li><li id="n-✳️-Recent-changes" class="mw-list-item"><a href="/Special:RecentChanges"><span>✳️ Recent changes</span></a></li><li id="n-🖼-Recent-uploads" class="mw-list-item"><a href="/Special:ListFiles"><span>🖼 Recent uploads</span></a></li><li id="n-🎲-Random-page" class="mw-list-item"><a href="/Special:Random"><span>🎲 Random page</span></a></li><li id="n-📑-5,605-articles" class="mw-list-item"><a href="/Special:Statistics"><span>📑 5,605 articles</span></a></li><li id="n-©-Wiki-content-is-CC0" class="mw-list-item"><a href="/IndieWebCamp:Copyrights"><span>© Wiki content is CC0</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/Main_Page" class="mw-logo"> <span class="mw-logo-container"> <img class="mw-logo-wordmark" alt="IndieWeb" src="/img/indiewebcamp-logo-lockup-color@1x.png" style="width: 10.125em; height: 4.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" id="" title="Search IndieWeb [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/wiki/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search IndieWeb" aria-label="Search IndieWeb" autocapitalize="none" title="Search IndieWeb [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links" aria-label="Personal tools" role="navigation" > <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet mw-portlet-vector-user-menu-overflow" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item"><a href="https://sso.indieweb.org/login?url=https%3A%2F%2Findieweb.org%2Fh-card" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span>Log in</span></a></li> </ul> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="https://sso.indieweb.org/login?url=https%3A%2F%2Findieweb.org%2Fh-card" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site" role="navigation"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <input type="checkbox" id="vector-toc-collapsed-checkbox" class="vector-menu-checkbox"> <nav id="mw-panel-toc" role="navigation" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Why" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Why"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span>Why</div> </a> <ul id="toc-Why-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-How" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#How"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span>How</div> </a> <button aria-controls="toc-How-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle How subsection</span> </button> <ul id="toc-How-sublist" class="vector-toc-list"> <li id="toc-How_to_markup" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#How_to_markup"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span>How to markup</div> </a> <ul id="toc-How_to_markup-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Validators" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Validators"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span>Validators</div> </a> <ul id="toc-Validators-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Issues" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Issues"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span>Issues</div> </a> <button aria-controls="toc-Issues-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle Issues subsection</span> </button> <ul id="toc-Issues-sublist" class="vector-toc-list"> <li id="toc-What_should_be_a_u-url_on_the_h-card_and_what_shouldn’t?" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#What_should_be_a_u-url_on_the_h-card_and_what_shouldn’t?"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span>What should be a u-url on the h-card and what shouldn’t?</div> </a> <ul id="toc-What_should_be_a_u-url_on_the_h-card_and_what_shouldn’t?-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-IndieWeb_Examples" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#IndieWeb_Examples"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span>IndieWeb Examples</div> </a> <button aria-controls="toc-IndieWeb_Examples-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle IndieWeb Examples subsection</span> </button> <ul id="toc-IndieWeb_Examples-sublist" class="vector-toc-list"> <li id="toc-Chris_Aldrich" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Chris_Aldrich"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.1</span>Chris Aldrich</div> </a> <ul id="toc-Chris_Aldrich-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Martijn_van_der_Ven" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Martijn_van_der_Ven"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.2</span>Martijn van der Ven</div> </a> <ul id="toc-Martijn_van_der_Ven-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-gRegor_Morrill" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#gRegor_Morrill"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.3</span>gRegor Morrill</div> </a> <ul id="toc-gRegor_Morrill-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Amit_Gawande" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Amit_Gawande"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.4</span>Amit Gawande</div> </a> <ul id="toc-Amit_Gawande-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Jacky_Alcine" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Jacky_Alcine"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.5</span>Jacky Alcine</div> </a> <ul id="toc-Jacky_Alcine-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Piper_McCorkle" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Piper_McCorkle"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.6</span>Piper McCorkle</div> </a> <ul id="toc-Piper_McCorkle-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Jamie_Tanna" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Jamie_Tanna"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.7</span>Jamie Tanna</div> </a> <ul id="toc-Jamie_Tanna-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Simon_Prickett" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Simon_Prickett"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.8</span>Simon Prickett</div> </a> <ul id="toc-Simon_Prickett-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Kev_Quirk" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Kev_Quirk"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.9</span>Kev Quirk</div> </a> <ul id="toc-Kev_Quirk-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Ethan_Yoo" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Ethan_Yoo"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.10</span>Ethan Yoo</div> </a> <ul id="toc-Ethan_Yoo-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Watts_Martin" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Watts_Martin"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.11</span>Watts Martin</div> </a> <ul id="toc-Watts_Martin-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Peter_Smith" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Peter_Smith"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.12</span>Peter Smith</div> </a> <ul id="toc-Peter_Smith-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Jasmine_Amalia" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Jasmine_Amalia"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.13</span>Jasmine Amalia</div> </a> <ul id="toc-Jasmine_Amalia-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Otto_Rask" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Otto_Rask"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.14</span>Otto Rask</div> </a> <ul id="toc-Otto_Rask-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Coding_Otaku" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Coding_Otaku"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.15</span>Coding Otaku</div> </a> <ul id="toc-Coding_Otaku-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-add_yourself!" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#add_yourself!"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.16</span>add yourself!</div> </a> <ul id="toc-add_yourself!-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Tools_Using_h-card" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Tools_Using_h-card"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.17</span>Tools Using h-card</div> </a> <ul id="toc-Tools_Using_h-card-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Articles" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Articles"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span>Articles</div> </a> <ul id="toc-Articles-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Brainstorming" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Brainstorming"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span>Brainstorming</div> </a> <button aria-controls="toc-Brainstorming-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle Brainstorming subsection</span> </button> <ul id="toc-Brainstorming-sublist" class="vector-toc-list"> <li id="toc-partial_vs_complete" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#partial_vs_complete"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.1</span>partial vs complete</div> </a> <ul id="toc-partial_vs_complete-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-pronouns_use-cases" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#pronouns_use-cases"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.2</span>pronouns use-cases</div> </a> <ul id="toc-pronouns_use-cases-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-h-card_generator" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#h-card_generator"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.3</span>h-card generator</div> </a> <ul id="toc-h-card_generator-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-See_Also" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#See_Also"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span>See Also</div> </a> <ul id="toc-See_Also-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> <div class="mw-content-container"> <main id="content" class="mw-body h-entry" role="main"> <header class="mw-body-header vector-page-titlebar"> <label id="vector-toc-collapsed-button" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet vector-button-flush-left cdx-button--icon-only" for="vector-toc-collapsed-checkbox" role="button" aria-controls="vector-toc" tabindex="0" title="Table of Contents"> <span class="vector-icon mw-ui-icon-wikimedia-listBullet"></span> <span>Toggle the table of contents</span> </label> <nav role="navigation" aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">h-card</span></h1> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/h-card" title="View the content page [c]" accesskey="c"><span>Page</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/Talk:h-card" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="p-variants" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="p-variants-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-variants" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="p-variants-label" for="p-variants-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/h-card"><span>Read</span></a></li><li id="ca-viewsource" class="vector-tab-noicon mw-list-item"><a href="/wiki/index.php?title=h-card&action=edit" title="This page is protected.
You can view its source [e]" accesskey="e"><span>View source</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/wiki/index.php?title=h-card&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/h-card"><span>Read</span></a></li><li id="ca-more-viewsource" class="vector-more-collapsible-item mw-list-item"><a href="/wiki/index.php?title=h-card&action=edit"><span>View source</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/wiki/index.php?title=h-card&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/Special:WhatLinksHere/h-card" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/Special:RecentChangesLinked/h-card" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-print" class="mw-list-item"><a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/wiki/index.php?title=h-card&oldid=96016" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/wiki/index.php?title=h-card&action=info" title="More information about this page"><span>Page information</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <nav class="vector-page-tools-landmark vector-sticky-pinned-container" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From IndieWeb</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-parser-output"><figure class="mw-halign-right" typeof="mw:File/Frameless"><a href="/File:h-card.svg" class="mw-file-description" title="h-card icon"><img alt="h-card icon" src="/images/thumb/4/48/h-card.svg/128px-h-card.svg.png" decoding="async" width="128" height="128" class="mw-file-element" srcset="/images/thumb/4/48/h-card.svg/192px-h-card.svg.png 1.5x, /images/thumb/4/48/h-card.svg/256px-h-card.svg.png 2x" /></a><figcaption>h-card icon</figcaption></figure> <p class="plainlinks template_stub" style="text-indent: 2em; font-style: italic;"> <b>This article is a <a href="/stub" title="stub">stub</a>.</b> You can help the IndieWeb wiki by <a class="external text" href="https://indieweb.org/wiki/index.php?title=h-card&action=edit">expanding it</a>. </p> <p><br /> <span class="p-summary"><b><dfn><a class="external text" href="https://microformats.org/wiki/h-card">h-card</a></dfn></b> is the <a href="/microformats2" title="microformats2">microformats2</a> vocabulary for marking up people, organizations, and venues on web sites, and supersedes hCard.</span> Colloquially many will use the term "h-card" as a synonym for an online equivalent of a business card since it often contains identity information including name, address, photo, and related contact information. </p> <div style="clear: both"></div> <meta property="mw:PageProp/toc" /> <h2><span class="mw-headline" id="Why">Why</span></h2> <p>Marking up your <a href="/homepage" title="homepage">homepage</a> profile with a minimal h-card including <b>name</b>, <b>url</b> and <b>photo</b> properties covers most h-card usage on the IndieWeb: </p> <ul><li>Feed <a href="/readers" class="mw-redirect" title="readers">readers</a> display your profile photo next to your posts</li> <li><a href="/reply" title="reply">reply</a> posts to your posts show your author profile in their <a href="/reply_context" class="mw-redirect" title="reply context">reply contexts</a></li> <li>Posts that you reply to show your author profile in their <a href="/comments" title="comments">comments</a> display</li> <li>Apps you sign into with <a href="/IndieAuth" title="IndieAuth">IndieAuth</a> (or which otherwise know your URL) auto-fill and auto-update your name and photo</li> <li><a href="/Gravatar" title="Gravatar">Gravatar</a>-like lookups based on <a href="/Why_web_sign-in#Why_not_email" title="Why web sign-in">domain instead of email address</a></li></ul> <h2><span class="mw-headline" id="How">How</span></h2> <h3><span class="mw-headline" id="How_to_markup">How to markup</span></h3> <p>You can make a minimal <a class="mw-selflink selflink">h-card</a> for your name, photo, and URL with two elements and one classname, for example: </p> <pre><a class="h-card" href="http://waterpigs.co.uk"> <img src="/photo.png" alt="" /> Barnaby Walters </a> </pre> <p>Details for creating an h-card on <a href="/WordPress" title="WordPress">WordPress</a> can be found on <a href="/Getting_Started_on_WordPress#Identity_2" title="Getting Started on WordPress">Getting Started on WordPress</a>. </p><p>You can include an h-card when you mention someone in a post. Start with minimal markup such as: </p> <pre> <a class="h-card" href="https://aaronparecki.com">Aaron Parecki</a> </pre> <p>When your mention has a link to their site, they can receive an <a href="/person-mention" class="mw-redirect" title="person-mention">@-mention</a>. If you want to communicate that the post is about this person or that they are a subject of or in the post, use a <a href="/person-tag" title="person-tag">person-tag</a>. </p> <h2><span class="mw-headline" id="Validators">Validators</span></h2> <p>You can check your homepage h-card for completeness and common mistakes using these validators: </p> <ul><li><a class="external text" href="https://indiewebify.me/validate-h-card/">indiewebify.me h-card</a></li> <li><a class="external text" href="https://pin13.net/mf2/">pin13.net mf2 parser</a> (raw parsed JSON)</li></ul> <h2><span class="mw-headline" id="Issues">Issues</span></h2> <p>From a pure user features perspective, and assuming no <a href="/antipatterns#invisible_metadata" title="antipatterns">invisible metadata</a>, how are the following accomplished (that is, with h-card)? </p> <ul><li>I'd like to show some personal profile information (for example, name) on my posts, but not my picture. I may want to show additional profile information on another page, for example. <b>/about</b>. That may include my picture, or it may not (including <a href="/icon" title="icon">icon</a>).</li></ul> <ul><li>When I <a href="/comment" title="comment">comment</a>, <a href="/like" title="like">like</a>, <a href="/repost" title="repost">repost</a>, or <a href="/rsvp" title="rsvp">rsvp</a> to someone else's post, and they render that response (<a href="/comments-presentation" class="mw-redirect" title="comments-presentation">comments-presentation</a>), I'd like to let them show my additional profile information, including my picture, if they choose. <i><a href="/authorship" title="authorship">authorship</a> handles some of this, but maybe not all, for example, the case where I don't show my picture anywhere on my site.</i></li></ul> <ul><li>Similarly, when I log into a site like this wiki with <a href="/IndieAuth" title="IndieAuth">IndieAuth</a> (etc.), I'd like the site to be able to discover my additional profile information, including my picture, to show on my profile page, activity, or other appropriate places. <i><a class="external text" href="https://microformats.org/wiki/representative-hcard-parsing">representative-hcard-parsing</a> gets close, but not all the way. <a href="#Brainstorming">#Brainstorming</a> below is a straw man extension that could help.</i></li></ul> <p>From an h-card specific viewpoint, here are some additional issues / questions: </p> <ul><li>Some people (e.g. <a href="/User:David.shanske.com" title="User:David.shanske.com">GWG</a>, <a href="/User:Kartikprabhu.com" title="User:Kartikprabhu.com"> Kartik</a>, <a href="/User:Snarfed.org" title="User:Snarfed.org">User:Snarfed.org</a>, <a href="/User:Mowens.com" title="User:Mowens.com">User:Mowens.com</a>, <span class="h-card" style="white-space:nowrap"><img src="https://gregorlove.com/site/assets/files/6268/profile-2021-square.300x0.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Gregorlove.com" title="User:Gregorlove.com">gRegor Morrill</a></span>, <span class="h-card"><img src="https://fireburn.ru/media/f1/5a/fb/9b/081efafb97b4ad59f5025cf2fd0678b8f3e20e4c292489107d52be09.png" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Fireburn.ru" title="User:Fireburn.ru">Vika</a></span>, <a href="/User:Www.lewiscowles.co.uk" title="User:Www.lewiscowles.co.uk">Lewis Cowles</a>, <a href="/User:Jmtd.net_about" title="User:Jmtd.net about">jmtd</a>) would like a way to include both a minimal h-card on a page *and* a link to a "complete" h-card with more information, for example, contact details or photo. <a href="/authorship" title="authorship">authorship</a> and <a class="external text" href="https://microformats.org/wiki/representative-hcard-parsing">representative-hcard-parsing</a> are both related but slightly different, and both currently only use the inline h-card if it's available. The inline h-card could include a link to the expanded h-card.</li></ul> <ul><li>Along the same lines, some people (e.g. <a href="/User:Snarfed.org" title="User:Snarfed.org">User:Snarfed.org</a>, <a href="/User:Mowens.com" title="User:Mowens.com">User:Mowens.com</a>, <span class="h-card" style="white-space:nowrap"><img src="https://gregorlove.com/site/assets/files/6268/profile-2021-square.300x0.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Gregorlove.com" title="User:Gregorlove.com">gRegor Morrill</a></span>) would like to make some parts of their h-card invisible everywhere, but still available to programmatic consumers. Examples include rel-me links to some silos, public encryption key. Related: <a href="/antipatterns#invisible_metadata" title="antipatterns">antipatterns#invisible_metadata</a> <ul><li>On my site currently, my author hCard on each post is invisible because I do not feel the need to display my photo, URL, and name on every post. This would be different if it was a multiple-author site. <span class="h-card" style="white-space:nowrap"><img src="https://gregorlove.com/site/assets/files/6268/profile-2021-square.300x0.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Gregorlove.com" title="User:Gregorlove.com">gRegor Morrill</a></span></li> <li>I too have made the h-card invisible on my home page because I don't want details to show there for design reasons. <a href="/User:Jeremycherfas.net" title="User:Jeremycherfas.net">Jeremy Cherfas</a></li></ul></li></ul> <h3><span id="What_should_be_a_u-url_on_the_h-card_and_what_shouldn.E2.80.99t.3F"></span><span class="mw-headline" id="What_should_be_a_u-url_on_the_h-card_and_what_shouldn’t?">What should be a <code>u-url</code> on the h-card and what shouldn’t?</span></h3> <p><b>A:</b> The home page and any other URLs that represent the person or organization. The h-card specification was updated 2019-05-08 to clarify this. <a class="external autonumber" href="https://microformats.org/wiki/index.php?title=h-card&diff=67001&oldid=66804&rcid=103888">[1]</a> </p><p>Previous discussion: </p> <ol><li><a class="external text" href="https://microformats.org/wiki/h-card">The specification</a> says <code>u-url</code> is for the identity’s “home page”.</li> <li><a class="external text" href="https://microformats.org/wiki/hcard-authoring#Link_it_up">hCard authoring’s Link it up section</a> recommends to add “links to your website, your social network profiles and other sites that represent you specifically to your hCard with the class name <code>url</code>.” (Note that this is linked to indirectly by h-card as h-card-authoring has yet to be written.) And goes on to show <a class="external text" href="https://microformats.org/wiki/hcard-authoring#connect_with_yourself">an example</a> where <a href="/rel-me" title="rel-me">rel-me</a> links are given the class.</li></ol> <p>There are also examples of both readings: </p> <ol><li><span class="h-card" style="white-space:nowrap"><img src="https://aaronparecki.com/images/profile.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Aaronparecki.com" title="User:Aaronparecki.com">Aaron Parecki</a></span> only includes his homepages <code>aaronparecki.com</code> and <code>w7apk.com</code> as url properties on his homepage h-card. External profiles can only be found through <a href="/rel-me" title="rel-me">rel-me</a> parsing.</li> <li><span class="h-card" style="white-space:nowrap"><img src="https://tantek.com/logo.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Tantek.com" title="User:Tantek.com">Tantek Çelik</a></span> includes all his <a href="/rel-me" title="rel-me">rel-me</a> links as url properties on his homepage h-card.</li></ol> <p>What should the general advice be? Are <a href="/silo" title="silo">silo</a> identities still homepages to be marked up with <code>u-url</code>? </p> <ol><li><span class="h-card"><img src="https://jacky.wtf/assets/favicon.2fb16a8e.svg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Jacky.wtf" title="User:Jacky.wtf">Jacky Alciné</a></span> thinks (2022-05-17) that pages that have usable markup to the IndieWeb (like <a href="/microformats" title="microformats">microformats</a>) should be the only ones linked up from one's <a class="mw-selflink selflink">h-card</a>, everything else can be linked via <a href="/rel-me" title="rel-me">rel-me</a></li></ol> <h2><span class="mw-headline" id="IndieWeb_Examples">IndieWeb Examples</span></h2> <p>As a basic <a href="/building-block" class="mw-redirect" title="building-block">building-block</a> of the IndieWeb, an h-card helps to establish one's online <a href="/identity" class="mw-redirect" title="identity">identity</a>. Numerous examples can be found on the <a class="external text" href="https://microformats.org/wiki/h-card#Examples_in_the_wild">Microformats Wiki</a> as well as a few of the ones below: </p> <h3><span class="mw-headline" id="Chris_Aldrich">Chris Aldrich</span></h3> <p><span class="h-card" style="white-space:nowrap"><img src="https://www.boffosocko.com/logo.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Boffosocko.com" title="User:Boffosocko.com">Chris Aldrich</a></span> has an h-card in the <a class="external text" href="https://boffosocko.com">right sidebar of his homepage</a> with both human-readable and machine readable data </p> <h3><span class="mw-headline" id="Martijn_van_der_Ven">Martijn van der Ven</span></h3> <p><span class="h-card" style="white-space:nowrap"><a href="https://vanderven.se/martijn/" class="external u-url" style="padding-right:0;background:none"><img src="https://vanderven.se/martijn/martijn.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /></a> <span class="p-name"><a href="/User:Vanderven.se_martijn" title="User:Vanderven.se martijn">Martijn van der Ven</a></span></span> (<a class="external text" href="https://twitter.com/martijnvdven">self proclaimed</a> master of “the art of the h-card”) has an extensive h-card on <a class="external free" href="http://vanderven.se/martijn/">http://vanderven.se/martijn/</a>, including experimental properties like <a class="external text" href="https://microformats.org/wiki/microformats2-experimental-properties#p-x-dietary-preference">dietary preference</a>, experimental formats like <a class="external text" href="https://microformats.org/wiki/measure-brainstorming">h-measure</a>, a <code>dt-bday</code> specified to the minute, and more! </p> <ul><li>If people take away anything from his card, he would like it to be the <a href="/pronoun" title="pronoun">pronoun</a> mark-up.</li></ul> <h3><span class="mw-headline" id="gRegor_Morrill">gRegor Morrill</span></h3> <p><span class="h-card" style="white-space:nowrap"><img src="https://gregorlove.com/site/assets/files/6268/profile-2021-square.300x0.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Gregorlove.com" title="User:Gregorlove.com">gRegor Morrill</a></span>: I have an h-card in the footer of each <a href="/h-entry" title="h-entry">h-entry</a> on gregorlove.com, but would like to experiment with marking up my existing information on my <a href="/about" title="about">about</a> page and linking to that from each post. </p> <h3><span class="mw-headline" id="Amit_Gawande">Amit Gawande</span></h3> <p><span class="h-card"><img src="http://www.amitgawande.com/img/headshot.png" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Www.amitgawande.com" title="User:Www.amitgawande.com">Amit Gawande</a></span> has an h-card in the <a class="external text" href="https://www.amitgawande.com">footer of his website</a> with information on this name, nick-name, email address and a photo. </p> <h3><span class="mw-headline" id="Jacky_Alcine">Jacky Alcine</span></h3> <p><span class="h-card"><img src="https://jacky.wtf/assets/favicon.2fb16a8e.svg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Jacky.wtf" title="User:Jacky.wtf">Jacky Alciné</a></span> has an h-card on <a class="external text" href="https://jacky.wtf">the footer of his site</a> with location information. </p><p>As of 2022-03-25, my full h-card lives at <a class="external text" href="https://jacky.wtf/about%7Cmy">about page</a> with a 'thin' one on every page. </p> <h3><span class="mw-headline" id="Piper_McCorkle">Piper McCorkle</span></h3> <p><span class="h-card"><img src="https://piperswe.me/images/profile-mini.png" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Piperswe.me" title="User:Piperswe.me">pmc</a></span> has an h-card front and center on her <a class="external text" href="https://piperswe.me">website's homepage</a>. </p> <h3><span class="mw-headline" id="Jamie_Tanna">Jamie Tanna</span></h3> <p><span class="h-card"><img src="https://www.jvt.me/img/profile.png" class="" style="height:1.1em;vertical-align:-.1em" alt="" />  <a href="/User:Www.jvt.me" title="User:Www.jvt.me">Jamie Tanna</a></span> has his personal h-card on the front page of <a class="external free" href="https://www.jvt.me">https://www.jvt.me</a>. </p> <h3><span class="mw-headline" id="Simon_Prickett">Simon Prickett</span></h3> <p>Simonprickett.dev has his h-card on the front page of <a class="external free" href="https://simonprickett.dev">https://simonprickett.dev</a>. </p> <h3><span class="mw-headline" id="Kev_Quirk">Kev Quirk</span></h3> <p><span class="h-card"><img src="https://kevq.uk/wp-content/themes/quirk/images/kq-avatar.svg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Kevq.uk" title="User:Kevq.uk">Kev Quirk</a></span> has his personal h-card on the home page of his site, <a class="external free" href="https://kevq.uk">https://kevq.uk</a>. </p> <h3><span class="mw-headline" id="Ethan_Yoo">Ethan Yoo</span></h3> <p><span class="h-card"><img src="https://www.ethanyoo.com/me.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /><a href="/wiki/index.php?title=User:Ethanyoo.com&action=edit&redlink=1" class="new" title="User:Ethanyoo.com (page does not exist)">Ethan Yoo</a></span> added h-card markup (name, URL, pronouns, note, photo, and email) to <a class="external free" href="https://www.ethanyoo.com">https://www.ethanyoo.com</a> on November 25, 2020. </p> <h3><span class="mw-headline" id="Watts_Martin">Watts Martin</span></h3> <p>Watts has their h-card on the front page of their web site, <a class="external text" href="https://coyotetracks.org/">Coyote Tracks</a>. </p> <h3><span class="mw-headline" id="Peter_Smith">Peter Smith</span></h3> <p>After a lot of debugging and help from folk on this list, <a class="external text" href="https://petersmith.org/">Peter Smith</a> got his h-card markup (name, URL, note, and photo) working on his Hugo website <a class="external autonumber" href="https://petersmith.org">[2]</a> on 10 December 2022 without using Javascript. </p> <h3><span class="mw-headline" id="Jasmine_Amalia">Jasmine Amalia</span></h3> <p><a href="/User:Jasm1nii.xyz" title="User:Jasm1nii.xyz">Jasmine</a> formatted their h-card as a literal card on their <a class="external text" href="https://jasm1nii.xyz/">homepage.</a> Their header picture (u-featured) for their <a class="external text" href="https://mas.to/@jasmine@jasm1nii.xyz">Mastodon account</a> (set up via Bridgy) is hidden in an Easter egg 🌼 </p> <h3><span class="mw-headline" id="Otto_Rask">Otto Rask</span></h3> <p>Otto Rask has a generic h-card available near the footer on each page of <a class="external text" href="https://www.ottorask.com">their website</a>. </p> <h3><span class="mw-headline" id="Coding_Otaku">Coding Otaku</span></h3> <p><a href="/User:Codingotaku.com" title="User:Codingotaku.com">Coding Otaku</a> has a h-card on their <a class="external text" href="https://codingotaku.com">homepage</a>, and a h-card as part of the article footer on all other pages. </p> <h3><span id="add_yourself.21"></span><span class="mw-headline" id="add_yourself!">add yourself!</span></h3> <h3><span class="mw-headline" id="Tools_Using_h-card">Tools Using h-card</span></h3> <ul><li><a href="/Telegraph" title="Telegraph">Telegraph</a> uses your home page h-card to grab your profile icon and name after you log in.<a class="external autonumber" href="https://chat.indieweb.org/2016-01-05/1452020782123000">[3]</a></li> <li><a href="/indiewebring" class="mw-redirect" title="indiewebring">indiewebring</a> parses h-card information for display on its <a class="external text" href="https://xn--sr8hvo.ws/directory">directory</a></li> <li>Most <a href="/comments#IndieWeb_Examples" title="comments">comment implementations</a> consume h-card</li> <li>Most <a href="/reply-context-examples" title="reply-context-examples"> reply-context implementations</a> consume h-card</li> <li>Most <a href="/reader" title="reader">readers</a> consume h-card</li> <li>…</li></ul> <p>The <a href="/microformats" title="microformats">microformats</a> wiki also collects <a class="external text" href="https://microformats.org/wiki/h-card#Examples_in_the_wild">examples examples in the wild</a>. </p> <h2><span class="mw-headline" id="Articles">Articles</span></h2> <ul><li>2020-04-11 <a class="external text" href="https://randomgeekery.org/">Brian Wisti</a> <a class="external text" href="https://randomgeekery.org/2020/04/11/indieweb-h-cards/">Indieweb h-cards: Using microformats to build a profile page</a></li></ul> <p><br /> </p> <h2><span class="mw-headline" id="Brainstorming">Brainstorming</span></h2> <h3><span class="mw-headline" id="partial_vs_complete">partial vs complete</span></h3> <p>One possible solution for the <a href="#Issues">partial plus complete h-card issue</a> is to include a rel-me link to the full h-card and *not* mark up the partial profile information on the home page as an h-card. The <a class="external text" href="https://microformats.org/wiki/representative-h-card-parsing">representative-h-card-parsing</a> algorithm would then follow the rel-me link and use its full data. It doesn't seem ideal, but it'd work. </p><p>One problem with this is that the home page usually has many rel-me links, for example, to silos, and we don't yet have a way to denote the "canonical" one. <span class="h-card" style="white-space:nowrap"><img src="https://gregorlove.com/site/assets/files/6268/profile-2021-square.300x0.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Gregorlove.com" title="User:Gregorlove.com">gRegor Morrill</a></span>, <a href="/User:Mowens.com" title="User:Mowens.com">User:Mowens.com</a>, and others have proposed using u-uid and/or a new rel-canonical property for this. </p> <ul><li>I wonder if there is anything we can do with <code>uid</code> to specify which h-card is the most complete / canonical identity h-card. — <span class="h-card" style="white-space:nowrap"><a href="https://vanderven.se/martijn/" class="external u-url" style="padding-right:0;background:none"><img src="https://vanderven.se/martijn/martijn.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /></a> <span class="p-name"><a href="/User:Vanderven.se_martijn" title="User:Vanderven.se martijn">Martijn van der Ven</a></span></span></li> <li><span class="h-card"><img src="https://jacky.wtf/assets/favicon.2fb16a8e.svg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Jacky.wtf" title="User:Jacky.wtf">Jacky Alciné</a></span> uses "rel=canonical" on his representative h-card to help with disambiguation.</li> <li><del>Could <a class="external text" href="https://microformats.org/wiki/rel-author">rel-author</a> be suitable for this? It would definitely make sense for linking post pages to author URLs, perhaps less so when the publisher wants to have a partial h-card on their homepage and an expanded on on, say, an /about page — <span class="h-card"><img src="https://waterpigs.co.uk/photo-2021-04-22-100w.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Waterpigs.co.uk" title="User:Waterpigs.co.uk">Barnaby Walters</a></span></del></li> <li>For the “partial h-card on homepage and expanded on separate page” use case, rel=about could be ideal for this, as “about” is a very commonly used term for “additional information about this website/person” both in UI and URL design. It wouldn’t overload rel-author, and could be chained, e.g. a consuming implementation could find a minimal h-card on a post page, fetch the url property to find the same minimal representative h-card, and then follow a rel=about link to a page with a complete h-card on — <span class="h-card"><img src="https://waterpigs.co.uk/photo-2021-04-22-100w.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Waterpigs.co.uk" title="User:Waterpigs.co.uk">Barnaby Walters</a></span> <ul><li>If this was accepted, we could simply tack on addendums to <a href="/authorship" title="authorship">authorship</a> and <a href="/representative_h-card" title="representative h-card">representative h-card</a> which say “once the author/representative h-card has been found, if a rel=about link is found on the same page, the consumer can optionally fetch that page and parse it for an h-card (matching the representative url or uid) with more information about the person” or similar — <span class="h-card"><img src="https://waterpigs.co.uk/photo-2021-04-22-100w.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Waterpigs.co.uk" title="User:Waterpigs.co.uk">Barnaby Walters</a></span></li> <li>Searching <a href="/indiemap" class="mw-redirect" title="indiemap">indiemap</a> data from <span class="h-card" style="white-space:nowrap"><img src="https://snarfed.org/ryan_profile_square_thumb.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Snarfed.org" title="User:Snarfed.org">Ryan Barrett</a></span> (thanks!) shows: <ul><li>150x rel=About</li> <li>95x rel=about</li> <li>12x other variations (about…, about,, etc)</li> <li>on further analysis, it looks like all of the rel=About/about usage in indiemap is from one domain, and not being used to link to an expanded profile page, so afaik there’s zero evidence of it being used for that in the wild</li></ul></li></ul></li> <li>the <a class="external text" href="https://microformats.org/wiki/RelMeAuth#users_with_separate_contact_pages">relmeauth</a> <a class="external text" href="https://microformats.org/wiki/RelMeAuth#detailed_algorithm">spec</a> suggests just using rel-me to link to an expanded contact info page, and assumes that consumers will look through rel-me URLs which match the same domain and fetch them if they’re looking for additional contact info — <span class="h-card"><img src="https://waterpigs.co.uk/photo-2021-04-22-100w.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Waterpigs.co.uk" title="User:Waterpigs.co.uk">Barnaby Walters</a></span> <ul><li>examples of this in the wild?</li> <li>aaronparecki.com has a rel-me to aaronparecki.com/aaronpk, which contains follower and following counts, but no additional h-card information</li> <li><span class="h-card" style="white-space:nowrap"><img src="https://snarfed.org/ryan_profile_square_thumb.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Snarfed.org" title="User:Snarfed.org">Ryan Barrett</a></span> ran a query on the <a href="/indiemap" class="mw-redirect" title="indiemap">indiemap</a> data and found <a class="external text" href="https://console.cloud.google.com/bigquery?sq=586366768654:047463741d5343c3ab218b152561b005&project=api-project-962594101220&ws=!1m5!1m4!1m3!1sapi-project-962594101220!2sbquxjob_7951a0a1_1845465c1ca!3sUS">29 examples of the same-domain rel-me publishing pattern</a></li> <li>Examples of the same/similar domain rel-me publishing pattern: <ul><li><a class="external free" href="http://equivalentideas.com/contact">http://equivalentideas.com/contact</a></li> <li><a class="external free" href="https://webrocker.de/impressum/">https://webrocker.de/impressum/</a></li></ul></li> <li>90 examples from indiemap of the same/similar domain /about publishing pattern (currently without rel-me markup) <a class="external text" href="https://docs.google.com/spreadsheets/d/10y3irnLHP8ntdyFZxlQD4MI2Mmhevc6zLnV8epDWvxI/edit?pli=1#gid=1780452207">listed here</a></li> <li>46 examples from indiemap of {domain}/contact, which are likely a mix of additional contact (i.e. profile) information and contact forms <a class="external text" href="https://console.cloud.google.com/bigquery?sq=586366768654:515ee576e5f348688c809723f7078088&project=api-project-962594101220&ws=!1m5!1m4!1m3!1sapi-project-962594101220!2sbquxjob_19ed8cf6_184548f8ab4!3sUS">queryable here</a></li></ul></li></ul> <h3><span class="mw-headline" id="pronouns_use-cases">pronouns use-cases</span></h3> <p>Adding more information and additional properties unlocks more possibilities: </p> <ul><li>Allows apps to find and display/use your preferred <a href="/pronoun" title="pronoun">pronouns</a> <ul><li>which apps? which specific use-cases does a consuming app need to show a pronouns? <ul><li>A <a href="/reader" title="reader">social reader</a> can use them for shorter references in actions ("they liked this photo") <span class="h-card"><img src="https://jacky.wtf/assets/favicon.2fb16a8e.svg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Jacky.wtf" title="User:Jacky.wtf">Jacky Alciné</a></span> 2022-07-03</li> <li>A <a href="/IndieAuth" title="IndieAuth">IndieAuth</a> client that supports <a href="/ticketing" class="mw-redirect" title="ticketing">Ticketing_for_IndieAuth</a> that can use human-facing language ("do you want to send xer a ticket to $RESOURCE") <span class="h-card"><img src="https://jacky.wtf/assets/favicon.2fb16a8e.svg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Jacky.wtf" title="User:Jacky.wtf">Jacky Alciné</a></span> 2023-11-18</li></ul></li></ul></li> <li>…</li></ul> <h3><span class="mw-headline" id="h-card_generator">h-card generator</span></h3> <p>We need an h-card generator, any volunteers? </p><p>Something to replace this: </p> <div style="background: #fffbe3; padding: 4px 8px; border: 1px #faeead solid; border-radius: 4px">⚠️ The following generates a microformats1 hCard instead of a microformats2 h-card.<br />You probably don't want to use this tool until it has been updated</div> <p>The <a href="/microformats" title="microformats">microformats</a> website has a <a class="external text" href="https://microformats.org/code/hcard/creator">fill-in-the-blanks hCard generator</a> that will allow one to input all of the data they'd like to display and it will automatically mark all of it up properly so that one can cut and paste the semantic HTML into a web page. </p> <h2><span class="mw-headline" id="See_Also">See Also</span></h2> <ul><li><a href="/microformats" title="microformats">microformats</a></li> <li><a href="/h-entry" title="h-entry">h-entry</a></li> <li><a class="external text" href="https://chat.indieweb.org/dev/2018-04-30#t1525100824911600">Discussion about adding pronunciation guides to h-card.</a></li> <li>Criticism: <a class="external free" href="https://github.com/tootsuite/mastodon/pull/6645#issuecomment-381345084">https://github.com/tootsuite/mastodon/pull/6645#issuecomment-381345084</a></li></ul>    </div> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://indieweb.org/wiki/index.php?title=h-card&oldid=96016">https://indieweb.org/wiki/index.php?title=h-card&oldid=96016</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/Special:Categories" title="Special:Categories">Categories</a>: <ul><li><a href="/Category:building-blocks" title="Category:building-blocks">building-blocks</a></li><li><a href="/Category:microformats" title="Category:microformats">microformats</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" role="contentinfo" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 1 July 2024, at 15:26.</li> <li id="footer-info-copyright">Content is available under <a href="/IndieWebCamp:Copyrights" class="mw-redirect" title="IndieWebCamp:Copyrights">a CC0 public domain dedication</a> unless otherwise noted.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="/IndieWeb:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/IndieWeb:About">About IndieWeb</a></li> <li id="footer-places-disclaimers"><a href="/IndieWeb:General_disclaimer">Code of Conduct</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="http://creativecommons.org/publicdomain/zero/1.0/"><img src="https://i.creativecommons.org/p/zero/1.0/88x31.png" alt="a CC0 public domain dedication" width="88" height="31" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/"><img src="/wiki/resources/assets/poweredby_mediawiki_88x31.png" alt="Powered by MediaWiki" srcset="/wiki/resources/assets/poweredby_mediawiki_132x47.png 1.5x, /wiki/resources/assets/poweredby_mediawiki_176x62.png 2x" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul> <li> <button class="cdx-button cdx-button--icon-only vector-limited-width-toggle" id=""><span class="vector-icon mw-ui-icon-fullScreen mw-ui-icon-wikimedia-fullScreen"></span> <span>Toggle limited content width</span> </button> </li> </ul> </div> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgBackendResponseTime":181,"wgPageParseReport":{"limitreport":{"cputime":"0.064","walltime":"0.081","ppvisitednodes":{"value":431,"limit":1000000},"postexpandincludesize":{"value":7707,"limit":2097152},"templateargumentsize":{"value":871,"limit":2097152},"expansiondepth":{"value":5,"limit":100},"expensivefunctioncount":{"value":0,"limit":100},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":696,"limit":5000000},"timingprofile":["100.00% 45.126 1 -total"," 7.23% 3.263 2 Template:martijnvdven"," 7.04% 3.176 4 Template:jacky"," 6.53% 2.946 5 Template:gRegor"," 5.90% 2.661 2 Template:snarfed"," 5.86% 2.643 1 Template:kevquirk"," 5.72% 2.579 1 Template:Amit_Gawande"," 5.31% 2.398 1 Template:warning"," 5.30% 2.393 1 Template:stub"," 5.13% 2.316 1 Template:t"]},"cachereport":{"timestamp":"20250409112812","ttl":86400,"transientcontent":false}}});});</script> </body> </html>