HTML5 Semantic Web

  • 1,858 views
Uploaded on

 

More in: Technology , Education
  • 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
1,858
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
29
Comments
0
Likes
2

Embeds 0

No embeds

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