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-disabled 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>Category:building-blocks - 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-disabled 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":"aad5ff2fd1e8d60f846b73e8","wgCanonicalNamespace":"Category","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":14,"wgPageName":"Category:building-blocks","wgTitle":"building-blocks","wgCurRevisionId":90231,"wgRevisionId":90231,"wgArticleId":456,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":[],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Category:building-blocks","wgRelevantArticleId":456,"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","mediawiki.action.styles": "ready","ext.categoryTree.styles":"ready","mediawiki.helplink":"ready","codex-search-styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready"};RLPAGEMODULES=["ext.categoryTree","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%7Cext.categoryTree.styles%7Cmediawiki.action.styles%7Cmediawiki.helplink%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="🧱🔩"> <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="building-blocks"> <meta property="og:description" content="🧱🔩"> <meta property="og:url" content="https://indieweb.org/Category:building-blocks"> <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-14 ns-subject page-Category_building-blocks rootpage-Category_building-blocks 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-01-08" class="mw-list-item"><a href="https://events.indieweb.org/tag/hwc"><span>👥 Meetups: 2025-01-08</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,550-articles" class="mw-list-item"><a href="/Special:Statistics"><span>📑 5,550 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%2FCategory%253Abuilding-blocks" 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%2FCategory%253Abuilding-blocks" 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 vector-toc-list-item-expanded"> <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-Identity" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Identity"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span>Identity</div> </a> <ul id="toc-Identity-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Posts" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Posts"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span>Posts</div> </a> <ul id="toc-Posts-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Citability" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Citability"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span>Citability</div> </a> <ul id="toc-Citability-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Syndication" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Syndication"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span>Syndication</div> </a> <button aria-controls="toc-Syndication-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 Syndication subsection</span> </button> <ul id="toc-Syndication-sublist" class="vector-toc-list"> <li id="toc-Reverse_Syndication" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Reverse_Syndication"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.1</span>Reverse Syndication</div> </a> <ul id="toc-Reverse_Syndication-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Mentions" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Mentions"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span>Mentions</div> </a> <ul id="toc-Mentions-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Login" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Login"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span>Login</div> </a> <ul id="toc-Login-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Web_Actions" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Web_Actions"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span>Web Actions</div> </a> <ul id="toc-Web_Actions-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Link_Preview" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Link_Preview"> <div class="vector-toc-text"> <span class="vector-toc-numb">9</span>Link Preview</div> </a> <ul id="toc-Link_Preview-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Reply_Context" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Reply_Context"> <div class="vector-toc-text"> <span class="vector-toc-numb">10</span>Reply Context</div> </a> <ul id="toc-Reply_Context-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Tests" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Tests"> <div class="vector-toc-text"> <span class="vector-toc-numb">11</span>Tests</div> </a> <ul id="toc-Tests-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Historical" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Historical"> <div class="vector-toc-text"> <span class="vector-toc-numb">12</span>Historical</div> </a> <ul id="toc-Historical-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">13</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-namespace">Category</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">building-blocks</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-category" class="selected vector-tab-noicon mw-list-item"><a href="/Category:building-blocks" title="View the category page [c]" accesskey="c"><span>Category</span></a></li><li id="ca-talk" class="new vector-tab-noicon mw-list-item"><a href="/wiki/index.php?title=Category_talk:building-blocks&action=edit&redlink=1" rel="discussion" title="Discussion about the content page (page does not exist) [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="/Category:building-blocks"><span>Read</span></a></li><li id="ca-viewsource" class="vector-tab-noicon mw-list-item"><a href="/wiki/index.php?title=Category:building-blocks&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=Category:building-blocks&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="/Category:building-blocks"><span>Read</span></a></li><li id="ca-more-viewsource" class="vector-more-collapsible-item mw-list-item"><a href="/wiki/index.php?title=Category:building-blocks&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=Category:building-blocks&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/Category:building-blocks" 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/Category:building-blocks" 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=Category:building-blocks&oldid=90231" 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=Category:building-blocks&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 id="mw-indicator-mw-helplink" class="mw-indicator"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Categories" target="_blank" class="mw-helplink">Help</a></div> </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"><p><span class="p-logo" style="float:right;height:128px;font-size:128px;margin:-32px 0 32px;padding-bottom: 16px;">🧱🔩</span> </p><p><span class="p-summary"><b><dfn>Building blocks</dfn></b> are key design-patterns, technologies, and methods for building and improving your independent website.</span> </p><p>See also: </p> <ul><li><b><a href="/graphics#Illustrations_and_Sketch_Notes" title="graphics">User actions and building blocks</a></b>, a diagram of common IndieWeb actions and which building blocks are used for each.</li> <li><b><a href="/IndieMark" title="IndieMark">IndieMark</a></b>, a way of measuring "how indieweb" is your website, and a good step-by-step guide to what feature(s) you should consider implementing next.</li></ul> <h2><span class="mw-headline" id="Why">Why</span></h2><p> Why building blocks? This <a class="external text" href="http://tantek.com/log/2003/0813t1158.html#minimodules">early quote from Tim Berners-Lee's Weaving The Web Chapter 4 page 39</a> summed it up well: </p><blockquote><p>... if I had insisted everyone use HTTP, this would also have been against the principle of minimal constraint. If the Web were to be universal, it should be as unconstraining as possible. Unlike the NeXT computer, the Web would come as a set of ideas that could be adopted individually in combination with existing or future parts.</p></blockquote> <p>As was the Web, so is the IndieWeb. </p><p>The IndieWeb also comes as a set of (additional) ideas (as building blocks), that can be "adopted individually in combination with existing or future parts". </p><p>From a systems perspective, designing a modular system is harder than designing a monolithic system; however over time a modular system has a much better chance of evolving and adapting to changing needs and a diversity of uses. </p><p>It is for these reasons that the IndieWeb is built with a set of building blocks, instead of a monolithic "stack". </p> <h2><span class="mw-headline" id="Identity">Identity</span></h2> <p>The act of having a personal website immediately creates an online <a href="/identity" class="mw-redirect" title="identity">identity</a> which can be better established with: </p> <ul><li><a href="/microformats" title="microformats">microformats</a> <ul><li><a href="/h-card" title="h-card">h-card</a> for <a href="/homepage" title="homepage">homepage</a> and <a href="/icon" title="icon">icon</a></li> <li><a href="/rel-me" title="rel-me">rel-me</a> for <a href="/identity-elsewhere" title="identity-elsewhere">identity-elsewhere</a> and <a href="/RelMeAuth" title="RelMeAuth">RelMeAuth</a> sign-in</li></ul></li></ul> <meta property="mw:PageProp/toc" /> <h2><span class="mw-headline" id="Posts">Posts</span></h2> <p>Posts and variants are perhaps <em>the</em> building block of an indieweb site: </p> <ul><li><a href="/posts" title="posts">posts</a> marked up with <a href="/h-feed" title="h-feed">h-feed</a>, <a href="/h-entry" title="h-entry">h-entry</a>, and <a href="/h-card" title="h-card">h-card</a> <ul><li><a href="/notes" class="mw-redirect" title="notes">notes</a></li> <li><a href="/articles" class="mw-redirect" title="articles">articles</a></li> <li><a href="/posts-elsewhere" title="posts-elsewhere">posts-elsewhere</a></li></ul></li> <li><a href="/comments" title="comments">comments</a></li></ul> <p>Stuff in/of posts: </p> <ul><li><a href="/hashtags" title="hashtags">hashtags</a></li> <li><a href="/permalinks" class="mw-redirect" title="permalinks">permalinks</a></li> <li><a href="/authorship" title="authorship">authorship</a></li> <li><a href="/person-tag" title="person-tag">person-tag</a></li></ul> <h2><span class="mw-headline" id="Citability">Citability</span></h2> <p>in addition to <a href="/permalinks" class="mw-redirect" title="permalinks">permalinks</a>, the following building blocks help with citing posts in constrained destinations such as limited character count <a href="/POSSE" title="POSSE">POSSE</a> destinations, or print: </p> <ul><li><a href="/permashortlinks" class="mw-redirect" title="permashortlinks">permashortlinks</a></li> <li><a href="/permashortcitations" class="mw-redirect" title="permashortcitations">permashortcitations</a></li></ul> <h2><span class="mw-headline" id="Syndication">Syndication</span></h2> <p><a href="/syndication" class="mw-redirect" title="syndication">syndication</a>, the ability to post content on your own site and push it out to 3rd party <a href="/silos" class="mw-redirect" title="silos">silos</a>. </p> <ul><li><a href="/h-entry" title="h-entry">h-entry</a></li> <li><a href="/POSSE" title="POSSE">POSSE</a></li> <li><a href="/original-post-discovery" title="original-post-discovery">original-post-discovery</a></li></ul> <h3><span class="mw-headline" id="Reverse_Syndication">Reverse Syndication</span></h3> <p>Reverse syndication (AKA <a href="/backfeed" title="backfeed">backfeed</a>) refers to pulling silo activity around your syndicated posts (e.g. silo <a href="/likes" title="likes">likes</a>, <a href="/reposts" title="reposts">reposts</a> or <a href="/replies" class="mw-redirect" title="replies">replies</a>) back to your personal site. </p> <h2><span class="mw-headline" id="Mentions">Mentions</span></h2> <p>The ability for one webpage to let another know the first has linked to the second is a vital indieweb building block. </p><p>The key mention technology for the indieweb is: </p> <ul><li><a href="/webmention" class="mw-redirect" title="webmention">webmention</a></li></ul> <h2><span class="mw-headline" id="Login">Login</span></h2> <p>The ability to use your online identity (domain) to authenticate yourself on the web. </p><p>Technologies: </p> <ul><li><a href="/web-sign-in" class="mw-redirect" title="web-sign-in">web-sign-in</a></li> <li><a href="/indieauth" class="mw-redirect" title="indieauth">indieauth</a></li></ul> <h2><span class="mw-headline" id="Web_Actions">Web Actions</span></h2> <p>A web action is the interface and user experience of taking a specific discrete action, across the web, from one site to another site or application. </p> <ul><li><a href="/webactions" title="webactions">webactions</a></li></ul> <h2><span class="mw-headline" id="Link_Preview">Link Preview</span></h2> <p>A link preview is what posts show about one or more embedded links, e.g. a headline, image, summary from the link destination. </p> <ul><li><a href="/link-preview" title="link-preview">Link Preview</a></li></ul> <h2><span class="mw-headline" id="Reply_Context">Reply Context</span></h2> <p>A reply context similar to a link preview, except is the information that a reply post shows about the original post that it is in reply to. E.g. original post author (name, photo, link), original post content (or abbreviated summary). </p> <ul><li><a href="/reply-context" title="reply-context">reply-context</a></li></ul> <h2><span class="mw-headline" id="Tests">Tests</span></h2> <ul><li><a href="/SWAT0" title="SWAT0">SWAT0</a> originally from the 2010 Federated Social Web Summit.</li></ul> <h2><span class="mw-headline" id="Historical">Historical</span></h2> <p>See <a href="/building-blocks-historical" title="building-blocks-historical">building-blocks-historical</a>. </p> <h2><span class="mw-headline" id="See_also">See also</span></h2> <ul><li><a href="/microformats" title="microformats">microformats</a></li></ul>    </div><div class="mw-category-generated" lang="en" dir="ltr"><div id="mw-subcategories"> <h2>Subcategories</h2> <p>This category has the following 2 subcategories, out of 2 total. </p><div lang="en" dir="ltr" class="mw-content-ltr"><div class="mw-category"><div class="mw-category-group"><h3>D</h3> <ul><li><div class="CategoryTreeSection"><div class="CategoryTreeItem"><span class="CategoryTreeEmptyBullet"></span> <a href="/Category:domain-name-registrars" title="Category:domain-name-registrars">domain-name-registrars</a>‎ <span title="Contains 0 subcategories, 5 pages, and 0 files" dir="ltr">(5 P)</span></div><div class="CategoryTreeChildren" style="display:none"></div></div></li></ul></div><div class="mw-category-group"><h3>M</h3> <ul><li><div class="CategoryTreeSection"><div class="CategoryTreeItem"><span class="CategoryTreeEmptyBullet"></span> <a href="/Category:microformats" title="Category:microformats">microformats</a>‎ <span title="Contains 0 subcategories, 25 pages, and 0 files" dir="ltr">(25 P)</span></div><div class="CategoryTreeChildren" style="display:none"></div></div></li></ul></div></div></div> </div><div id="mw-pages"> <h2>Pages in category "building-blocks"</h2> <p>The following 40 pages are in this category, out of 40 total. </p><div lang="en" dir="ltr" class="mw-content-ltr"><div class="mw-category mw-category-columns"><div class="mw-category-group"><h3>2</h3> <ul><li><a href="/2017/building-blocks" title="2017/building-blocks">2017/building-blocks</a></li></ul></div><div class="mw-category-group"><h3>A</h3> <ul><li><a href="/authorship" title="authorship">authorship</a></li> <li><a href="/authorship-spec" title="authorship-spec">authorship-spec</a></li></ul></div><div class="mw-category-group"><h3>B</h3> <ul><li><span class="redirect-in-category"><a href="/building_block" class="mw-redirect" title="building block">building block</a></span></li> <li><a href="/Building_block_icons" title="Building block icons">Building block icons</a></li> <li><span class="redirect-in-category"><a href="/building_blocks" class="mw-redirect" title="building blocks">building blocks</a></span></li> <li><span class="redirect-in-category"><a href="/building-block" class="mw-redirect" title="building-block">building-block</a></span></li> <li><span class="redirect-in-category"><a href="/building-blocks" class="mw-redirect" title="building-blocks">building-blocks</a></span></li></ul></div><div class="mw-category-group"><h3>C</h3> <ul><li><a href="/cross-posting" title="cross-posting">cross-posting</a></li></ul></div><div class="mw-category-group"><h3>E</h3> <ul><li><a href="/elsewhere" title="elsewhere">elsewhere</a></li> <li><a href="/events/2023-10-25-hwc-pacific" title="events/2023-10-25-hwc-pacific">events/2023-10-25-hwc-pacific</a></li> <li><a href="/events/2024-03-13-hwc-pacific" title="events/2024-03-13-hwc-pacific">events/2024-03-13-hwc-pacific</a></li></ul></div><div class="mw-category-group"><h3>H</h3> <ul><li><a href="/h-card" title="h-card">h-card</a></li> <li><a href="/hashtags" title="hashtags">hashtags</a></li></ul></div><div class="mw-category-group"><h3>I</h3> <ul><li><a href="/identity-elsewhere" title="identity-elsewhere">identity-elsewhere</a></li> <li><a href="/IndieAuth" title="IndieAuth">IndieAuth</a></li> <li><a href="/indieauth-for-login" title="indieauth-for-login">indieauth-for-login</a></li></ul></div><div class="mw-category-group"><h3>L</h3> <ul><li><a href="/link-preview" title="link-preview">link-preview</a></li></ul></div><div class="mw-category-group"><h3>M</h3> <ul><li><a href="/microformats" title="microformats">microformats</a></li> <li><a href="/Micropub" title="Micropub">Micropub</a></li> <li><a href="/Microsub" title="Microsub">Microsub</a></li></ul></div><div class="mw-category-group"><h3>P</h3> <ul><li><a href="/permalink" title="permalink">permalink</a></li> <li><a href="/person-tag" title="person-tag">person-tag</a></li> <li><a href="/personal-domain" title="personal-domain">personal-domain</a></li> <li><a href="/PESOS" title="PESOS">PESOS</a></li> <li><a href="/pingback-fr" title="pingback-fr">pingback-fr</a></li> <li><a href="/pipes" title="pipes">pipes</a></li> <li><a href="/POSSE" title="POSSE">POSSE</a></li> <li><a href="/POSSE-ko" title="POSSE-ko">POSSE-ko</a></li> <li><a href="/posts" title="posts">posts</a></li> <li><a href="/posts-elsewhere" title="posts-elsewhere">posts-elsewhere</a></li></ul></div><div class="mw-category-group"><h3>R</h3> <ul><li><a href="/rel-me" title="rel-me">rel-me</a></li></ul></div><div class="mw-category-group"><h3>S</h3> <ul><li><a href="/storage" title="storage">storage</a></li></ul></div><div class="mw-category-group"><h3>T</h3> <ul><li><a href="/to-do" title="to-do">to-do</a></li> <li><a href="/tools" title="tools">tools</a></li></ul></div><div class="mw-category-group"><h3>V</h3> <ul><li><a href="/User:Vanderven.se_martijn/IndieAuth" title="User:Vanderven.se martijn/IndieAuth">User:Vanderven.se martijn/IndieAuth</a></li></ul></div><div class="mw-category-group"><h3>W</h3> <ul><li><a href="/web_hosting" title="web hosting">web hosting</a></li> <li><a href="/webactions" title="webactions">webactions</a></li> <li><a href="/Webmention" title="Webmention">Webmention</a></li> <li><a href="/WebSub" title="WebSub">WebSub</a></li></ul></div></div></div> </div></div> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://indieweb.org/wiki/index.php?title=Category:building-blocks&oldid=90231">https://indieweb.org/wiki/index.php?title=Category:building-blocks&oldid=90231</a>"</div></div> <div id="catlinks" class="catlinks catlinks-allhidden" data-mw="interface"></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 29 October 2023, at 23:48.</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":224,"wgPageParseReport":{"limitreport":{"cputime":"0.012","walltime":"0.015","ppvisitednodes":{"value":92,"limit":1000000},"postexpandincludesize":{"value":127,"limit":2097152},"templateargumentsize":{"value":8,"limit":2097152},"expansiondepth":{"value":3,"limit":100},"expensivefunctioncount":{"value":0,"limit":100},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":0,"limit":5000000},"timingprofile":["100.00% 2.201 1 Template:emojicon","100.00% 2.201 1 -total"]},"cachereport":{"timestamp":"20250102195000","ttl":86400,"transientcontent":false}}});});</script> </body> </html>