Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Brave new world of HTML5

Avatar for Chris Mills Chris Mills
August 24, 2011
Programming
3
130

Brave new world of HTML5

In this presentation, given at a Dundee Web Standards Group meeting in March 2011, Chris Mills gives a high level overview of HTML. He goes through its history, the reasons it was created, and then looks at the different HTML5 features that have reasonable support across browsers, and why they are so good for web developers.

Avatar for Chris Mills

Chris Mills

August 24, 2011
Tweet

Other Decks in Programming

See All in Programming
検索機能リプレイスを4ヶ月→2ヶ月に！ AI Agentで実現した2倍速リプレイス
Avatar for Maple fuuki12
3
620
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
Avatar for Keisuke Kobayashi kobakei
0
200
「社内LT会」を1年続けてみた！ / Our Year-Long Journey of Internal Lightning Talks
Avatar for mackey0225 mackey0225
1
100
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
Avatar for Tetta Noguchi tetta_pdnt
0
6.5k
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
Avatar for Daichi Takeya taked137
0
210
CSS Linter の現在地 2025年のベストプラクティスを探る
Avatar for mattsuu ryo_manba
8
2.6k
請來的 AI Agent 同事們在寫程式時，怎麼用 pytest 去除各種幻想與盲點
Avatar for Keith Yang keitheis
0
140
GoogleI/O2025 LT報告会資料
Avatar for shinsuke-fujita shinsukefujita1126
0
160
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
Avatar for Andrey Chernov inetand
0
5.7k
Swift Updates - Learn Languages 2025
Avatar for Yuta Koshizawa koher
2
550
ファインディ株式会社におけるMCP活用とサービス開発
Avatar for starfish719 starfish719
0
2.5k
パフォーマンスチューニングで Web 技術を深掘り直す
Avatar for Shunsuke Mano progfay
16
4.2k

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
840
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
513
110k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k

