2022 HTML5: The future is now

2022 HTML5: The
future is now
Gonzalo Cordero F2E Summit 2011

Looking back

• The front-end has lacked major updates for
over a decade

CSS 2 HTML 4.01 ECMASCript 3
(1998) (1999) (1999)

Looking back...

We’ve been working on 10 years old Technology

Got Milk?

You wouldn’t drink a 9
years old milk would you?

So what’s HTML5?

HTML5~=Buzz + HTML5 Tags + CSS3 + New JS Apis

can I haz HTML5?
The W3C and WHATWG are currently working on the
specs

can I haz HTML5?

...And then there is this whole thing about 2022...

in the year 2022...
We will have ﬂoating skateboards...
(And awesome looking nike shoes)

In the year 2022...
Skynet will be ruling the world...or not.

and...
The HTML5 spec will be ready...

Plus Crockford says we gotta start from scratch...

can I haz html5?
So just when you thought your problems were going away...

can I haz HTML5?
Browser vendors still deciding what and how

Welcome to the life of a Front End engineer

This concludes this presentation....

Go see a therapist and come back in 10 years...

Ok, It’s really not that
bad...

I promise

HTML5

• Is here to stay.
• You can start using it today.
• No need to throw away your previous
code.

So what’s new?

• Page level changes
• New HTML Elements

Doctype: Before

<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Doctype: now

<!DOCTYPE html>

Meta: Before

<meta http-equiv="Content-Type" content="text/
html; charset=utf-8">

Meta: Now

<meta charset="utf-8">

Types No-More
Assumes text/css

<link rel="stylesheet" href="main.css">

Assumes text/javascript

<script>....</script>

HTML5 Elements
• HTML5 provides new structural block-level
elements:
- Header
- Nav
- Section
- Footer
- Article
Aside

HTML5 Elements
• HTML5 provides new structural block-level
elements:
- Header <header>

- Nav <nav> <sec$on>

-
<ar$cle> <aside>

Section
<ar$cle >

- Footer <ar$cle >

- Article <footer>

Aside

The Semantic of
semantics

• Better organized, easier to maintain.
• Screen readers.
• Open to future applications: Advanced rss
readers, widgets, etc.

Header blocks : before

<div id="header">...</div>

Headers blocks: Now

<header>...</header>

Headers
• ...represents a group of introductory or
navigational aids.
• can have multiple header elements on a page
• it is deﬁned by its content, not its position
• Should not exist within another <header> or
within <footer>

Header
<header>

<header>

Headers: Example
<div id="header">
<h1>BMW USA</h1>
<h2 class="tagline">The Ultimate Driving Machine</h2>
</div>

<header>
<h1>BMW USA</h1>
<h2 class="tagline">The Ultimate Driving
Machine</h2>
</header>

hgroups
• Related headings (h1-h6) may be grouped
together (wrapped) and treated as a single
structure in the document outline

<header>
<hgroup>
<h1>BMW USA</h1>
<h2 class="tagline">The Ultimate Driving ßMachine</h2>
</hgroup>
</header>

Nav : Before
<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</div>

Nav : after
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>

Nav

• ...represents a section of a page that links
to other pages or to parts within the page
• only sections that consist of major
navigation blocks are appropriate for the
<nav> element

Sections

• "...represents a generic section of a
document or application. ...is a thematic
grouping of content, typically with a
heading."
• It allows to reset the document outline

Sections
<article>
<hgroup>
<h1>My Title</h1>
<h2>My Subtitle</h2>
</hgroup>
<section>
<h1>Section Title</h1>
<p>Article content</p>
<section>
<h1>Sub-content title</h1>
<p>Article sub-content</p>
</section>
</section>
</article>

Sections: Rule of thumb

• Don't use it just as hook for styling or
scripting; that's a <div>
• Don't use it if <article>, <aside> or <nav>
is more appropriate
• Don't use it unless there is naturally a
heading at the start of the section

Articles: before
<div class="entry">
<h2>
<a href="something.html"
rel="bookmark"
title="link to this post">
Travel day
</a>
<p class="post-date">October 22, 2009</p>
</h2>
...
</div>

