Html5, a gentle introduction

A Doctype you can
remember in
your head
Before:

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

After

<!DOCTYPE html>

Cleaner meta

Before

<meta http-equiv=”content-type”
content=”text/html” charset=”uft-8”>

after

<meta charset=”utf-8”> (works now)

Not xml

<meta charset=”utf-8”>
<meta charset=”utf-8” />
<meta CHARset=utf-8 />
<META CHARSET=UTf-8>
It’s all good

For the old schoolers

<plaintext> => <pre>

<basefont><big><font><tt> => CSS

<s><strike><u> => CSS text-decoration

<center> => CSS text-align margin:auto

link, alink, vlink and the likes => CSS

Failed html4 markup

<img longdesc> => gone

<frameset><frame> => gone (<iframe> stays)

<html version> => gone

<meta scheme> => gone (google “invisible metadata”)

rev attribute => gone rel instead

HTML5 transition:
HTML compatibility

<script type=”text/javascript”> => It’s javascript folks,
no need to specify a type

<style type=”text/css”> => Is there any other type?

<a href=”#”><img border=”0”></a> => border is
staying for the moment, only with a value of 0

HTML5 transition:
XHTML compatibility

Self close empty HTML4 tags:

<meta /> <link /><br /> etc..

Attribute values are always quoted “” || ‘’

The minimal
requirements HTML5

<!DOCTYPE html>


<title>My Page</title>

<p>any other content</p>

The minimal requirements for
a consistent DOM with XHTML

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>any other content</p>
</body>
</html>

The minimal requirements for
a consistent DOM with XHTML

<table>
<tbody>
<tr>
<td>....</td>
</tr>
</tbody>
</table>

HTML5 transition:
Update Obsolete Markup
<applet> => why? Really, Why? <embed>
<dir> => <ul>
<acronym> => <abbr>
<blink> => don’t
<marquee> => don’t
<font> => still?
name attribute becomes id ex:
<a name=”faq1”></a> => <div id=” faq1”>...</div>
<img name=”map1”/> => <img id=”map1”/>

HTML5 transition:
Semantic changes

<em> => You can nest to extra emphasis
<small> => small print, disclaimer, caveats, less
important
<i> => Alternate voice/mood. Idioms, tech term
<br> => line break in poems, addresses
<hr> => thematic break

HTML5 transition:
More Semantic changes

<strong> => Importance rather than emphasis
<b> => stylistically offset text. (keyword, leading
paragraph)
<address> =>is for contact details of the author of
the current article or document not just for postal
address.

HTML5 transition:
un-deprecated

<iframe> => nested html
<embed> => for plugins (Works today)
target attribute (<base target> <a target> <area
target>)
<li value>
<ol start>
<ol><ul> can now have 0 items
<ol reversed>

HTML5 transition:
cite
html4 allowed use of cite speaker names
html5 only allows title of a work, disallows people
workaround <cite> + hCard for speakers
<blockquote cite=”#ds”>
And then I said: let there be light
</blockquote>
<cite class=”vcard”>
<span class=”fn” id=”ds”>
Diego Scataglini
</span>
</cite>

Microsoft WIN
contenteditable*
contenteditable is now ofﬁcially part of HTML
The DOM attribute is contentEditable
el.contentEditable = [value]
to check
el.isContentEditable

document.designMode = ‘on’ makes the entire
document editable, only by javascript.

*contenteditable works today across browsers

Self explanatory tags

data-* => To pass information to scripts from markup
draggable => no need to explain
hidden => no need to explain
role, aria-* attributes => see WAI-ARIA
spellcheck => boolean to tell the browser to use it or
not
tabindex => now it can have a -1 to skip the element

unsupported tags

<menu>, <command contextmenu> to deﬁne
toolbars and context menus for your application
microdata is a method of marking up elements with
additional machine-readable data.
item, itemprop => key value store passing for
microdata
<style scoped> Scoped tells the browser to apply the
styles only to the wrapping elements and its
children.

