HTML5 Semantic Web
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,299
On Slideshare
2,274
From Embeds
25
Number of Embeds
2

Actions

Shares
Downloads
29
Comments
0
Likes
2

Embeds 25

http://storify.com 22
http://localhost 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 Semantic Web
    Terry Ryan | Worldwide Developer Evangelist
    @tpryan
  • 2. Who are you?
    2
  • 3. Not Sexy and Adventurous
    3
  • 4. It’s everyday stuff
    4
  • 5. Agenda
    Introduction
    Overview of Semantics
    New Semantic elements
    New Semantic attributes
    New Form Input Types
    New Form attributes
    Pitfalls
    Conclusions
    5
  • 6. Overview
    6
    Semantics
  • 7. Semantic HTML means your markup describes it’s content without Presenting it
    7
  • 8. What do we mean by Semantic HTML
    HTML where proper elements are used
    <p> denotes paragraph
    <ul> denotes an list of items, where the order is not important
    <address> contains address information
    <div> and <span> are used to describe information
    HTML where extraneous elements are not misused
    No <p> for line breaking
    No <blockquote> for indentation
    No <h1> for big text
    HTML without presentation information
    No <font>, <b>, <i> tags
    No inline styles
    8
  • 9. Semantic HTML is a moving target
    Not Boolean
    Not always objective
    A continuum
    9
  • 10. Semantic HTML
    <body background="css/bg.png">
    <font face="Calibri”><center>
    <table width="800" bgcolor="#FFFFFF" border="10" bordercolor="#FFFFFF">
    <tr><td>
    <tablewidth="100%" bgcolor="#f0f0f0" border="0“>
    <tr>
    <td><h1>
    <fontface="Palatino Linotype">The Awesome Blog ofAwesome</font>
    </h1>
    </td>
    </tr>
    <tr>
    <td align="right"><p><i>Awesome is a State of Mind</i></p></td>
    </tr>
    </table>
    10
    <body>
    <div id="header">
    <h1>The Awesome Blog of Awesome</h1>
    <p class="tagline">Awesome is a State of Mind</p>
    </div>
    Relatively Unsemantic
    Relatively Semantic
  • 11. HTML5?
    11
    What does this have to do with HTML5?
  • 12. HTML5 adds more semantics
    <body>
    <header>
    <h1>The Awesome Blog of Awesome</h1>
    <p>Awesome is a State of Mind</p>
    </header>
    <nav>
    <ul>
    <li><ahref="">Home</a></li>
    <li><ahref="">Blog</a></li>
    <li><ahref="">About</a></li>
    <li><ahref="">Contact</a></li>
    </ul>
    </nav>
    12
  • 13. Introducing The Awesome Blog of Awesome
    13
    HTML5
    XHTML
  • 14. Elements
    14
  • 15. Header
    15
  • 16. Header
    <div id="header">
    <h1>The Awesome Blog of Awesome</h1>
    <p class="tagline">Awesome is a State of Mind</p>
    </div>
    16
    <header>
    <hgroup>
    <h1>The Awesome Blog of Awesome</h1>
    <h2>Awesome is a State of Mind</h2>
    </hgroup>
    </header>
    HTML 5
    Previously
  • 17. Hgroup?
    17
    What’s the <hgroup> all about?
  • 18. Hgroup
    18
    <hgroup>
    <h1></h1>
    <h2></h2>
    </hgroup>
    It’s for grouping related headers, that don’t spawn their own node in the outline
  • 19. Hgroup?
    19
    Huh?
  • 20. Effect of hgroup
    • H1 – Awesome Blog of Awesome
    • 21. H2 - Awesome is a State of Mind
    • 22. H2 - Recent Posts
    • 23. H3 I Made a Post Thingie
    • 24. H3 My Thoughts are made manifest
    20
    • H1 – Awesome Blog of Awesome
    • 25. H2 Recent Posts
    • 26. H3 I Made a Post Thingie
    • 27. H3 My Thoughts are made manifest
    No Hgroup
    With HGroup
  • 28. Hgroup?
    21
    Still huh?
  • 29. Outlines
    Outlines seem really important to the people who push semantic HTML 5
    Are they really important?
    Today: No
    Tomorrow: Who knows?
    But this is a semantically correct way of reducing classes and extraneous divs
    22
  • 30. Footer
    23
  • 31. Footer
    <div id="footer”>
    <p>Copyright 2011 - Terry Ryan</p>
    </div>
    24
    <footer>
    <p>Copyright 2011 - Terry Ryan</p>
    </footer>
    HTML 5
    Previously
  • 32. Navigation
    25
  • 33. Navigation
    <div id="nav">
    <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    </ul>
    </div>
    26
    <nav>
    <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    </ul>
    </nav>
    Previously
    HTML 5
  • 34. Articles
    27
  • 35. Articles
    <divclass="post”>
    <divclass="postheader">
    <h3><ahref="">I Scream My Thoughts</a></h3>
    <pclass="date">August 10, 2011</p>
    </div>
    <p>You probably haven't heard of them duis</p>
    </div>
    28
    <article>
    <header>
    <h1><ahref="">I Scream My Thoughts</a></h1>
    <time>August 10, 2011</time>
    </header>
    <p>You probably haven't heard of them duis</p>
    </article>
    Previously
    HTML5
  • 36. An article is a piece of content that can stand on it’s own
    29
  • 37. Date and Time
    <time datetime={datetime} pubdate>Human Readable String</time>
    Datetime
    Date: 2011-09-20
    Datetime: 2011-09-20T20:00Z
    Datetime: 2011-09-20T20:00+00:00
    Pubdate
    Used with article to denote that this particular time is the publication date.
    30
  • 38. Date Time
    31
    Just the
    letter T
    2011-09-20T20:00Z
    Z for
    Zulu Time
    Hours:Minutes
    Year-Month-Day
    Just the
    letter T
    2011-09-20T20:00+00:00
    Year-Month-Day
    Hours:Minutes
    Time Zone Offset
  • 39. Section?
    32
    There’s also this thing called “<section>” how does that work.
  • 40. An Article is a piece of stand-alone content
    33
  • 41. Blog Post
    34
  • 42. Or a comment
    35
  • 43. A section is a collection of related pieces of content
    36
  • 44. 37
  • 45. Articles can contain Sections
    38
  • 46. Blog Post
    39
    Article
    Section
    Section
    Section
  • 47. Sections can contain Articles
    40
  • 48. Articles can contain other articles
    41
  • 49. 42
    Article
    Section
    Section
    Section
    Article
    Article
  • 50. Content
    43
  • 51. Content
    <divclass=”content”>
    <divclass="post”>
    ...
    </div>
    <divclass="post”>
    ...
    </div>
    <divclass="post”>
    ...
    </div>
    </div>
    44
    <divclass=”content”>
    <article>
    ...
    </article>
    <article>
    ...
    </article>
    <article>
    ...
    <article>
    </div>
    Previously
    HTML5
  • 52. Also can be correct
    <divclass=”content”>
    <divclass="post”>
    ...
    </div>
    <divclass="post”>
    ...
    </div>
    <divclass="post”>
    ...
    </div>
    </div>
    45
    <section class=”content”>
    <article>
    ...
    </article>
    <article>
    ...
    </article>
    <article>
    ...
    <article>
    </section>
    Previously
    HTML5
  • 53. Umm
    46
    That’s great, but frankly not that much of a different, how is that better?
  • 54. Benefit 1
    </div>
    </div>
    </div>
    <div id=“footer”>
    </div>
    </body>
    47
    </div>
    </article>
    </div>
    <footer>
    </footer>
    </body>
    Before these Elements
    After
  • 55. Benefit 2
    Less monkeying with content hierarchies
    48
  • 56. 49
    Post Page
    Main Page
    Archive Page
    <article>
    <header>
    <h1><a href="">I Made a Post Thingie</a></h1>
    <time datetime="2011-09-02">September 2, 2011</time>
    </header>
    <imgsrc="img/captain-awesome.jpg" width="300" height="200" alt="Image of Captain Awesome" />
    <p>DIY eanulla photo booth temporoccaecat, velitnihilmixtapescenester.
    Irony laboris echo park, wolf officia vice cupidatatlabore butcher freegan
    farm-to-table nisi velitaliqua gluten-free. Aliquipnesciuntassumenda,
    wayfarers seitan wolf reprehenderitnulla twee sartorial dolore food truck
    voluptateex vinyl. Aliquip ex enim, irony terry richardson trust fund consectetur
    fappariatur dolor. Lo-fi nulla whatever mlkshk, banksyamerican apparel carles
    adipisicingincididunt wolf photo booth hipster. Wayfarers four loko ex cosby sweater,
    adipisicingsartorial non cardigan craft beer cillumreprehenderit terry richardson
    3 wolf moon mollit. Ethical utlabore beard, 3 wolf moon duis readymade assumenda
    hipster tofu mcsweeney's master cleanse.</p>
    </article>
    article header h1
    Article
    Article
    Article
  • 57. Benefit 3
    No longer bound to one header or one navcan have multiple.
    50
  • 58. New Elements work across Modern Browsers without Fail
    51
  • 59. What’s you’re definition of Modern?
    52
  • 60. Use the HTML 5 Shiv
    53
    http://code.google.com/p/html5shiv/
  • 61. Attributes
    54
  • 62. data
    55
    • Add “data-” to anything to make your content contain data
    • 63. Uses?
    • 64. Scritping
    • 65. Microformats
    • 66. Perhaps future Search Engine hints.
    <p data-firstname=“Terry” data-lastname=“Ryan”>Terry Ryan</p>
  • 67. These next things aren’t semantic, just kinda cool
    56
  • 68. contenteditable
    57
    • Allows any text to be user editable, not just input and textareas.
    • 69. Uses
    • 70. Better CMS systems
    • 71. Comment previews
    <p contenteditable="true” class="comment">Comment</p>
  • 72. spellcheck
    58
    • Allows any field that is user editable to trigger the browser’s spellcheck interface
    • 73. Uses:
    • 74. No one spellchecks anything they post on the web
    • 75. But you will have the moral high ground to point out on your site they could have.
    <p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p>
  • 76. Form
    59
    Input
  • 77. HTML5 includes lots of new Input types
    60
  • 78. They aren’t supported on every browser
    61
  • 79. All browsers default to showing unknown input types as Text
    62
  • 80. Search
    63
    • Support is spotty
    • 81. Browser vendors tend to round, add magnifying glass, etc.
    <input type=“search” name=“search” />
  • 82. Email
    64
    • Provides validation
    • 83. Provides email keyboard on iOS devices.
    <input type=“email” name=“email” />
  • 84. Url
    65
    • Provides validation
    • 85. Provides url keyboard on iOS devices.
    <input type=“url” name=“url” />
  • 86. Number
    66
    • Provides keypad on iOS and Android devices.
    • 87. Provides a stepper on desktops
    • 88. Takes attributes:
    • 89. Min/Max
    • 90. Step
    <input type=“number” name=“cost” />
  • 91. Tel
    67
    • Provides keypad on iOS and Android devices.
    <input type=“tel” name=“cell” />
  • 92. Not well supported, but have potential
    68
  • 93. Range
    69
    • Provides a set of values
    • 94. The slider allows you to pick one
    • 95. Not terribly precise
    • 96. Takes attributes:
    • 97. Min/Max
    • 98. Step
    <input type=“range” name=“volume” />
  • 99. Date
    70
    <input type=“date” name=“dob” />
  • 106. Form Elements
    71
  • 107. Output
    Semantically correct placeholder for calculated values.
    Can also be used a label for input type=“slider”
    <output />
  • 108. Output in Action
    73
    <form class="order">
    <label for="quantity">Quantity:</label>
    <input id="quantity" name="quantity" type="number" value="1" onChange="calc()" />
    <br/>
    <label for="price">Price: </label>
    <input id="price" name="price" type="number" value="19.99" disabled />
    <br/>
    <label for="total">Total: </label>
    <output id="total" name="total" />
    <br/>
    </form>
    <script type="application/javascript">
    function calc(){
    varquantity = document.getElementById("quantity").value;
    varprice = document.getElementById("price").value;
    vartotal = document.getElementById("total");
    total.value= Math.round(quantity * price * 100)/100;
    }
    </script>
  • 109. meter
    74
    Basically a Bar Chart of results
    <meter min=“0” max=“20” value=“12”>12cm</meter>
  • 110. progress
    75
    Could be used to indicate progress through a multistep form
    Could be programmatically changed to indicate progress of program
    <progress min=“100” value=“20”>20%</progress>
  • 111. Pitfalls
    76
  • 112. Remember 10 years ago?
    77
  • 113. On Tableless designs
    78
    Don’t use tables for layout, use CSS.
    Tables are for tabular data. They are just one of the tools in your toolkit.
    Holzschlag
    Shea
    Icons by:
    http://www.ngenworks.com/
    Zeldman
  • 114. What people heard
    79
    Don’t use tables for layout, use CSS.
    Tables are for tabular data. They are just one of the tools in your toolkit.
    Holzschlag
    Shea
    Icons by:
    http://www.ngenworks.com/
    Zeldman
  • 115. I’m not saying
    80
    Don’t use div’swhen there are semantic elements that make sense. Div’s are stillgood fordenoting thingsthat have no semantic equivalent
  • 116. I’m not saying
    81
    Don’t use div’s when there are semantic elements that make sense. Div’s are still good for denoting things that have no semantic equivalent
  • 117. You are not requiredto do any of what I just said
    82
  • 118. Article vs. Section
    83
  • 119. Nav vs. Menu
    84
  • 120. A lot of this stuff is in Flux
    85
  • 121. Conclusions
    86
  • 122. Can you use it?
    87
  • 123. On Desktops
    88
  • 124. The most common browsers have crappy HTML 5 support
    89
    Source: https://netaverages.adobe.com
  • 125. New Elements
    Supported on most browsers
    If they are not supported, can be enabled using the HTML 5 Shiv
    90
  • 126. New Attributes
    Supported on most browsers
    If they are not supported, they have no impact.
    91
  • 127. New Form Inputs
    Support wildly varies
    If they are not supported, they have no impact.
    92
  • 128. New Form Elements
    Support wildly varies
    Mimic things that have been provided by JavaScript for years
    93
  • 129. On Mobile
    94
  • 130. 95
  • 131. Big Question: Why use this stuff??
    96
  • 132. 97
    It’s Also about the Annoyed Reader
    Used to be about the “Blind Billionaire
  • 133. All They Care About is this
    98
    Content
  • 134. More Content here
    More
    Content here
    More
    Content here
    We can tell them
    99
    Content
  • 135. And increase the understandability of your code
    100
  • 136. For Future Reference
    HTML 5 General
    http://diveintohtml5.org
    http://html5doctor.com
    HTML5 Semantics
    http://diveintohtml5.org/semantics.html
    HTML 5 Forms
    http://wufoo.com/html5
    http://diveintohtml5.org/forms.html
    101
  • 137. Follow up?
    Feel free to contact me
    terry.ryan@adobe.com
    http://terrenceryan.com
    Twitter: @tpryan