An Introduction to HTML5

HTML5

What it is, what it’s not, and what parts of it we can use today.

October 21, 2010
Steven G. Chipman

In 140 Characters ....

“HTML5 is a vocabulary and set of application programming interfaces that
make up a core declarative language for web sites and applications.”

@mollydotcom

You’re no doubt familiar with ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<DIV>, <div> or even <DiV> is just ﬁne.

<br>, <BR> and <br /> are all ok too.

<a class=foo> is even all right.

(but when was the last time you needed them?)

font, center, and other presentational cruft

(but if you still use those, I’ll give you a smack)

small is now semantic. It means “legal text”.

b now means stylistically offset text with no
additional importance.

i means the text is in an alternate mood or voice

cite now means the “title of a work”

It’s now ok to nest elements inside an a element

<a href=”/”>

<h1>My awesome site</h1>

<h2>My witty tagline</h2>
</a>
* we can make this more semantic, but lets not get ahead of ourselves.

<command label=”Autoﬁll” onclick=”doAutoFill();” />
* doesn’t seem to be supported by anything yet

<time datetime=”2010-10-21”>October 21, 2010</
time>

<time datetime=”2010-10-21”>Thursday</time>

<time datetime=”2010-10-21” pubdate>October 21, 2010</time>

* if nested in an <article>, its the pubdate of the article. Otherwise, its the pubdate of the document

<meter>4 out of 5 dentists</meter>

<meter min=”0” max=”5”>4 out of 5 dentists</meter>

<meter min=”0” max=”5” value=”4”>A majority of dentists</meter>

It also has high, low, and optimum
attributes.

<p>

Upload is <progress min=”0” max=”100”>60%</progress> complete.
</p>

Use section it to group related content.

<section class=”posts”>

<h1>The latest news ... </h1>

<p>

Oh hai, guyz!

</p>
</section>

Like section, but for self contained content.


<h1>The latest news ... </h1>

<article>

<p>

Oh hai, guyz!

</p>

</article>
</section>

Each article can have its own h1-h6 hierarchy.


<h1>The latest news ...</h1>

<article>

<h1>Article title</h1>

<p>

Oh hai, guyz!

</p>

</article>
</section>

<header>

<hgroup>

<a href=”/”>



</a>

</hgroup>
</header>
* the enhanced semantics I mentioned earlier

<footer>

<small>Legal mumbo jumbo and copyrights</small>
</footer>

<footer>

<nav>

<ul>

<li><a href=”...”>Another Property</li>

<li><a href=”...”>Help!</li>

</ul>

</nav>

<small>Legal mumbo jumbo and copyrights</small>
</footer>

Used to represent content that is tangentially
related to other content.

<!DOCTYPE html>
<head>
<meta charset=”UTF-8” />
<title>Sample HTML5 Document Structure</title>
</head>
<body>
<header>

<hgroup>



</hgroup>

<nav>

<ul>

<li><a href=”/”>home</a></li>

<li><a href=”about.html”>about</a></li>

</ul>

</nav>
</header>

<article>

<h1>Post Title</h1>

<time datetime=”2010-10-01”>October 1, 2010</time>

<p>This is the body of the blog post.</p>

<aside>Here is a funny excerpt!</aside>

</article>
</section>
<footer>

<nav>

<ul>

<li><a href=”...”>Another Property</a></li>

<li><a href=”...”>Help!</a></li>

</ul>

</nav>

<small>© 2010, Me</small>
</footer>
</body>
</html>

input:invalid {

background-color:#E366AF
}

tel
url
datetime
date
month
week
time
datetime-local
number
range
color
search

Browsers that don’t understand an input type will
render it as a standard text input.

If you don’t specify controls, you can write your own
with javascript.

*Standard stuff like .play(), .pause(), .volume, etc.

http://slayerofﬁce.com/articles/html5/video/

pretty much the same as video.

http://slayeroffice.com/code/mouse_patterns/mp-canvas.html

An introduction to canvas is a presentation unto itself.

localStorage.setItem(“key”,”value”);

localStorage.getItem(“key”);
* returns null if the key doesn’t exist

localStorage.removeItem(“key”);

window.addEventListener(“storage”,onStorage,false);

StorageEvent.key|oldValue|newValue|url
* url might be uri in some browsers. Check for uri if url isn’t there.

Things to keep in mind ...

• 5MB of storage

• EVERYTHING is returned as as string, just like cookies

• If you run out of space, an exception will be thrown.

• Unlike Flash LSOs, you can’t ask for more space.

• Some browsers allow users to set the limit, so you may have less than 5MB

navigator.geolocation.getCurrentPosition(callback);

function callback(position) {

alert(position.coords.latitude)
}

navigator.geolocation.watchPosition(callback);

Javascript is single threaded.
Workers allow for background threads.

var worker = new Worker(“worker.js”);

worker.postMessage(“hello!”);

worker.onmessage = function(evt) {

alert(evt.data);
}

self.onmessage = function(evt) {

// do stuff ...
}

Things to be aware of ...

• Workers can not access or manipulate the DOM.

• They do not have access to the scripts in the page that spawned it.

• Using importScripts, a Worker can access other javascript libraries.

In a nutshell, it will allow us to use
sockets instead of long polling over
HTTP.

But only Safari and Chrome support it right now.

Getting IE to recognize new elements ...

<script>
document.createElement(“section”);
document.createElement(“article”);
// ... and so on
</script>
* otherwise you won’t be able to style these elements in IE8 and below

Testing for attribute support ...

function elementSupportsAttribute(element,attribute) {
var ele = document.createElement(element);
return attribute in ele ? true : false;
}

Testing for input type support ...

function elementSupportsType(type) {
var input = document.createElement(“input”);
input.setAttribute(“type”,type);
return input.getAttribute(“type”) == “text” ? false : true;
}

According to Microsoft ...

IE9 is the bomb: http://samples.msdn.microsoft.com/ietestcenter/

Modernizr

• Detects support, does NOT provide it

• Javascript hooks such as Modernizr.canvas

• Adds classes to the HTML element that deﬁne available features

• Sets up elements for IE 6 through 8

• MIT-BSD License

Resources

• HTML5 for Web Designers by Jeremy Keith - http://books.alistapart.com/

• Dive into HTML5 by Mark Pilgrim - http://diveintohtml5.org/

• The Spec: http://dev.w3.org/html5/spec/Overview.html

• The HTML5 Test: http://www.html5test.com/

• Modernizr: http://www.modernizr.com/

Questions?

Thanks for coming!

An Introduction to HTML5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to An Introduction to HTML5

Similar to An Introduction to HTML5 (20)

Recently uploaded

Recently uploaded (20)

An Introduction to HTML5

Editor's Notes