HTML5
new elements off the block

Now we can use these
<div (id|class)=”header”> => <header>
<div (id|class) =”nav”> => <nav>
<div (id|class) =”sidebar”> => <aside>
<div (id|class) =”article”> => <article>
<div (id|class) =”footer”> => <footer>
What about “content”?
Whatever is not one of: header, nav, footer, aside
is usually the content or you can use WAI-ARIA
and add role=”main” to the wrapping element

CSS Gotch’yer block?

These new elements are all display: inline so if
you want to have them as blocks you need to do
so yerself

header, nav, footer, article {display: block; }
nav {ﬂoat:left; width: 20%; }
article {ﬂoat:right; width: 79%; }
footer {clear: both;}

IE Gotch’yer CSS?
IE will ignore that css goodness and won’t let you
style any of those new tags unless you create them
through javascript like so in the HEAD provided
those elements are inside a body tag:
<script>
document. createElement(‘ header’ );
document. createElement(‘ nav’ ) ;
document. createElement(‘ article’ ) ;
document. createElement(‘ footer’ );
</script>

<Article> for content
(can have many)
Headers can be used also to specify heading of sections
or articles
<article>
<div class=”article-header”>
<h2>My awesome post</h2>
</div>
<p>Yeah right</p>
<div class=”article-meta”>
Posted in awesomeness
</meta>
</article>

<Header> not just for
Headers?!?
Headers can be used also to specify heading of sections or articles
or anything else. You can have as many headers as you need
<article>
<header>
</header>
<p>Yeah right</p>
<div class=”meta”>
</meta>
</article>

Like-wise for <footer>
Headers can be used also to specify heading of sections
or articles
<article>
<header>
</header>
<p>Yeah right</p>
<footer>
</footer>
</article>

Time

If you’re happy with the machine readable* inside the
tags you can omit the datetime attribute:
<time>20:00</time>

*The spec says “The time element represents either a
time on a 24-hour clock, or a precise date in the
proleptic Gregorian calendar, optionally with a time
and a time-zone of set.”

<Time> [datetime]
Valid formats: YYYY-MM-DD, HH:MM, or full with date
and time and timezone
<article>
....
<footer>
on <time
datetime=”2010-11-13T12:00:00.001-04:00”>1
millisecond past midnight</time>
</footer>
</article>

<Time> [pubdate]
pubdate is a boolean attribute that indicates the
publication date of an <article> or the whole <body>
content
<article>
<footer>
on <time
datetime=”2010-11-13T12:00:00.001-04:00”
pubdate>1 millisecond past midnight</time>
</footer>
</article>

<HGROUP>

<header>
<a href=”/”><img src=logo.png /></a>
<hgroup>
<h1> My awesome blog </h1>
<h2> Yeah, that’s right, I went there</h2>
</hgroup>
</header>

Articles for
comments?
Article can be nested inside of articles and it’s
actually encouraged by the specs “When article
elements are nested, the inner article elements
represent articles that are in principle related to
the contents of the outer article. For instance, a
blog entry on a site that accepts user-submitted
comments could represent the comments as article
elements nested within the article element for the
blog entry.”

or <NAV>
<header>
</header>
<nav>
<ul>
</ul>
</nav>

or multiple <NAV>s
<header>
<nav>
....
</nav>
</header>
<aside>
<nav>
....
</nav>
</aside>

footer <NAV>?

The specs suggests that the “legal” links
and usually footer links not be wrapped
in <nav> but it’s debatable and debated

<ASIDE>
A section of a page that consists of content that is
tangentially related to the content around the aside
element, and which could be considered separate from
that content. Such sections are often represented as
sidebars in printed typography.

The element can be used for typographical effects like
pull quotes or sidebars, for advertising, for groups of
nav elements, and for other content that is considered
separate from the main content of the page.

<DETAILS>
a disclosure widget from which the user can obtain
additional information or controls. (not implemented
yet)

