- HTML5 DOCTYPE
- Page Encoding
- HTML5 Markup
- New And Updated Elements
- Structural Elements
- New Attributes
- Deprecated Elements And Attributes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 " /> <title>XHTML1 Strict Document</title> <script type="text/javascript" src="boo.js"></script> <link type="text/css" rel="stylesheet" href="a.css"/> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Document</title> <script src="boo.js"></script> <link rel="stylesheet" href="a.css"/> </head> <body> </body> </html>
<!DOCTYPE html> <meta charset=UTF-8> <title>Document Intentionally Blanks</title>
<!DOCTYPE html> <title>Tweetable Document</title> <p>Tweetable HTML5</p>
<hgroup> <h1>This is my header</h1> <h2>This is my subtitle</h2> <hgroup>
<figure> <img src="htmlcss1.png" alt="HTML5 & CSS3 for the Real World"/> <figcaption> My Book </figcaption> </figure>
<details> <summary>5 of 5 stars from three reviews</summary> <ul> <li>5 stars from Amazon</li> <li>5 stars from Costco</li> <li>5 stars from Barns & Noble</li> </ul> </details>
Example: Click below
IE6-8 does not style elements that don't exist, so create the elements!
<!--[if IE]> <script type="text/javascript"> (function(){ var html5elmeents ="article|aside|audio|canvas|...|video"; html5elmeents.split('|'); for(var i = 0; i < html5elmeents.length; i++){ document.createElement(html5elmeents[i]); } })(); </script> <![endif]-->
"Ruby" are short runs of text alongside the base text, typically used in East Asian documents to indicate pronunciation or to provide a short annotation.
display: ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container; ruby-align: auto | start | left | center | end | right | distribute-letter | distribute-space | line-edge; ruby-overhang: auto | start | end | none; ruby-position: before | after | right | inline; ruby-span: attr(x) | none;
<p tabindex="-1">Focusable with Javascript</p>
<pre contenteditable>Look. I am editable>/pre>
I am editable
This paragrph has an error.
spellcheck="true | false"
Define your own DOM manipulable data attributes
<div id="card27" data-cardID="27" data-row="3" data-col="2"></div>
var info = document.querySelector('#card27'); var cardinfo = []; for (var key in info.dataset) { cardinfo.push(key, ': ', info.dataset[key], ','); } var currentCard = cardinfo.join('');
Result:
currentCard == 'cardID: 27, row: 3, col: 2'
var cardID = info.getAttribute('data-cardID'); //27
All browsers support "data-*", but full support of 'dataset started with IE10, FF6, Safari 5.1, Chrome 7, Opera 11.1. Supported in iOS and Android. Polly fill | jQuery Polyfill
Google processes RDFa, Microformats and Microdata.
itemid itemprop itemref itemscope itemtype
person url nickname affiliation(org) photo friend title contact role acquaintance address(adr)
<div itemscope itemtype="http://data-vocabulary.org/Person"> <img src="estelle.gif" itemprop="photo"> <p>Name: <i itemprop="name">Estelle Weyl</i> <p>Title: <i itemprop="title">Speaker, UI Engineer</i> <p>Blog: <a href="http://standardista.com" itemprop="affiliation">Standardista. <p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">Address: <i itemprop="locality">San Carlos</i>, <i itemprop="region">CA</i></p> </div>