HTML5: Markup Evolved

HTML5: Markup Evolved
y lton
y H 010
Bill C 2
CT

2022

“Candidate Recommendation” for W3C.
Ian Hickson, HTML5 Editor

1991 “HTML
1999 HTML 4.0 2000 XHTML
Tags”

2004 XHTML2 2009 W3C &
vs. HTML5 WHATWG UNITE 2010 HTML5

HTML5 Principles
Support existing content

Degrade gracefully

Don’t reinvent the wheel

Pave the cowpaths

Evolution, not revolution
“Revolutions sometimes change the world to the better. Most
often, however, it is better to evolve an existing design
rather than throwing it away.”
-- W3C

us ers r
si der rs ove
ct, con nte .”
i
onﬂ r imple l pu me rity
fc
e o s ove
c as r ret ica
“In autho rt heo
ov er so ve enc ies>
ciﬁ er stitu
sp e ty of con
r
<p iori

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

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

<!DOCTYPE html>

<HEADER>

<NAV>

<SECTION>

<ARTICLE> <ASIDE>

Ready to start using new
<FOOTER> markup?

1) Declare as “Block” in CSS

2) Add Remy’s script for IE

Obsolete (not “Deprecated”)
Frames (Woot!) , Frameset, Font, Big, Center,
Strike, Cellpadding, Cellspacing, Valign

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');

context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 5;
context.shadowColor = "#666";
context.fillStyle = “#ccc”;
context.fillRect (0, 0, 150,100);

<p><canvas id="myCanvas" width="300"
height="300">Your browser does not have support for
canvas. Insert sad trombone .wav file.</p>

Audio
MP3 and .OGG required today

Use <source>

Attributes: autoplay, controls, preload, src

<audio controls preload=”none”>

<source src="file.ogg" type=”audio/.ogg”/>

<source src="file.mp3" type=”audio/.mp3”/>
</audio>

Audio
MP3 and .OGG required today

Use <source>

Attributes: autoplay, controls, preload, src

“Graceful degradation”
<audio controls preload=”none”>

<source src="file.ogg" type=”audio/ogg”/> If HTML5 is not supported

<source src="file.mp3" type=”audio/mp3”/> fallback to Flash and
ﬁle download.
<object type=”application/x-shockwave-flash”
data=”player.swf?soundFile=file.mp3”>
<param name=”movie” value=”player.swf?sound
File=file.mp3”>

<a href=”file.mp3”>Download MP3 file</a>

</audio>

Video
.MP4, .OGV, and .Webm required today

.Webm = new open format. Game changer?

Attributes: autoplay, controls, height, width,
preload, loop
<video controls poster=”image.jpg”
width=”360” height=”240”>
Use “Poster” attribute to

display a frame of the video
<source src="video.ogv" type=”video/ogg”/>
<source src=”video.mp4" type=”video/mp4”/>
<source src=”video.webm"type=”video/webm”/>

<object type=”application/x-shockwave-flash”
width=”360” height=”240”
data=”player.swf?soundFile=video.mp4”>
<param name=”movie” value=”player.swf?sound
File=video.mp4”>

<a href=”video.mp4”>Download video</a>

</video>

Placeholder

<input placeholder="search">

Attribute can only contain text (no HTML)

Ignored if not supported by browsers

Can use a JavaScript fallback solution

Autofocus
Automatically focus on a form ﬁeld

<input type= "text" autofocus>

Ignored if not supported by browsers

Can use a JavaScript fallback solution

Required*
Simple client-side form validation

<input type= "text" required>

Does not prevent browsers from
submitting forms

User Interface

Replace JavaScript widgets

Sliders

Date Pickers

Color pickers

(Boo. Not much browser support today.)

JavaScript Goodness

Drag and Drop w/o
tons of JS

Geolocation

Ofﬂine Apps
(Goodbye Google
Gears)

Local Storage
(Goodbye cookies?)

This is How I Role.

<header role= "banner" >

Structural: banner, contentinfo, main, navigation,
note, search

Widget: alert, checkbox, dialog, radio, scrollbar,
slider, tab, textbox,

Next Steps
✓ Be ﬂexible and embrace change.
✓ Dive in.
✓ Modify doctype.
✓ Add new structural elements.
✓ Experiment with canvas, audio, and video (probably
too early for primetime).

✓ Learn about parallel developments such as
microformats and ARIA.

Resources

SitePoint HTML5 Course
http://sitepoint.com/

HTML5 For Web Designers
http://books.alistapart.com/

Slideshare HTML Presentations
http://www.slideshare.net/

Dive Into HTML5
http://diveintohtml5.org/

Smashing Magazine
http://www.smashingmagazine.com/

Think Vitamin
http://thinkvitamin.com/category/code/html5/

Thanks CTC!

Billy Hylton
email: billy_hylton@unc.edu
web: www.publicrealm.com
linkedin: www.linkedin.com/in/billyhylton

Credits
All Images Creative Commons (“Attribution-NonCommercial”)

VW Van Whiteboard
http://www.flickr.com/photos/vwbuses/2942624949/ http://www.flickr.com/photos/justinavery/5011173415/
sizes/o/in/photostream/ sizes/l/in/photostream/

Tim Berners-Lee Headphones
http://www.flickr.com/photos/j-o-n-o/151830908/ http://www.flickr.com/photos/livingtheliminal/
4242548616/#/

Fist
http://www.flickr.com/photos/ Video
24063093@N07/3983882921/sizes/l/in/photostream/ http://www.flickr.com/photos/spierisf/4481100942/
sizes/l/in/photostream/

Gloves
http://www.flickr.com/photos/atlnav/369536486/
Crayons
http://www.flickr.com/photos/rajarshi/4367150939

HTML5: Markup Evolved

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (8)

Similar a HTML5: Markup Evolved

Similar a HTML5: Markup Evolved (20)

Último

Último (20)

HTML5: Markup Evolved

Notas del editor