Transcript

  1. HTML5: A brave new world of markup Chris Mills, Opera

    Software Wednesday, 24 August 2011

  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 Wednesday, 24 August 2011

  3. Wednesday, 24 August 2011

  4. 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 Wednesday, 24 August 2011

  5. 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! Wednesday, 24 August 2011

  6. 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 Wednesday, 24 August 2011

  7. 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 Wednesday, 24 August 2011

  8. 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 Wednesday, 24 August 2011

  9. The UK road system is never finished... http://www.flickr.com/photos/50014762@N03/4632637811/ Wednesday, 24

    August 2011

  10. There’s nothing wrong with HTML4... http://www.flickr.com/photos/birdfarm/519230710/ Wednesday, 24 August 2011

  11. But HTML5 has more bling! As if! Not publishing this

    one... Wednesday, 24 August 2011

  12. HTML5 does not replace HTML4 ‣It’s backwards compatible ‣It fills

    up holes ‣It adds new markup and APIs ‣It competes with proprietary/plugin technology Wednesday, 24 August 2011

  13. HTML5 features ‣More accurate semantics (eg <header>, <footer>) ‣Better forms

    ‣<video> ‣<canvas> Wednesday, 24 August 2011

  14. HTML5 features ‣Drag and drop ‣Web workers ‣Web storage, webdb,

    AppCache ‣...aaand more. Wednesday, 24 August 2011

  15. Not HTML5, but as good as ‣Geolocation ‣Web sockets Wednesday,

    24 August 2011

  16. HTML is the new HTML5? In January 2011, Ian Hickson

    announced that the WHATWG HTML5 spec was dropping its version number, and becoming a living spec that could keep being added to, as more features came to fruition. The W3C version is keeping its version number, and acting as a snapshot. Wednesday, 24 August 2011

  17. New syntax: better semantics http://www.flickr.com/photos/zscheyge/49012397/ Wednesday, 24 August 2011

  18. HTML5 doctype <!doctype  html> Wednesday, 24 August 2011

  19. 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> Wednesday, 24 August 2011

  20. Most common classes and IDs? Ian Hickson did a study

    at Google of the most common classes and IDs on the Web. so did Opera ‣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 Wednesday, 24 August 2011

  21. Most common IDs Wednesday, 24 August 2011

  22. Most common classes Wednesday, 24 August 2011

  23. HTML5 update <header></header> <nav></nav> <section  id=”main”>    <article></article>    <article></article>

           ... </section> <footer></footer> Wednesday, 24 August 2011

  24. <header> and <footer> <header>   <h1>Top  level  heading</h1> </header>  

        <footer>    <p>&copy;2011  Chris  Mills  examples</p> </footer> Wednesday, 24 August 2011

  25. <section> and <article> <section  id=”main”>    <article>      ...

      </article>   <article>        ...   </article> </section> Wednesday, 24 August 2011

  26. <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> Wednesday, 24 August 2011

  27. <aside> <aside>    <h2>About  the  author</h2>      <p>Chris  Mills

     is  a  front-­‐end  bling  junkie          working  for  Opera  Software...</p> </aside> Wednesday, 24 August 2011

  28. <time> <p>Article  published  on  the      <time  datetime=”2011-­‐03-­‐12T09:48”>  

         12th  March  2011,  at  9:48am    </time> </p> Wednesday, 24 August 2011

  29. <hgroup> <hgroup>    <h1>Top  level  heading</h1>    <h2>This  is  a

     really  descriptive  subtitle</h2> </hgroup> Wednesday, 24 August 2011

  30. <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> Wednesday, 24 August 2011

  31. Where does this leave the humble <div>? Use it for

    anything that isn’t covered by other new elements, and is just a general grouping, e.g. for styling purposes, for which you don’t want to create a new section. An intro <div>, perhaps? Wednesday, 24 August 2011

  32. The HTML5 outlining algorithm Heading/section hierarchy based on sectioning element

    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 Wednesday, 24 August 2011

  33. The HTML5 outlining algorithm <h1>My  title</h1> <div>    <h2>My  subtitle</h2>

    </div> <h1>My  title</h1> <section>    <h2>My  subtitle</h2> </section> Wednesday, 24 August 2011

  34. 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 Wednesday, 24 August 2011

  35. Browsers don’t ACTUALLY support these ... yet But 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 Wednesday, 24 August 2011

  36. How do we get this working across browsers? article,  section,

     aside  {    display:  block; } Wednesday, 24 August 2011

  37. How do we get this working across browsers? <script>  

     document.createElement('article');    document.createElement('section');    document.createElement('aside');         </script> Wednesday, 24 August 2011

  38. 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>! Wednesday, 24 August 2011

  39. Lax syntax? But this more accurately reflects what real developers

    do, rather than what the XHTML spec THINKS 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 Wednesday, 24 August 2011

  40. HTML5 forms Previously called Web Forms 2.0 ‣More powerful form

    controls ‣Built-in validation Wednesday, 24 August 2011

  41. Slider <input  type=”range”  /> Wednesday, 24 August 2011

  42. Date-time controls <input  type=date> <input  type=datetime> <input  type=week> <input  type=month>

    Wednesday, 24 August 2011

  43. number <input  type=number> Wednesday, 24 August 2011

  44. color <input  type=color> Wednesday, 24 August 2011

  45. Search boxes <input  type=search> Wednesday, 24 August 2011

  46. 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> Wednesday, 24 August 2011

  47. Other new input types <input  type=”email”> <input  type=”url”> <input  type=”tel”>

    Wednesday, 24 August 2011

  48. Validation Form validation used to be horrendous Wednesday, 24 August

    2011

  49. 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          return  true;     Wednesday, 24 August 2011

  50. HTML5 gives you this <input  type=”text”  required> Wednesday, 24 August

    2011

  51. And this <input  type=”text”  required          

         pattern=”[A-­‐z]{1,20}  [A-­‐z]{1,20}”> Wednesday, 24 August 2011

  52. Other new attributes autofocus placeholder min max step Wednesday, 24

    August 2011

  53. autofocus, placeholder <input  type=”text”  ...  placeholder=”Enter  first   then  last

     name”  autofocus  /> Wednesday, 24 August 2011

  54. min, max and step <input  type=”range”  ...  min=”1.00”  max=”2.50”  

    step=”0.01”  value=”1”  /> Wednesday, 24 August 2011

  55. New output mechanisms <output> <progress> <meter> Wednesday, 24 August 2011

  56. <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 Wednesday, 24 August 2011

  57. <progress> <progress  id=”progress”  value=”25”  max=”100”> <span>25</span>% </progress> Wednesday, 24 August

    2011

  58. <meter> <meter  min=”0”  value=”50.3”  max=”232.57”> 50.3  GB  used  out  of

     232.57  GB </meter> Wednesday, 24 August 2011

  59. <canvas> Scriptable graphics ‣Standard API for drawing ‣Supporting across all

    modern browsers Wednesday, 24 August 2011

  60. The basics <canvas  id=”canvas”  width=”400”  height=”300”>    ...fallback... </canvas> Wednesday,

    24 August 2011

  61. The basics var  ctx  =  document.getElementById ('canvas').getContext('2d'); ctx.fillStyle ctx.fillRect Wednesday,

    24 August 2011

  62. <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/ Wednesday,

    24 August 2011

  63. <video> and <audio> New elements, plus new API for controlling

    audio and video Wednesday, 24 August 2011

  64. 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> Wednesday, 24 August 2011

  65. The badass sexy new way <video></video> Wednesday, 24 August 2011

  66. Point to the video <video  src=”video.webm”> </video> Wednesday, 24 August

    2011

  67. width and height <video  src=”video.webm”          

       width=”480px”              height=”283px”> </video> Wednesday, 24 August 2011

  68. Add controls <video  src=”video.webm”            

     width=”480px”              height=”283px”              controls> </video> Wednesday, 24 August 2011

  69. A poster to front the video <video  src=”video.webm”    

             width=”480px”              height=”283px”              controls              poster=”video.jpg”> </video> Wednesday, 24 August 2011

  70. autoplay and loop <video  src=”video.webm”          

       width=”480px”              height=”283px”              controls              poster=”poster.png”              autoplay              loop> </video> Wednesday, 24 August 2011

  71. 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> Wednesday, 24 August 2011

  72. Native <video> is awesome! ‣Works well with other open standards

    ‣Built-in keyboard accessibility ‣API for customizing controls, etc. ‣Doesn’t require plugins! Wednesday, 24 August 2011

  73. What’s bad about <video>? ‣People can download <video> easily ‣That

    old cross browser chestnut ‣Captioning and suchlike is at an early stage Wednesday, 24 August 2011

  74. 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 Wednesday, 24 August 2011

  75. Adding different formats <source  src=”video.mp4”  type=”video/mp4”> <source  src=”video.webm”  type=”video/webm”> Wednesday,

    24 August 2011

  76. 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> Wednesday, 24 August 2011

  77. 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 Wednesday, 24 August 2011

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

     <p>Hello,  Good  Evening  and  Welcome</p>            <p>Tonight  on  the  Jeremy  Kyle  show  ...</p>                      .... </div> Wednesday, 24 August 2011

  79. 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> Wednesday, 24 August 2011

  80. 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> Wednesday, 24 August 2011

  81. Video captions #4 function  timeupdate()  {        var

     v  =  document.querySelector('video');        var  now  =  v.currentTime;    … }   <video  width=600  src=synergy.webm   ontimeupdate=timeupdate()> Wednesday, 24 August 2011

  82. So much more to cover! ‣AppCache ‣WebSQL ‣Web sockets ‣Web

    workers ‣Web storage Wednesday, 24 August 2011

  83. Thanks for listening! ‣[email protected] ‣@chrisdavidmills ‣http://dev.opera.com/articles/tags/html5/ ‣http://html5doctor.com Wednesday, 24 August

    2011