Introduction to HTML5

“HTML5” is an
marketing term
that companies
use to mean
“cool shit that
works on an

“HTML5”
• HTML5
• CSS 3
• JavaScript
• CSS 2
• JavaScript Frameworks
• Canvas (Actually part of HTML5)
• Video tag (Actually part of HTML5)
• Anything the speaker wants it to mean

We’ll come back
to that in a
second.

HTML is a
language that
provides
structure to
content

Start with Content
whichElement?
Trying to answer that age
old question:
Should that be a div, a
span, or something else?

Home
Contribute
About

One of the main challenges
we see in building semantic
content is picking what tag
to use when.

Add Structure
<h1>whichElement?</h1>
<h2>Trying to answer that age old
question:</h2>
<h2>Should that be a div, a span, or
something else?</h2>

<ul>
<li>Home</li>
<li>Contribute</li>
<li>About</li>
</ul>

<p>One of the main challenges we see
in building semantic content is
picking what tag to use when. This
site seeks to help with that. Now,
before we get all judgy and preachy
let me get a few tenants out
there:</p>

CSS is a
language that
provides
style to content

Add Style
<h1>whichElement?</h1>
<style type="text/css">
<h2>Trying to answer that age old
h1{
question:</h2>
<h2>Should that red;a div, a span, or
color: be
something else?</h2>
}
h2{
<ul> color: blue;
<li>Home</li>
font-style: italic;
<li>Contribute</li>
}
<li>About</li>
</ul>
p{
<p>One ofcolor:main challenges we see
the white;
in building semantic content is
background-color: black;
picking what tag to use when. This
site }seeks to help with that. Now,
before we get all judgy and preachy
let me get a few tenants out
</style>
there:</p>

HTML/CSS
results in
separation of
content from
display

Why separate content and
display?
• Helps SEO
• Makes work more portable or changeable
• Allows for multiple ways of display

Change Style
h1{
h1{ color: red;
font-size: 16px;
color: red;
}
}
h2{
h2{ color: blue;
font-size: 26px;
} color: blue;
ul{
font-style: italic;
} list-style: none;
clear: both;
display: block;
p{ width: 100%;
height: 30px;
color: 0;
padding: white;
background-color: black;
}
}
li{
float: left;
padding-right: 20px;
</style>
}

</style>

JavaScript is a
language that
provides
behavior to
content

Behavior
<html>
<head>

<script type="text/javascript">
function createAlertMessage(){
alert("Stop what you're doing!");
}
</script>

</head>
<body>
<button onclick="createAlertMessage()">
Alert!
</button>

</body>
</html>

Content
Structure
Style
Behavior

Content - Database
Structure - HTML
Style - CSS
Behavior -
JavaScript

Content - HTML
Structure - HTML
Style - CSS
Behavior -
JavaScript

The 5 thand most
recent public
specification for
HTML from the
public groups
that….

The most recent
specification for
HTML

The most
recent*
specification**
for HTML***
* It’s not technically the most recent
** It’s actually a standard
*** While we’re at it, there is no HTML5 only HTML
This is why pragmatic people hate standards bodies sometimes

New in HTML5
• New semantic elements
– article, section, aside, header, footer, etc
• New multimedia elements
– audio, video, canvas
• New API’s for manipulation in JavaScript
– Offline data, drag and drop, web storage

A series of
recommendation
s modules to
the standards
committees…

Can’t we just
say “The latest
official version of
CSS?”

Let’s just say
“HMTL5” for
everything? Ok?

What can you
do with
“HTML5”?

Semantic HTML
means your
markup describes
it’s content without
presenting it

What do we mean by Semantic
HTML
• HTML where proper elements are used
– <p> denotes paragraph
– <ul> denotes an list of items, where the order is not
important
– <address> contains address information
– <div> and <span> are used to describe information
• HTML where extraneous elements are not
misused
– No <p> for line breaking
– No <blockquote> for indentation
– No <h1> for big text
• HTML without presentation information
– No <font>, <b>, <i> tags
– No inline styles