Provides a expanding/collapsing area.
The ﬁrst child should be a <summary> element
followed by ﬂow elements.

<details open> to make it default to the open state

<FIGURE>
The figure element represents some flow content,
optionally with a caption, that is self-contained and is
typically referenced as a single unit from the main flow of
the document.

<figure>
<img src...>
<figcaption>
Diego’s awesome God-like Body
</figcaption>
</figure>

<MARK>
The html equivalent of a highlighter.

represents a run of text in one document marked or highlighted for
reference purposes, due to its relevance in another context. When
used in a quotation or other block of text referred to from the prose, it
indicates a highlight that was not originally present but which has
been added to bring the reader's attention to a part of the text that
might not have been considered important by the original author
when the block was originally written, but which is now under
previously unexpected scrutiny.When used in the main prose of a
document, it indicates a part of the document that has been
highlighted due to its likely relevance to the user's current activity.

<RUBY> our favorite
tag
The ruby element allows one or more spans of phrasing content to be marked
with ruby annotations. Ruby annotations are short runs of text presented
alongside base text, primarily used in East Asian typography as a guide for
pronunciation or to include other annotations. In Japanese, this form of
typography is also known as furigana.

A ruby element represents the spans of phrasing content it contains, ignoring
all the child rt and rp elements and their descendants. Those spans of
phrasing content have associated annotations created using the rt element.

<RUBY> best practices

<ruby>
<rp>(</rp><rt> </rt><rp>)</rp>
<rp>(</rp><rt> </rt><rp>)</rp>
</ruby>
Non compliant browsers will render ( ) ( )
NOTE: IE has had these for a very long time.

Everything is a
section
These are sectioning content tags:

<article>

<section>

<nav>

<aside>

Let’s look at the
outline

<h1>Hello</h1>
<div> 1. Hello
<h1>world</h1> 2. world
</div>

Now with sectioning

<h1>Hello</h1>
<article> 1. Hello
</article>

Heading values don’t
mean $#!t

<h6>Hello</h6>
<article> 1. Hello
</article>

Not having a headline
Still counts

<h6>Hello</h6>
<article> 1. Hello
<p>world</p> 1. Untitled
</article> Section

Sometimes legitimate

For <nav> and <aside> is perfectly legitimate
to not have a heading.
It’ll still come up as “untitled section” though

Check your outline @
http://gsnedders.html5.org/outliner/

Hgroup are Highlanders
“there can be only one”

<h6>Hello</h6>
<article>
<hgroup>
<h6>Cruel</h6> 1. Hello
<h1>World</h1> 1. World
</hgroup> Highest heading
</article>
value wins

Sectioning Roots

<blockquote> <ﬁeldset> Can have their own
<body> <ﬁgure> outline but don’t
<details> <td> contribute to ancestors’
outlines

Sectioning Roots

<h6>Hello</h6>
<article>
<h1>world</h1>
<blockquote> 1. Hello
<h1>Sucka!</h1> 1. world
</blockquote>
</article>

Article vs Section

Articles are self
contained pieces of
content that can be Sections are not!
redistributed and be
ﬁne.

Article vs Section

An article can have many sections just as well as a
page can have many sections which wrap many
articles.

MOM look at me,
I am outside a form

<form id=”foo”>
<select>
...
</select>
</form>
.....
<input type=”submit” form=”foo">

Input types goodness

<input type=”text” >
<input type=”email” required multiple> => comma
separated emails
<input type=”url”>
<input type=”date|time|datetime|month|week”>
<input type=”number” min=”0” max=”100”
step=”5”>
<input type=”range”>
<input type=”search”>
<input type=”tel”>
<input type=”color”>

Attribute goodness

autocomplete*, min, max, step, multiple, required,
pattern, list, autofocus, placeholder

Step can also take “any” (any accuracy)

Most of them do what you expect them to.
list is a separate interesting beast by itself

