• article
• section
• header
• hgroup
• footer
• main
• nav
• aside
• figure
• figcaption
• time
• data
• mark
• ruby
• rt
• rp

Parental Advisory Inline Event Handlers

for demo purposes only!

if (!("srcdoc" in document.createElement("iframe"))) {
	$$("iframe[srcdoc]").forEach(iframe => {
		var srcdoc = iframe.getAttribute("srcdoc");
		iframe.src = "data:text/html," + srcdoc;
	});
}

• name
• honorific-prefix
• given-name
• additional-name
• family-name
• honorific-suffix
• nickname
• username
• new-password
• current-password
• organization-title
• organization
• language
• sex
• url
• photo
• street-address
• address-line1
• address-line2
• address-line3
• address-level4
• address-level3
• address-level2
• address-level1
• country
• country-name
• postal-code
• bday
• bday-day
• bday-month
• bday-year
• cc-name
• cc-given-name
• cc-additional-name
• cc-family-name
• cc-number
• cc-exp
• cc-exp-month
• cc-exp-year
• cc-csc
• cc-type
• transaction-currency
• transaction-amount

Need https for credit card info!

document.body.addEventListener("toggle", evt => {
	var accordion = evt.target.closest(".accordion");
	if (evt.target.open && accordion) {
		$$("details", accordion).forEach(details => {
			if (details != evt.target) {
				details.open = false;
			}
		});
	}
}, true);

		details::marker {
			content: "+";
		}

		details[open]::marker {
			content: "-";
		}

element.setCustomValidity("message")

schema.org RDFa

schema.org JSON-LD

			<script type="application/ld+json">
			{
				"@context": "http://schema.org/",
				...
				"aggregateRating": {
					"@type": "AggregateRating",
					"ratingValue": "4.96",
					"reviewCount": "23"
				},
				...
			}
			</script>
		

Microformats Microformats

Open Graph RDFa

<section itemscope itemtype="http://schema.org/Recipe">
	<link itemprop="url"
	      href="http://allrecipes.com/recipe/231374/[…]and-parmesan" />
	<meta itemprop="mainEntityOfPage" content="True" />

	<img src="http://images.media-allrecipes.com/[…].jpg"
	     alt="Risotto with Truffle and Parmesan"
	     itemprop="image"/>
	<h1 itemprop="name">Risotto with Truffle and Parmesan</h1>

	<p>Prep     <time itemprop="prepTime" datetime="PT20M">20 m</time>
	<p>Cook     <time itemprop="cookTime" datetime="PT30M">30 m</time>
	<p>Ready In <time itemprop="totalTime" datetime="PT50M">50 m</time>