Semantic HTML is a moving
target
• Not Boolean
• Not always objective
• A continuum

Semantic HTML
RELATIVELY UNSEMANTIC RELATIVELY SEMANTIC
<body background="css/bg.png">

<font face="Calibri”><center> <body>
<table width="800" bgcolor="#FFFFFF" border="10"
bordercolor="#FFFFFF">

<tr><td>
<div id="header">
<table width="100%" bgcolor="#f0f0f0" border="0“>

<tr>
<h1>The Awesome Blog of
<td><h1> Awesome</h1>
<font face="Palatino Linotype">The Awesome Blog of
Awesome</font>
<p class="tagline">
</h1>

</td> Awesome is a State of
</tr>

<tr>
Mind
<td align="right"><p><i>Awesome is a State of
Mind</i></p></td> </p>
</tr>

</table> </div>

HTML5?

What does this
have to do with
HTML5?

HTML5 adds more
semantics
<body>
<header>
<h1>The Awesome Blog of Awesome</h1>
<p>Awesome is a State of Mind</p>
</header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>

Outlines
• Outlines seem really important to the
people who push semantic HTML 5
• Are they really important?
– Today: No
– Tomorrow: Who knows?
• But this is a semantically correct way of
reducing classes and extraneous divs

Header
PREVIOUSLY
<div id="header">
<p class="tagline">Awesome is a State of Mind</p>
</div>

HTML 5
<header>
<h2>Awesome is a State of Mind</h2>
</header>

Footer
PREVIOUSLY
<div id="footer”>
<p>Copyright 2011 - Terry Ryan</p>
</div>
HTML 5
<footer>
<p>Copyright 2011 - Terry
Ryan</p>
</footer>

Navigation
PREVIOUSLY HTML 5

<div id="nav">
<nav>
<ul>
<ul>
</ul>
</ul>
</div>
</nav>

Articles
PREVIOUSLY HTML5

<div class="post”>
<article>
<div class="postheader">
<header>
<h3><a href="">I Scream My Thoughts</a></h3>
<h1><a href="">I Scream My Thoughts</a></h1>
<p class="date">August 10, 2011</p>
<time>August 10, 2011</time>
</div>
</header>
<p>You probably haven't heard of them duis</p>
<p>You probably haven't heard of them duis </p>
</div>
</article>

An article is a
piece of content
that can
stand on it’s own

Content
PREVIOUSLY HTML5

<div class=”content”>
<article>
...
...
</div>
</article>
<article>
...
...
</div>
</article>
<article>
...
...
</div>
<article>
</div>
</div>

Also can be correct
PREVIOUSLY HTML5

<section class=”content”>
<article>
...
...
</div>
</article>
<article>
...
...
</div>
</article>
<article>
...
...
</div>
<article>
</div>
</section>

Umm

That’s great, but
frankly not that
much of a different,
how is that better?

Benefit 1
BEFORE THESE ELEMENTS AFTER

</div> </div>
</div> </article>
</div> </div>
<div id=“footer”> <footer>
</div> </footer>
</body> </body>

Benefit 2
• Less monkeying with content hierarchies

<article>
<header>
<h1><a href="">I Made a Post Thingie</a></h1>
article header h1
<time datetime="2011-09-02">September 2, 2011</time>
</header>
<img src="img/captain-awesome.jpg" width="300" height="200" alt="Image of Captain Awesome" />
<p>DIY ea nulla photo booth tempor occaecat, velit nihil mixtape scenester.
Irony laboris echo park, wolf officia vice cupidatat labore butcher freegan
farm-to-table nisi velit aliqua gluten-free. Aliquip nesciunt assumenda,
wayfarers seitan wolf reprehenderit nulla twee sartorial dolore food truck
voluptate ex vinyl. Aliquip ex enim, irony terry richardson trust fund consectetur
fap pariatur dolor. Lo-fi nulla whatever mlkshk, banksy american apparel carles
adipisicing incididunt wolf photo booth hipster. Wayfarers four loko ex cosby sweater,
adipisicing sartorial non cardigan craft beer cillum reprehenderit terry richardson
3 wolf moon mollit. Ethical ut labore beard, 3 wolf moon duis readymade assumenda
hipster tofu mcsweeney's master cleanse.</p>
</article>

