HTML5: A brave new world of markup

2,428 views

Published on

HTML5 has arrived! The W3C published a new editor's draft at the start of 2011, and many of the new features detailed within have widespread support across all the latest major browsers. But what does it mean to you, the web developer on the street? Should you embrace it right now, and start using it to implement your own futuristic unicorns and rainbows? In this talk Chris Mills from the Opera web browser looks at some HTML5 history, how it improves upon HTML4, the basics of some of the major new features, such as new structural elements, new form controls, <video> and <canvas>, and how to produce an HTML5 site that will also function in older browsers.

Published in: Technology
  • Be the first to comment

HTML5: A brave new world of markup

  1. 1. HTML5: A brave new world of markup Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills
  2. 2. Who the hell am I?‣ Opera open standards evangelist and tech writer‣ Telling the world about open standards & Opera‣ Improving web education‣ Drinking beer & saving the world before morning‣ Drumming in a heavy metal band
  3. 3. What is HTML5?A new HTML spec that defines:‣ New semantic elements‣ New features such as native video, more powerful forms, web sockets‣ New APIs for controlling such features‣ Error handling, and other such useful things
  4. 4. Or according to the W3C...‣ HTML5‣ CSS3, WOFF‣ SVG, SMIL, WebGL‣ Geolocation, WAC‣ Indexed DB, File API‣ Server-sent events‣ Web workers, XHR2‣ & every other bloody open standard under the sun!
  5. 5. A brief history of HTML‣ HTML first proposed 1989-1991‣ HTML3 first standardised in 1995‣ HTML 4.01 standardised in 1999‣ Corrections submitted in 2001
  6. 6. HTML5 history‣ W3C decided the future was XHTML‣ This didn’t go down well, and no-one gave a rat’s ass about XHTML2‣ HTML5 (was web applications 1.0) started by WHATWG in 2004ish‣ Adopted by W3C 2008‣ WHATWG version became versionless in 2011
  7. 7. When should I use it?Now!‣ Most modern browsers support most of this stuff now‣ Workarounds are perfectly possible‣ You are already using HTML5 by using HTML4.x‣ Don’t wait till it’s completely finished
  8. 8. The UK road system isnever finished... http://www.flickr.com/photos/50014762@N03/4632637811/
  9. 9. There’s nothing wrong withHTML4... http://www.flickr.com/photos/birdfarm/519230710/
  10. 10. But HTML5 has more bling! As if! Not publishing this one...
  11. 11. HTML5 does not replaceHTML4‣ It’s backwards compatible‣ It fills up holes‣ It adds new markup and APIs‣ It competes with proprietary/plugin technology
  12. 12. HTML5 features‣ More accurate semantics (eg <header>, <footer>)‣ Better forms‣ <video>‣ <canvas>
  13. 13. HTML5 features‣ Drag and drop‣ Web workers‣ Web storage, webdb, AppCache‣ ...aaand more.
  14. 14. Not HTML5, but as good as‣ Geolocation‣ Web sockets
  15. 15. HTML is the new HTML5?In January 2011, Ian Hickson announced that theWHATWG HTML5 spec was dropping its versionnumber, and becoming a living spec that couldkeep being added to, as more features came tofruition. The W3C version is keeping its versionnumber, and acting as a snapshot.
  16. 16. New syntax: bettersemantics http://www.flickr.com/photos/zscheyge/49012397/
  17. 17. HTML5 doctype<!doctype
html>
  18. 18. Typical website structure<div
id=”header”></div><div
id=”nav”></div><div
id=”main”>

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

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



...</div><div
id=”footer”></div>
  19. 19. Most common classes andIDs?Ian Hickson did a study at Google of the mostcommon classes and IDs on the Web. so didOpera‣ http://code.google.com/webstats/2005-12/ classes.html‣ http://devfiles.myopera.com/articles/572/idlist- url.htm‣ http://devfiles.myopera.com/articles/572/ classlist-url.htm
  20. 20. Most common IDs
  21. 21. Most common classes
  22. 22. HTML5 update<header></header><nav></nav><section
id=”main”>

<article></article>

<article></article>



...</section><footer></footer>
  23. 23. <header> and <footer><header>
 <h1>Top
level
heading</h1></header>
 

<footer>

<p>&copy;2011
Chris
Mills
examples</p></footer>
  24. 24. <section> and <article><section
id=”main”>

<article>
 

...
 </article>
 <article>
 


...
 </article></section>
  25. 25. <nav><nav>

<ul>



<li><a
href=”#article1”>First
article</a></li>



<li><a
href=”#article2”>Second
article</a></li>



<li><a
href=”#article3”>Third
article</a></li>
 </ul></nav>
  26. 26. <aside><aside>

<h2>About
the
author</h2>
 

<p>Chris
Mills
is
a
front‐end
bling
junkie




working
for
Opera
Software...</p></aside>
  27. 27. <time><p>Article
published
on
the


<time
datetime=”2011‐03‐12T09:48”>



12th
March
2011,
at
9:48am

</time></p>
  28. 28. <hgroup><hgroup>

