Using HTML5 sensibly

Using HTML5
sensibly

Christian Heilmann, London Ajax User Meetup, February 2011

This will be a change from
my normal talks.

Instead of giving you the
facts, it is my turn to ask
some questions.

But first, let me tell you a
story. As stories are
important!

Back in 1939...

...Antarctica needed exploring

So let’s see what went
wrong there...

★ Purely engineering driven
★ Tested while on the road
★ Never tested in the real
environment
★ Massive media excitement before
it proved its worth

Everything is HTML5 -
including browser specific
tricks.

To a degree this is
understandable.

There is a lot of confusion
about the players and the
specs.

HTML(5)

Markup general WTF

JavaScript APIs
Stuff for Browser/Parser developers

This gives people lots of
space for interpretation
and focus - and the
opportunity to rant.

The main premise of
HTML5 is pragmatism -
making things simpler for
all of us.

Another big topic is that
XML was just not for the
web - end users should not
suffer for the errors of the
authors.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>HTML - c'est moi!</title>
<link rel="stylesheet" type="text/css"
href="styles.css">
<script type="text/javascript" src="magic.js">
</script>
</head>
<body>
<h1>Heading! Everybody duck!</h1>
<p>I am content, hear me roar!</p>
<p class="footer">By me!</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5, c'est moi, ou HTML...</title>
<link rel="stylesheet" href="styles.css">
<script src="magic.js"></script>
</head>
<body>
<p class="footer">By me!</p>
</body>
</html>

HTML5 also includes new
semantic elements (based
on class names in use) that
structure our documents
much better than before.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header><h1>Heading! Everybody duck!</h1></header>
<section>
</section>
<footer><p>By me!</p></footer>
</body>
</html>

HTML5 defines
and expects
browsers to fix
omissions for
us - and
doesn’t mind
case or quotes.

<!DOCTYPE html>
<html lang=en>
<TITLE>HTML5, c'est moi, ou HTML...</title>
<LINK rel=stylesheet href=styles.css>
<script src=magic.js></SCRIPT>
<body>
<HEADER><h1>Heading! Everybody duck!</h1></header>
<section>
</SECTION>
<footer><p>By me!</p></FOOTER>
</body>
</HTML>

The reason is that browsers
do that anyways - just
check the generated code
of a document like that.

<!DOCTYPE html>
<html lang="en"><head>
</head><body>
<section>

</section>
<footer><p>By me!</p></footer>
</body></html>

<!DOCTYPE html>
<html lang="en"><head>
</head><body>
<section>
<p>I am content, hear me roar!
<footer></footer>
</p>
<p>By me!</p>
</section>
</body></html>

Browsers fix a lot of stuff
for us, this has always been
the case.

?
Can innovation be based on
“people never did this
correctly anyways”?

?
Should HTML be there only
for browsers?

What about conversion
Services? Search bots?
Content scrapers?

Internet Explorer doesn’t
allow styling for elements it
doesn’t understand as part
of HTML.

HTML is the thing we base
everything on - so if we
exclusively use the new
HTML5 elements, we give
IE unstyled documents.

First fix - elements created
with JS can be styled in IE.
<!DOCTYPE html>
<html lang="en">
<head>
<style>header{color:#fff;background:#369;}</style>
<script>document.createElement('header');</script>
</head>
<body>
<header><h1>Hello!</h1></header>
</body>
</html>

Remy Sharp packaged that
up nicely in HTML5shiv.

http://code.google.com/p/html5shiv/

Cue the purists of the web.
“HTML should work without
JavaScript!”

Next solution:
Sending HTML5 as XML or
giving it a namespace.
http://www.ibm.com/developerworks/xml/library/x-think45/

http://www.debeterevormgever.nl/html5-ie-without-javascript/

Purist solution:
add DIVs around the new
elements.
.header,header,
.footer,footer,
.aside,aside,
.section,section{
display:block;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
</head>
<body>
<div class="header"><header>
</header></div>
<div class="section"><section>
</section></div>
<div class="footer"><footer>
<p>By me</p>
</footer></div>
</body>
</html>

Bloody Internet Explorer!
We always have to do
things extra for it!

All browsers fail in one way
or another and need
patches. Our job is to know
them.

Luckily, there is help.

And as if by magic - the
much shorter and
pragmatic markup became
more complex again.

<!doctype html>


<![endif]-->
<![endif]-->
 <html lang="en"
class="no-js"> 
<head>
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">

One solution to use HTML5
APIs with legacy browsers
is using polyfills.

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
browser-Polyfills

?
Should we shoe-horn new
technology into legacy
browsers?

?
Do patches add complexity
as we need to test their
performance?

?
How about moving IE<9
fixes to the server side?
Padding with DIVs with
classes and no JS for IE?

Making video and audio
simpler.

Embedding audio and video
is easy in HTML5
<video src="interview.ogv" controls>
<a href="interview.ogv">Download the video</a>
</video>

To make all capable
browsers play the video...
<video controls>
<source src="interview.mp4" type="video/mp4">
</source>
<source src="interview.webm" type="video/webm">
</source>
<source src="interview.ogv" type="video/ogg">
</source>
<p>Download the
<a href="interview.mp4">video in MP4 format</a>.
</p>
</video>

Where there is a need,
there is an opportunity for a
business.

However, there is a real
problem for businesses.

http://www.webkitchen.be/2011/01/26/stealing-
content-was-never-easier-than-with-html5/

?
Can we expect content
creators to create video in
many formats to support
an open technology?

?
Can a service like vid.ly be
trusted for content creation
and storage?

?
Is HTML5 not applicable for
premium content?

It is time for all of us to
take initiative and make
this work.

Question authority and call
out wrong messaging.

Bad use of technology
doesn’t only break end user
experiences - it breaks the
web!
http://gawker.com/#!5754678/what-should-our-new-
national-anthem-be

http://www.whatwg.org/mailing-list

https://developer.mozilla.org/

Thanks!

Chris Heilmann
@codepo8
http://icant.co.uk

Using HTML5 sensibly

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Using HTML5 sensibly

Similar to Using HTML5 sensibly (20)

More from Christian Heilmann

More from Christian Heilmann (20)

Recently uploaded

Recently uploaded (20)

Using HTML5 sensibly