*works today

list & <DATALIST>

<datalist> is like an editable <select>. It let users type
their own value if none of available choices pleases
them. Referenced by ID in the list attribute.
<input name=phone-type type=text list=location />
<datalist id=”location”>
<option label=”home” value=”h”>
<option label=”work” value=”w”>
<option label=”mobile” value=”m” >
</datalist>

<VIDEO>

<video src=myvideo.ogv></video>

With fallback now for older browsers

<video src=myvideo.ogv>
Download <a href=myvideo.ogv>my video</a>
</video>

<VIDEO> attributes

controls => tells the browser to provide controls
poster => URL to an image to show while
downloading
height, width, autoplay, preload => exactly as expected

seize the <VIDEO>

<video> will always respect the aspect ratio of the
resource even if you specify it wrong. It’ll be rendered
“letter-boxed”.
In absence of width attribute, the width will be
calculated from the poster frame size. If the poster
attribute is missing it’ll fall back on the video resource,
otherwise it’s 300px.

preload the <VIDEO>

preload=auto or just preload
preload=none
preload=metadata

different <VIDEO>
for different strokes

<video controls>
<source src=”my-super-hi-res-video.mp4”
media=”(min-device-width:1280px)”>
<source src=shitty-low-res.mp4>
</video>

No DRM, for DRM restriction use plugins
No standard codec so provide them all

<video controls>
<source src=video.ogv
type=’video/ogg codecs=”theora, vorbis”’>
<source src=video.mp4
type=’video/mp4 codecs=”avc1.42E01E, mp4a.40.2”’>

<p>Please download the video in <a
href=”video.ogv”>Ogg</a> or <a href=”video.mp4”>
format.</p>
</video>

falling
even lower
<VIDEO>
<video controls>
<source src=video.ogv type=’video/ogg codecs=”theora, vorbis”’>
<source src=video.mp4 type=’video/mp4 codecs=”avc1.42E01E, mp4a.
40.2”’>
<embed src=”video.swf” type=”application/x-shockwave-ﬂash”
allowscriptaccess=”always” allowfullscreen=”true” width=”320”
height=”240”>
</video>

Customizing
<VIDEO>
<video controls id=”cool” src=cool.ogv></video>
...
var video = document. getElementsByTagName(‘ video’ )[0] ;
video.removeAttribute(‘ controls’ ) ;
/* now you have access to
video.paused, video.ended, video.currentTime, video.play(),
video.pause() and more */

<AUDIO>

Pretty much the same usage as video

<AUDIO|VIDEO>
format support
(don’t hold your breath)

Trident 5.0 is IE9 engine

What’s next
all the stuff I didn’t have time
to create slides for

The cool stuff
Canvas
Data Storage
Web Storage - key value store supported in latest browsers
http://dev.w3.org/html5/webstorage/ (works today)

Web SQL Database - Opera, Chrome, Safari
http://dev.w3.org/html5/webdatabase/
Ofﬂine browsing - http://www.w3.org/TR/ofﬂine-webapps/
Drag & Drop - http://dev.w3.org/html5/spec/dnd.html
GeoLocation - http://dev.w3.org/geo/api/spec-source.html
Cross-document messaging - Works ~everywhere: safari, chrome coming
Workers and WebSockets

even cooler stuff
bleeding edge or (vaporware)

microdata - http://dev.w3.org/html5/md/

HTML Device - http://dev.w3.org/html5/html-device/

What does my
browser support?
Let’s put things in perspective

What about IE9?

IE9 will bring good support for canvas, at par
with everybody else

Media support will be pretty good, work needs
to be done.

Nothing yet on the form elements, new tags
and attributes.

Thanks
Diego Scataglini
http://www.diegoscataglini.com

Html5, a gentle introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Html5, a gentle introduction

Similar to Html5, a gentle introduction (20)

Recently uploaded

Recently uploaded (20)

Html5, a gentle introduction

Editor's Notes