<h1>Top
level
heading</h1>

<h2>This
is
a
really
descriptive
subtitle</h2></hgroup>
  29. 29. <figure> and <figcaption><figure>

<img
src=”bear.jpg”






alt=”this
is
the
bear
that
I
wrestled”
/>

<figcaption>This
is
the
bear
that
I

wrestled.</figcaption></figure>
  30. 30. Where does this leave thehumble <div>?Use it for anything that isn’t covered by other newelements, and is just a general grouping, e.g. forstyling purposes, for which you don’t want tocreate a new section. An intro <div>, perhaps?
  31. 31. The HTML5 outliningalgorithmHeading/section hierarchy based on sectioningelement hierarchy, not <hx> elements used‣ No longer limited to six heading levels‣ Hierarchy stays correct when syndicated‣ You can retain HTML4 heading levels for backwards compatibility
  32. 32. The HTML5 outliningalgorithm<h1>My
title</h1><div>

<h2>My
subtitle</h2></div><h1>My
title</h1><section>

<h2>My
subtitle</h2></section>
  33. 33. New semantics rock!‣ Better machine readability‣ Better interoperability‣ Better accessibility (once screen readers catch up; WAI-ARIA is a stopgap)‣ Leaner markup that is easier to style‣ More in keeping with what real webdevs do
  34. 34. Browsers don’t ACTUALLYsupport these ... yetBut we can get them displaying ok‣ You can style any element with CSS, even if the browser doesn’t recognise it‣ Give all the structural elements display: block;‣ IE also needs some scripting: createElement(‘article’);‣ HTML5Shiv sorts it better
  35. 35. How do we get this workingacross browsers?article,
section,
aside
{

display:
block;}
  36. 36. How do we get this workingacross browsers?<script>

document.createElement(article);

document.createElement(section);

document.createElement(aside);



</script>
  37. 37. Lax syntax?Some say that HTML5 syntax is really lax — you:‣ don’t need to quote attributes‣ can minimize attributes‣ don’t need to self close‣ can mix upper and lower case‣ You don’t even need to include <html>, <head> and <body>!
  38. 38. Lax syntax?But this more accurately reflects what realdevelopers do, rather than what the XHTML specTHINKS they should‣ You can use the style you want (although you should stick to some best practices)‣ The browser fills in a lot of this stuff‣ The HTML5 spec defines how errors should be handled
  39. 39. HTML5 formsPreviously called Web Forms 2.0‣ More powerful form controls‣ Built-in validation
  40. 40. Slider<input
type=”range”
/>
  41. 41. Date-time controls<input
type=date><input
type=datetime><input
type=week><input
type=month>
  42. 42. number<input
type=number>
  43. 43. color<input
type=color>
  44. 44. Search boxes<input
type=search>
  45. 45. Datalist<input
type=”text”
list=”mydata”><datalist
id=”mydata”>

<option
label=”Mr”
value=”Mister”>

<option
label=”Mrs”
value=”Mistress”>

<option
label=”Ms”
value=”Miss”></datalist>
  46. 46. Other new input types<input
type=”email”><input
type=”url”><input
type=”tel”>
  47. 47. ValidationForm validation used to be horrendous
  48. 48. function
