HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

HTML5
What you need to know

PANOETIC
®

WEBSITE DESIGN & DEVELOPMENT


Overview
u A brief history of Markup
v The design of HTML5
w Semantics
x Rich media
y Using HTML5 today


A brief history
of Markup
g HTML was the brainchild of Sir Tim Berners-Lee
g Tags already existed in the form of SGML
g Never was such a thing as HTML 1

g HTML 2 published by the Internet Engineering task Force
(IETF)


HTML
HTML 2.0 1995
HTML 3.2 1997
HTML 4.0 1997
HTML 4.01 1999


XHTML
XHTML 1.0 2000
XHTML 1.1 2001
XHTML 2


Ian Hickson
Editor of the HTML5 Specification

WHATWG
Web Hypertext
Applications
Technology
Working Group


HTML5
WHATWG 2004
W3C 2007


The design
of HTML5
g HTML Design Principles
http://w3.org/html-design-principles


Design Principles
u Avoid needless x Pave the cowpaths
complexity

v Support existing y Degrade gracefully
content

w Solve Real z Priority of
problems constituencies


u Avoid needless
complexity
Simple solutions are preferred to complex ones,
when possible.


(X)HTML 1.0
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

HTML5
<!DOCTYPE html>


(X)HTML
<?xml version=”1.0” encoding=”UTF-8”?>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8” />

HTML5

<meta charset=”utf-8”>


(X)HTML
<link rel=”stylesheet” type=”text/css” href=”file.css” />
<script src=”modernizr-1.5.js” type=”text/javascript” ></script>

HTML5
<link rel=”stylesheet” href=”file.css”>
<script type=”text/javascript”></script>


v Support
existing content
Existing content often relies upon expected user agent
processing and behaviour to function as intended.


Accepted coding styles

<img src=”foo” alt=”bar” />
<p class=”foo”>Hello world</p>
<img src=”foo” alt=”bar”>
<p class=”foo”>Hello world
<IMG SRC=”foo” ALT=”bar”>
<P CLASS=”foo”>Hello world</P>
<img src=foo alt=bar>
<p class=foo>Hello world</p>


w Solve Real
problems
Abstract architectures that don’t address an existing need
are less favoured than pragmatic solutions to problems
that web content faces today.


(X)HTML
<h2><a href=”/path/to/resource”>Headline text</a></h2>
<p><a href=”/path/to/resource”>Paragraph text.</a></p>

HTML5
<a href=”/path/to/resource”>
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>


x Pave the
cowpaths
Look where people are already coming up with solutions.
Don’t re-invent the wheel.


New elements
g In 2005, Google surveyed over three billion web pages to
find out what id and class attributes web designers most
commonly use to name HTML elements.

section header
article footer
aside details
nav figure


Swap out those divs with the new HTML5 elements

(X)HTML HTML5
<body> <body>
<div id=”header”>...</div> <header>...</header>
<div id=”navigation”>...</div> <nav>...</nav>
<div id=”main”>...</div> <div id=”main”>...</div>
<div id=”sidebar”>...</div> <aside>...</aside>
<div id=”footer”>...</div> <footer>...</footer>
</body> </body>


(X)HTML HTML5
<div class=”item”> <section class=”item”>
<h2>...</h2> <header><h1>...</h1></header>
<div class=”meta”>...</div> <footer class=”meta”>...</footer>
<div class=”content”> <div class=”content”>
... ...
</div> </div>
<div class=”links”>...</div> <nav class=”links”>...</nav>
</div> </section>


y Degrade
gracefully
HTML 5 document conformance requirements should be
designed so that Web content can degrade gracefully in
older or less capable user agents, even when making use of
new elements, attributes, APIs and content models.


g Forms have been enhanced in HTML5 using
the type attributes
input type=”number”
input type=”search”
input type=”range”
input type=”email”
input type=”date”
input type=”url”

g Existing browsers that don’t understand this
stuff, degrade gracefully

g New form attributes including ‘placeholder’