Benefit 3
• No longer bound to one header or one nav
can have multiple.

New elements
work across
modern
browsers
without fail

What’s
you’re
definition of
Modern?

Use the HTML 5
Shiv
http://code.google.com/p/html5shiv/

HTML5 includes
lots of
new <input>
types
69

They aren’t
supported
on every
browser
70

All browsers
default to
showing
unknown input
types as text
71

Search
<input type=“search” name=“search” />
• Support is spotty
• Browser vendors tend to
round, add magnifying
glass, etc.

Email
<input type=“email” name=“email” />
• Provides validation
• Provides email keyboard on iOS devices.

Url
<input type=“url” name=“url” />
Provides validation
Provides url keyboard on iOS devices.

Number
<input type=“number” name=“cost” />
Provides keypad on iOS and
Android devices.
Provides a stepper on desktops
Takes attributes:
– Min/Max
– Step

Tel
<input type=“tel” name=“cell” />
• Provides keypad on iOS
and Android devices.

Not well
supported,
but have
potential

Range
<input type=“range” name=“volume” />
• Provides a set of values
• The slider allows you to pick one
• Not terribly precise
• Takes attributes:
• Min/Max
• Step

Date
<input type=“date” name=“dob” />
• Provides validation
• On Opera
• Displays a data picker
• On Safari/Chrome
• Displays ticker
• IE
• Dashes your hopes and dreams the way only IE can

Output
<output />
Semantically correct placeholder for
calculated values.
Can also be used a label for input
type=“slider”

Output in Action
<form class="order">
<label for="quantity">Quantity:</label>
<input id="quantity" name="quantity" type="number" value="1" onChange="calc()" />
<br />
<label for="price">Price: </label>
<input id="price" name="price" type="number" value="19.99" disabled />
<br />
<label for="total">Total: </label>
<output id="total" name="total" />
<br />
</form>

<script type="application/javascript">
function calc(){
var quantity = document.getElementById("quantity").value;
var price = document.getElementById("price").value;
var total = document.getElementById("total");
total.value = Math.round(quantity * price * 100)/100;
}
</script>

meter
<meter min=“0” max=“20” value=“12”>12cm</meter>
Basically a Bar Chart of results

progress
<progress min=“100” value=“20”>20%</progress>
Could be used to indicate progress through
a multistep form
Could be programmatically changed to
indicate progress of program

For Future Reference
• HTML 5 General
– http://diveintohtml5.org
– http://html5doctor.com
• HTML5 Semantics
– http://diveintohtml5.org/semantics.html
• HTML 5 Forms
– http://wufoo.com/html5
– http://diveintohtml5.org/forms.html

Canvas
• A drawing surface for
– Manipulating images
– Drawing
– Saving Content

More resources for
Canvas
• http://www.html5rocks.com/en/tutorials/canvas/integrating/
• http://dev.opera.com/articles/view/html-5-canvas-the-basics/
• http://www.slideshare.net/bebraw/intro-to-html5-canvas-8312015

Others
• Offline Storage
• Drag and Drop

Remember
CSS3 is a series
of modules…

CSS Modules
• Transforms
– Origins
• Shadows
• Gradients
• Transitions
• Animations

Demo

Various CSS
Coolness

Reasons
• Hardware Accelerated
• Philosophically a display issue
• Hardware Accelerated

Follow up?
• Preso will be up at
– http://slideshare.net/tpryan
• Feel free to contact me
– terry.ryan@adobe.com
– http://terrenceryan.com
– Twitter: @tpryan

Introduction to HTML5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to HTML5

Similar to Introduction to HTML5 (20)

More from Terry Ryan

More from Terry Ryan (20)

Recently uploaded

Recently uploaded (20)

Introduction to HTML5

Editor's Notes