validate()
{


var
str
=
“”;


var
elements
=
document.getElementsByTagName(input);



//
loop
through
all
input
elements
in
form


for(var
i
=
0;
i
<
elements.length;
i++)
{





//
check
if
element
is
mandatory;
ie
has
a
pattern





var
pattern
=
elements.item(i).getAttribute(pattern);




if
(pattern
!=
null)
{






var
value
=
elements.item(i).value;







//
validate
the
value
of
this
element,
using
its
defined
pattern






var
offendingChar
=
value.match(pattern);







//
if
an
invalid
character
is
found
or
the
element
was
left
empty






if(offendingChar
!=
null
||
value.length
==
0)
{









//
add
up
all
error
messages








str
+=
elements.item(i).getAttribute(errorMsg)
+
“n”
+















“Found
this
illegal
value:
”
+
offendingChar
+
“
n”;









//
notify
user
by
changing
background
color,
in
this
case
to
red








elements.item(i).style.background
=
“red”;







}




}


}




if
(str
!=
“”)
{




//
do
not
submit
the
form




alert(”ERROR
ALERT!!n”
+str);





return
false;


}
else
{




//
form
values
are
valid;
submit


  49. 49. HTML5 gives you this<input
type=”text”
required>
  50. 50. And this<input
type=”text”
required







pattern=”[A‐z]{1,20}
[A‐z]{1,20}”>
  51. 51. Other new attributesautofocusplaceholderminmaxstep
  52. 52. autofocus, placeholder<input
type=”text”
...
placeholder=”Enter
first
then
last
name”
autofocus
/>
  53. 53. min, max and step<input
type=”range”
...
min=”1.00”
max=”2.50”
step=”0.01”
value=”1”
/>
  54. 54. New output mechanisms<output><progress><meter>
  55. 55. <output><input
type=”range”
id=”height”
name=”height”
required
min=”1.00”
max=”2.50”
step=”0.01”
value=”1”
/><output
onforminput=”value=height.value”
for=”height”>1</output>m
  56. 56. <progress><progress
id=”progress”
value=”25”
max=”100”><span>25</span>%</progress>
  57. 57. <meter><meter
min=”0”
value=”50.3”
max=”232.57”>50.3
GB
used
out
of
232.57
GB</meter>
  58. 58. <canvas>Scriptable graphics‣ Standard API for drawing‣ Supporting across all modern browsers
  59. 59. The basics<canvas
id=”canvas”
width=”400”
height=”300”>

...fallback...</canvas>
  60. 60. The basicsvar
ctx
=
document.getElementById(canvas).getContext(2d);ctx.fillStylectx.fillRect
  61. 61. <canvas> examples‣ http://dev.opera.com/articles/view/html-5- canvas-the-basics/‣ http://ejohn.org/blog/processingjs/‣ http://www.hakim.se/experiments/‣ http://www.canvasdemos.com/‣ http://people.opera.com/patrickl/experiments/ canvas/particle/3/
  62. 62. <video> and <audio>New elements, plus new API for controlling audioand video
  63. 63. The old school way<object
width=”425”
height=”344”><param
name=”movie”

value=”http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1”></param><param
name=”allowFullScreen”
value=”true”></param><embed
src=”http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1”

type=”application/x‐shockwave‐flash”

allowfullscreen=”true”
width=”425”
height=”344”></embed></object>
  64. 64. The badass sexy new way<video></video>
  65. 65. Point to the video<video
src=”video.webm”></video>
  66. 66. width and height<video
src=”video.webm”






width=”480px”






height=”283px”></video>
  67. 67. Add controls<video
src=”video.webm”






width=”480px”






height=”283px”






controls></video>
  68. 68. A poster to front the video<video
src=”video.webm”






width=”480px”






height=”283px”






controls






poster=”video.jpg”></video>
  69. 69. autoplay and loop<video
src=”video.webm”






width=”480px”






height=”283px”






controls






poster=”poster.png”






autoplay






loop></video>
  70. 70. Fallback<video
src=”video.webm”






width=”480px”






height=”283px”






controls






poster=”poster.png”






autoplay






loop>

<p>Your
browser
doesn’t
support
HTML5
video.
<a
href=”myVideo.webm”>Download
the
video
instead</a>.</p></video>
  71. 71. Native <video> is awesome!‣ Works well with other open standards‣ Built-in keyboard accessibility‣ API for customizing controls, etc.‣ Doesn’t require plugins!
  72. 72. What’s bad about <video>?‣ People can download <video> easily‣ That old cross browser chestnut‣ Captioning and suchlike is at an early stage
  73. 73. Browser support‣ Opera: Ogg since 10.5, WebM since 10.60‣ Firefox: Ogg since 3.5, WebM since 4‣ Chrome: Ogg since 3.0, WebM since 6.0‣ IE: MP4 since 9.0‣ Safari: MP4 + anything else Quicktime supports since 3.0
  74. 74. Adding different formats<source
src=”video.mp4”
type=”video/mp4”><source
src=”video.webm”
type=”video/webm”>
  75. 75. Adding a Flash fallback<object
type=”application/x‐shockwave‐flash”
data=”player.swf”
width=”480”
height=”283”>

<param
name=”allowfullscreen”
value=”true”>

<param
name=”allowscriptaccess”
value=”always”>

<param
name=”flashvars”
value=”file=video.mp4”>


 


<!‐‐[if
IE]><param
name=”movie”
value=”player.swf”><![endif]‐‐>

<img
src=”video.jpg”
width=”480”
height=”283”
alt=”Video”></object>
  76. 76. Some stuff is not as easy‣ WebSRT exists for captioning, but is at an early stage‣ There is no easy cue points mechanism‣ But such problems can be solved using JavaScript
  77. 77. Video captions #1<video></video><div
class=transcript>




<p>Hello,
Good
Evening
and
Welcome</p>





<p>Tonight
on
the
Jeremy
Kyle
show
...</p>










....</div>
  78. 78. Video captions #2<div
class=transcript>





<p><span>Hello,
Good
Evening</span>





<span>
and
Welcome.</span></p>






<p><span>Tonight
on
the
Jeremy
Kyle
show
...</span>






</p>










....
</div>
  79. 79. Video captions #3<p>


<span
data‐begin=1
data‐end=2.4>Hello,
Good
Evening</span>



<span
data‐begin=3
data‐end=3.6>
and
Welcome.</span></p>
  80. 80. Video captions #4function
timeupdate()
{



var
v
=
document.querySelector(video);



var
now
=
v.currentTime;

…}
<video
width=600
src=synergy.webm
ontimeupdate=timeupdate()>
  81. 81. So much more to cover!‣ AppCache‣ WebSQL‣ Web sockets‣ Web workers‣ Web storage
  82. 82. Thanks for listening!‣ cmills@opera.com‣ @chrisdavidmills‣ http://dev.opera.com/articles/tags/html5/‣ http://html5doctor.com

×