z Priority of
constituencies
In case of conflict, consider users over authors over
implementors over specifiers over theoretical
purity.


Semantics
g Elements used for presentation removed

g New elements introduced


Removed
Presentational (moved to CSS)
<font> <big> <center> & attributes - border, bgcolor etc

others
<frame> <frameset> <noframes> <acronym> <axis> <summary>


Changed
<a> “…may be wrapped around entire paragraphs, lists,
tables, and so forth, even entire sections, so long as
there is no interactive content within.”

<b> “…a span of text to be stylistically offset from
the normal prose without conveying any extra
importance.”

<i> “…a span of text in an alternate voice or mood, or
otherwise offset from the normal prose..”


Changed
<hr> “…a paragraph-level thematic break.”

<small> “…small print (for side comments and legal print).”


New elements
<mark> “…a run of text in one document marked or
highlighted for reference purposes, due to its
relevance in another context.”

<time> “This element is intended as a way to encode
modern dates and times in a machine-readable way
so that user agents can offer to add them to the
user’s calendar”
<time datetime=”2009-09-02T09:30:00” pubdate>
September 2nd, 9:30am</time>


New elements
<section> <header> <details>
<article> <footer> <figure>
<nav> <hgroup>
<aside>


(X)HTML <div class=”content”>
<div class=”content-uk”>[…]</div>
<div class=”content-usa”>[…]</div>
<div class=”content-world”>[…]</div>
</div>

<section> <section id=”content-uk”>
<h1>Stories from the UK</h1>
</section>
<section id=”content-usa”>
<h1>Stories from the USA</h1>
</section>
<section id=”content-world”>
<h1>Stories from around the world</h1>
</section>


<article> <section id=”content-uk”>
<h1>Stories from the UK</h1>
<article>[…]</article>
</section>

<section id=”content-usa”>
<h1>Stories from the USA</h1>
</section>

<section id=”content-world”>
<h1>Stories from around the world</h1>
</section>


Articles <article>
can have <section id=”raymond-chandler”>[…]</section>
sections <section id=”dashiell-hammett”>[…]</section>

too! <section id=”mickey-spillane”>[…]</section>
</article>

<header> <header>
<h1>Punchy title</h1>
</header>

<hgroup> <header>
<hgroup>
<h2>Very catchy strapline</h2>
</hgroup>
</header>


combining <article>
<section> <header>
<article> </header>
and <section id=”raymond-chandler”>
<header>
<header> <h1>Raymond Chandler</h1>
</header>
</section>
<section id=”dashiell-hammett”>
<header>
<h1>Dashiell Hammett</h1>
</header>
</section>
<section id=”mickey-spillane”>
<header>
<h1>Mickey Spillane</h1>
</header>
</section>
</article>


<footer> <footer>
<h3>...</h3>
<p>...</p>
“…typically </footer>
contains
information about
<section class=”item”>
its section such <header>
as who wrote it, <h1>...</h1>
links to related </header>
<footer class=”meta”>...</footer>
documents, <div class=”content”>
copyright data, ...
</div>
and the like.”
<nav class=”links”>...</nav>
</section>


<nav> <nav>
<ul>
<li><a href=”/”>Home</a></li>
“...a section of a <li><a href=”/about”>About</a></li>
page that links to <li><a href=”/contact”>Contact</a></li>
</ul>
other pages or to </nav>
parts within the
page: a section
with navigation
links.”


<aside> <article>
<header>
<h1>Mickey Spillane</h1>
“...represents a
</header>
section of a page <footer>
that consists <p>Published by Andy Clarke on November
20th, 2010</p>
of content that </footer>
is tangentially <p>Frank Morrison Spillane, better known as
related to the Mickey Spillane… </p>
<aside>
content around it, <h2>My Gun Is Quick</h2>
and which could <p>Mickey Spillane’s second novel
featuring private investigator Mike Hammer.</p>
be considered
</aside>
separate from </article>
that content.”