Articles: now
<article>
<header>
<h1>
<a href="#"
rel="bookmark"
title="link to this post">
Travel day
</a>
</h1>
<p class="post-date">October 22, 2009</p>
</header>
...
</article>

Articles
• used for 'self-contained related content'
• useful for blog posts, news stories,
comments, reviews, forum posts
• can also be used for widget types of
content, e.g. stock ticker
• can be nested, as well as <section>

Aside
• <aside> is another specialized form of
section
• Provides tangentially related content
• May be used for
• advertisements
• pull quotes or sidebar content

Aside
<article>
<div class="article">
<h1>Blog 2</h1>
<p>I discovered a new planet
while...</p>
<aside>
<p>The number of potential planets
that can support life are...</p>
</aside>
</div>
</article>

Footer: before

<div id="footer">...</div>

Footer: now

<footer>...</footer>

Footer

• Indicate concluding content in a section
• May be used to contain copyright info,
author info, links to additional references,
etc.

Other Notable
Elements
• <ﬁgure>, <ﬁgcaption>
• <mark>
• <time>, <meter>
• <details> & <summary>
• <b>, <i>, <small> revisited
• Custom attributes
• Global attributes

HTML5 Forms: now

• New input types
• Use of required ﬁelds, placeholders, and
autofocus
• Validation capabilities
• Form elements outside of the <form> tag

PlaceHolders
<input type="email"
placeholder="Enter your email">
</input>

Autofocus
• Sets an element to be the default starting
element in the form (can only be used once
in the form)

<input type="text" name="yahoo-search" autofocus>

Required ﬁelds

<input type="password" name="password" required>

New input types
• tel • search
• number • range
• url • color
• email • date(month,
week...)`

For the input types that perform valida4on, visual 
feedback should be provided as to the validity of the 
data by using the :valid and :invalid CSS pseudo‐classes

HTML5 Forms-
validation
• Opera and FF4 offer form validations.

Media: Audio&Video

• A <source> must be speciﬁed in a format
supported by that browser
• Video formats:
• Audio: Browsers support WAV, MP3, Ogg
Vorbis

Media: Audio&Video
<video id="movie" width="320" height="240" controls>
<source src="pr6.mp4">
<source ...>
</video>

<audio controls>
<source src="intro.mp3">
</audio>

Canvas
• It gives you a "drawing" surface
• You manipulate it via JS
• Accessibility is an challenge.
<canvas id="myCanvas" width="300" height="150">
Default fallback text
</canvas>

var mycanvas =
document.getElementById("myCanvas").getContext("
2d");

//draws a rectangle filled with the current fill style
mycanvas.fillrect(x, y, width, height);

SVG

• XML-based vector graphics format
• You can also style SVG with CSS and add
dynamic behavior to it using the SVG DOM
• relatively accessible.

SVG: Example

<svg version="1.1"
width="320" height="320"
xmlns="http://www.w3.org/2000/svg">

<ellipse fill="url(#circleGrad)" stroke="#000" cx="50%" cy="50%" rx="50%" ry="50%">
<animate attributename="rx" values="0%;50%;0%" dur="2s" repeatcount="indefinite">
<animate attributename="ry" values="0%;50%;0%" dur="2s" repeatcount="indefinite">
</animate>
</svg>

Playing nice with the
elders

• Different workarounds have emerged
• Shivs(Javascript DOM injection)
• Wrapping with HTML4 Elements

Pre-HTML5
<style>
article,aside,details,ﬁgcaption,ﬁgure,footer,
header,hgroup,menu,nav,section {
display: block;
}
</style>

HTML4 Wrapping
<section>
<div class="section">

</div>
</section>

Pre-html5

• Don’t rely on html5 elements for styling or
DOM manipulation
• Avoid using css child selector rules.

Conclusion

• HTML5 is here to stay
• Use it today. Don’t be afraid.
• Get excited and blog about it!

2022 HTML5: The future is now

More Related Content

What's hot

Similar to 2022 HTML5: The future is now

Recently uploaded

2022 HTML5: The future is now

Editor's Notes