Html5, a gentle introduction


Published on

A gentle introduction to HTML 5. A look at the new tags, semantic changes, and how to transition to html 5.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • Html5, a gentle introduction

    1. 1. html 5 a gentle introduction
    2. 2. Sorry No APIs today
    3. 3. Just a big tag soup
    4. 4. A Doctype you can remember in your head Before: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1/DTD/xhtml1-transitional.dtd"> After <!DOCTYPE html>
    5. 5. Cleaner meta Before <meta http-equiv=”content-type” content=”text/html” charset=”uft-8”> after <meta charset=”utf-8”> (works now)
    6. 6. Not xml <meta charset=”utf-8”> <meta charset=”utf-8” /> <meta CHARset=utf-8 /> <META CHARSET=UTf-8> It’s all good
    7. 7. HTML5 Transitioning
    8. 8. 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
    9. 9. 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
    10. 10. 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
    11. 11. HTML5 transition: XHTML compatibility Self close empty HTML4 tags: <meta /> <link /><br /> etc.. Attribute values are always quoted “” || ‘’
    12. 12. The minimal requirements HTML5 <!DOCTYPE html> <meta charset=”utf-8”> <title>My Page</title> <p>any other content</p>
    13. 13. The minimal requirements for a consistent DOM with XHTML <!DOCTYPE html> <html> <head> <meta charset=”utf-8”> <title>My Page</title> </head> <body> <p>any other content</p> </body> </html>
    14. 14. The minimal requirements for a consistent DOM with XHTML <table> <tbody> <tr> <td>....</td> </tr> </tbody> </table>
    15. 15. 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”/>
    16. 16. 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
    17. 17. 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.
    18. 18. HTML5 transition: un-deprecated <iframe> => nested html <embed> => for plugins target attribute (<base target> <a target> <area target>) <li value> <ol start> <ol><ul> can now have 0 items <ol reversed>
    19. 19. 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>
    20. 20. Microsoft WIN contenteditable contenteditable is now officially 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.
    21. 21. 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
    22. 22. unsupported tags <menu>, <command contextmenu> to define 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.
    23. 23. HTML5 new elements off the block
    24. 24. We all use these <div (id|class)=”header”> <div (id|class) =”nav”> <div (id|class) =”sidebar”> <div (id|class) =”article”> <div (id|class) =”footer”> <div (id|class) =”content”>
    25. 25. And here is the proof
    26. 26. 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
    27. 27. 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 {float:left; width: 20%; } article {float:right; width: 79%; } footer {clear: both;}
    28. 28. 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>
    29. 29. <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>
    30. 30. <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> <h2>My awesome post</h2> </header> <p>Yeah right</p> <div class=”meta”> Posted in awesomeness </meta> </article>
    31. 31. Like-wise for <footer> Headers can be used also to specify heading of sections or articles <article> <header> <h2>My awesome post</h2> </header> <p>Yeah right</p> <footer> Posted in awesomeness </footer> </article>
    32. 32. 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.”
    33. 33. <Time> [datetime] Valid formats: YYYY-MM-DD, HH:MM, or full with date and time and timezone <article> .... <footer> Posted in awesomeness on <time datetime=”2010-11-13T12:00:00.001-04:00”>1 millisecond past midnight</time> </footer> </article>
    34. 34. <Time> [pubdate] pubdate is a boolean attribute that indicates the publication date of an <article> or the whole <body> content <article> <footer> Posted in awesomeness on <time datetime=”2010-11-13T12:00:00.001-04:00” pubdate>1 millisecond past midnight</time> </footer> </article>
    35. 35. <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>
    36. 36. 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.”
    37. 37. <NAV> <header> <a href=”/”><img src=logo.png /></a> <nav> <ul> <li><a href=... </li> <li><a href=... </li> </ul> </nav> </header>
    38. 38. or <NAV> <header> <a href=”/”><img src=logo.png /></a> </header> <nav> <ul> <li><a href=... </li> <li><a href=... </li> </ul> </nav>
    39. 39. or multiple <NAV>s <header> <a href=”/”><img src=logo.png /></a> <nav> .... </nav> </header> <aside> <nav> .... </nav> </aside>
    40. 40. footer <NAV>? The specs suggests that the “legal” links and usually footer links not be wrapped in <nav> but it’s debatable and debated
    41. 41. <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.
    42. 42. <DETAILS> a disclosure widget from which the user can obtain additional information or controls. (not implemented yet) Provides a expanding/collapsing area. The first child should be a <summary> element followed by flow elements. <details open> to make it default to the open state
    43. 43. <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>
    44. 44. <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.
    45. 45. <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.
    46. 46. <RUBY> best practices <ruby> <rp>(</rp><rt> </rt><rp>)</rp> <rp>(</rp><rt> </rt><rp>)</rp> </ruby> Non compliant browsers will render ( ) ( )
    47. 47. HTML5 Outlining algorithm
    48. 48. Everything is a section These are sectioning content tags: <article> <section> <nav> <aside>
    49. 49. WHAT???
    50. 50. Let’s look at the outline <h1>Hello</h1> <div> 1. Hello <h1>world</h1> 2. world </div>
    51. 51. Now with sectioning <h1>Hello</h1> <article> 1. Hello <h1>world</h1> 1. world </article>
    52. 52. Heading values don’t mean $#!t <h6>Hello</h6> <article> 1. Hello <h1>world</h1> 1. world </article>
    53. 53. Not having a headline Still counts <h6>Hello</h6> <article> 1. Hello <p>world</p> 1. Untitled </article> Section
    54. 54. 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 @
    55. 55. 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
    56. 56. Sectioning Roots <blockquote> <fieldset> Can have their own <body> <figure> outline but don’t <details> <td> contribute to ancestors’ outlines
    57. 57. Sectioning Roots <h6>Hello</h6> <article> <h1>world</h1> <blockquote> 1. Hello <h1>Sucka!</h1> 1. world </blockquote> </article>
    58. 58. Article vs Section Articles are self contained pieces of content that can be Sections are not! redistributed and be fine.
    59. 59. Article vs Section An article can have many sections just as well as a page can have many sections which wrap many articles.
    60. 60. HTML5 me love forms long time
    61. 61. MOM look at me, I am outside a form <form id=”foo”> <select> ... </select> </form> ..... <input type=”submit” form=”foo">
    62. 62. 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”>
    63. 63. 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
    64. 64. 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>
    65. 65. HTML5 the media whore
    66. 66. <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>
    67. 67. <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
    68. 68. 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.
    69. 69. preload the <VIDEO> preload=auto or just preload preload=none preload=metadata
    70. 70. 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>
    71. 71. The downfall of <VIDEO>
    72. 72. 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”’> <!-- fallback --> <p>Please download the video in <a href=”video.ogv”>Ogg</a> or <a href=”video.mp4”> format.</p> </video>
    73. 73. 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-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”320” height=”240”> </video>
    74. 74. 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.pause() and more */
    75. 75. What’s next all the stuff I didn’t have time to create slides for
    76. 76. The cool stuff Canvas Data Storage Web Storage - key value store supported in latest browsers Web SQL Database - Opera, Chrome, Safari Offline browsing - Drag & Drop - GeoLocation - Messages, Workers and WebSockets
    77. 77. even cooler stuff bleeding edge or (vaporware) microdata - HTML Device -
    78. 78. Thanks Diego Scataglini