<figure> & <dl class=”figure”>
<figcaption> <dt><img src=”jury.jpg” alt=”The Jury”></dt>
<dd>The Jury by Mickey Spillane</dd>
</dl>
“...some
flow content,
optionally with <figure>
<img src=”jury.jpg” alt=”I, The Jury”>
a caption, that is <img src=”gun.jpg” alt=”My Gun is Quick”>
self-contained <img src=”vengeance.jpg” alt=”Vengeance”>
<figcaption>Books by Mickey Spillane</figcaption>
and is typically
</figure>
referenced as a
single unit from
the main flow of
the document.”


<details> <details>
<summary>Log in</summary>
<form method=”post” action=”login”>
“…a disclosure <label for=”username”>Username</label>
widget from <input type=”text” name=”username”
id=”username”>
which the user can <label for=”password”>Password</label>
obtain additional <input type=”password” name=”password”
information or id=”password”>
</form>
controls.” </details>


Rich media
HTML is filling holes and doing away with the need
to use proprietary technologies and plug-ins

g The <canvas> element

g The <audio> element

g The <video> element


<canvas>
g Created by Apple

g The element itself is very simple

<canvas id=”my-first-canvas” width=”360” height=”240”>
<p>No canvas support? Have an old fashioned image
instead:</p>
<img src=”puppy.jpg” alt=”a cute puppy”>
</canvas>


<canvas> Cont...

g All the hard work is done in JavaScript

g The real power of canvas is that it’s content can be
updated at any moment based on the actions of the user

g Current accessibility issues. No DOM = no access to
screen readers. But being addressed.

g Should be used as an enhancement for existing content


<audio>
g HTML5 is taking on the Flash plug-in

<audio src=”audiotrack.mp3” autoplay loop controls>
</audio>

g You can use JavaScript to interact with the audio API

g Big problem with MP3 not being an open technology


<audio> Cont...

g Fall backs

<audio controls>
<source src=”soundfile.ogg” type=”audio/ogg”>
<source src=”soundfile.mp3” type=”audio/mp3”>
<object type=”application/x-shockwave-flash”
data=”player.swf?soundFile=soundfile.mp3”>
<param name=”movie”
value=”player.swf?soundFile=soundfile.mp3”>
<a href=”soundfile.mp3”>Download the song</a>
</object>
</audio>


<video>
g Works just like the audio element

<video src=”movie.mp4” controls width=”360” height=”240”
poster=”placeholder.jpg”>
</video>

g Even bloodier battleground for competing video formats

g MP4 is patent-encumbered also


<video> Cont...

<video controls width=”360” height=”240”
poster=”placeholder.jpg”>
<source src=”movie.ogv” type=”video/ogg”>
<source src=”movie.mp4” type=”video/mp4”>
<object type=”application/x-shockwave-flash”
width=”360” height=”240” data=”player.swf?file=movie.
mp4”>
<param name=”movie”
value=”player.swf?file=movie.mp4”>
<a href=”movie.mp4”>Download this movie</a>
</object>
</video>


<video> Cont...

g Pretty exciting to add video natively to web pages

g No sandbox issues, so plays nice with CSS and
JavaScript

g Actually styleable as well as scriptable


Using HTML5
today
g Using the new doctype, charset, input types and attributes
should not cause any issues at all.

g All the rich media elements have fallbacks so are safe to
use also.
g The new structural elements will need extra effort to
work cross-browser

Internet Exploer
To style the new elements with CSS


This tiny script creates elements in Internet Explorer’s DOM so we
can style them using CSS.


Further Reading
Hard
HTML5 Boiled
for web Web
designers Design
by Jeremy by Andy
Keith Clarke
http://books.alistapart.com/ http://hardboiledwebdesign.com/


Questions?


Matt Fielding
mattfielding.net
twitter.com/mattfielding

PANOETIC
®

WEBSITE DESIGN & DEVELOPMENT

panoetic.com
twitter.com/panoetic

HTML5 - What you need to know

Recomendados

Recomendados

Más contenido relacionado

Similar a HTML5 - What you need to know

Similar a HTML5 - What you need to know (20)

Último

Último (20)

HTML5 - What you need to know