Your SlideShare is downloading. ×
0
Semantic HTML 5Terry Ryan | Developer EvangelistTwitter: @tpryan
Who are you?
OVERVIEW
Semantic HTML       means   your markup     describes    it’s contentwithout presenting          it
Definition• HTML where specific elements are used• HTML where elements are not misused• HTML with no presentation information
Semantic HTML is a• Not Boolean• Not always objective• A continuum Text
ExampleUnsemantic                                         Semantic                                                   <body...
HTML5 ?           What does          this have to            do with            HTML5?
HTML5 adds more <body><header>     <h1>The Awesome Blog of Awesome</h1>     <p>Awesome is a State of Mind</p></header><nav...
HTML5XHTML
ELEMENTS
Head
HeaderPreviously<div id="header">  <h1>The Awesome Blog of Awesome</h1>  <p class="tagline">Awesome is a State of Mind</p>...
<hgroup> ?             What’s the             <hgroup>             all about?
Hgroup<hgroup> <h1></h1> <h2></h2></hgroup>It’s for grouping related headers, that don’t spawn theirown node in the outline
<hgroup> ?             <huh>?
Effect of hgroupWithout                              WithH1 – Awesome Blog of Awesome         H1 – Awesome Blog of Awesome...
<hgroup> ?             Still with the                <huh>?
Outlines• Outlines seem really important to the  people who push semantic HTML 5• Are they really important? • Today: No •...
Foot
FooterPreviously<div id="footer”> <p>Copyright 2011 - Terry Ryan</p></div>                        Text                    ...
Nav
NavPreviously                            HTML 5<div id="nav">                         <nav> <ul>                          ...
Artic
NavPreviously                                       HTML 5<div class="post”>                               <article><div c...
ArticlePREVIOUSLY<div class="post”><div class="postheader"> <h3><a href="">I Scream My Thoughts</a></h3> <p class="date">A...
a  piece ofcontent that    can
Section          There’s also            this thing              called          “<section>”            how does          ...
An <article> is a piece of stand-   alone
Blog Post
Comment
A <section>    is a collection of related pieces of
Related Entries
<articles>can contain<sections>
Article
ArticleSectionSectionSection
<sections>can contain <articles>
<articles>can contain   other <articles>
ArticleSectionSectionSection
ArticleSectionSectionSectionArticleArticle
Conte
ContentPreviously                HTML 5<div class=”content”>     <div class=”content”><div class="post”>        <article>....
Also correctPreviously                HTML 5<div class=”content”>     <section class=”content”><div class="post”>        <...
Umm      That’s great, but      frankly not that         much of a         difference.        How is this         better?
Benefit 1Before                HTML 5 </div>                 </div></div>                  </article></div>              T...
Benefit 2 Less monkeying with content hierarchies
ArchiMain           Post       ve
ArchiMain                   Post           ve   Artic       Artic      Artic   le          le         le
ArchiMain                   Post           ve   Artic       Artic      Artic   le          le         le
ArchiMain                              Post           ve                       article header h1   Artic       Artic      ...
Benefit 3 No longer bound to one header or one nav can have multiple.
New elementswork across  modern browsers
What’s  yourdefinition   ofModern?
Use theHTML 5 Shiv  http://code.google.com/p/html5shiv/
ATTRIBUTES
Data<p data-firstname=“Terry” data-lastname=“Ryan”>Terry Ryan</p>Add “data-” to anything to make your content contain dataU...
These nextthings aren’t  semantic, just kinda
contenteditable<p contenteditable="true” class="comment">Comment</p>Allows any text to be user editable, not just input an...
spellcheck<p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p>Allows user editable field to trigge...
FORMSelements
HTML5 includes  lots ofnew <input>
They aren’tsupported on every browser
All browsers default to  showing unknowninput types
Search<input type=“search” name=“search” />Support is spottyBrowser vendors tend to round, add magnifying glass, etc.     ...
Email<input type=“email” name=“email” />Provides validationProvides email keyboard on iOS  devices.                       ...
URL<input type=“url” name=“url” />Provides validationProvides url keyboard on iOSdevices.                                 ...
Number<input type=“number” name=“cost” />Provides keypad on iOS and Androiddevices.Provides a stepper on desktopsTakes att...
Tel<input type=“tel” name=“cell” />Provides keypad on iOS and  Android devices.                                   Chart fr...
Not wellsupported, but have potential
Range<input type=“range” name=“volume” />Provides a set of valuesThe slider allows you to pick oneNot terribly preciseTake...
Date<input type=“date” name=“dob” />Provides validationOn Opera   Displays a data pickerOn Safari/Chrome   Displays ticker...
FORMSattributes
Output<output />Semantically correct placeholder for calculated values.Can also be used a label for input type=“slider”   ...
Meter<meter min=“0” max=“20” value=“12”>12cm</meter>Basically a Bar Chart of results                                      ...
Progress<progress min=“100” value=“20”>20%</progress>Could be used to indicate progressthrough a multistep formCould be pr...
PITFALLS
Remember 10 Years   ago?
On Tableless designs                                        Don’t use tables for                                      layo...
What people heard                                      Don’t use tables                                      Tables are fo...
I’m not saying            Don’t use div’s when            there are semantic            elements that make            sens...
I’m not saying            Don’t use div’s when            there are semantic            elements that make            sens...
<article>   vs.<section>
<nav>  vs.<menu>
A lot of this stuff is in    Flux
You arenot requiredto do any of what I just
CONCLUSIONS
Can you use    it?
On desktops
The most common browsers have crappy HTML 5 supportSource: https://netaverages.adobe.com
Actually, not so much anymoreSource: https://netaverages.adobe.com
New Elements• Supported on most browsers• If they are not supported, can be enabled  using the HTML 5 Shiv
New Attributes• Supported on most browsers• If they are not supported, they have no  impact.
New Form Inputs• Support wildly varies• If they are not supported, they have no  impact.
New Form Elements• Support wildly varies• Mimic things that have been provided by  JavaScript for years
On mobile
Big Question:Why use this  stuff??
Used to be about the “Blind        Billionaire
It’s Also about the Annoyed           Reader
Andincrease theunderstandability of your
For Future Reference•   HTML 5 General    •   http://www.diveintohtml5.net    •   http://html5doctor.com•   HTML5 Semantic...
Follow up?• Preso will be up at:  - http://slideshare.net/tpryan• Feel free to contact me  - terry.ryan@adobe.com         ...
Semantic HTML5
Semantic HTML5
Semantic HTML5
Semantic HTML5
Semantic HTML5
Semantic HTML5
Semantic HTML5
Semantic HTML5
Upcoming SlideShare
Loading in...5
×

Semantic HTML5

4,112

Published on

Updated version of my Semantic HTML5 preso.

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,112
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
100
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Semantic HTML5"

    1. 1. Semantic HTML 5Terry Ryan | Developer EvangelistTwitter: @tpryan
    2. 2. Who are you?
    3. 3. OVERVIEW
    4. 4. Semantic HTML means your markup describes it’s contentwithout presenting it
    5. 5. Definition• HTML where specific elements are used• HTML where elements are not misused• HTML with no presentation information
    6. 6. Semantic HTML is a• Not Boolean• Not always objective• A continuum Text
    7. 7. ExampleUnsemantic Semantic <body><body background="css/bg.png"> <div id="header"><font face="Calibri”><center> <h1>The Awesome Blog of Awesome</<table width="800" bgcolor="#FFFFFF" border="10" h1>bordercolor="#FFFFFF"><tr><td><table width="100%" bgcolor="#f0f0f0" Text Text Text <p class="tagline"> Awesome is a State of Mind </p>border="0“> </div> <tr> <td><h1> <font face="Palatino Linotype">The Awesome Blog of Awesome</font> </h1></td> </tr> <tr> <td align="right"><p> <i>Awesome is a State of Mind</i> </p></td> </tr></table>
    8. 8. HTML5 ? What does this have to do with HTML5?
    9. 9. HTML5 adds more <body><header> <h1>The Awesome Blog of Awesome</h1> <p>Awesome is a State of Mind</p></header><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>
    10. 10. HTML5XHTML
    11. 11. ELEMENTS
    12. 12. Head
    13. 13. HeaderPreviously<div id="header"> <h1>The Awesome Blog of Awesome</h1> <p class="tagline">Awesome is a State of Mind</p></div> Text Text TextHTML 5<header> <hgroup> <h1>The Awesome Blog of Awesome</h1> <h2>Awesome is a State of Mind</h2> </hgroup></header>
    14. 14. <hgroup> ? What’s the <hgroup> all about?
    15. 15. Hgroup<hgroup> <h1></h1> <h2></h2></hgroup>It’s for grouping related headers, that don’t spawn theirown node in the outline
    16. 16. <hgroup> ? <huh>?
    17. 17. Effect of hgroupWithout WithH1 – Awesome Blog of Awesome H1 – Awesome Blog of Awesome H2 - Awesome is a State of Mind H2 - Recent Posts H2 - Recent Posts TextH3 I Made a Post Thingie Text Text H3 I Made a Post Thingie H3 My Thoughts are made manifest H3 My Thoughts are made manifest
    18. 18. <hgroup> ? Still with the <huh>?
    19. 19. 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
    20. 20. Foot
    21. 21. FooterPreviously<div id="footer”> <p>Copyright 2011 - Terry Ryan</p></div> Text Text TextHTML 5<footer> <p>Copyright 2011 - Terry Ryan</p></footer>
    22. 22. Nav
    23. 23. NavPreviously HTML 5<div id="nav"> <nav> <ul> <ul> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">Blog</a></li> <li><a href="">About</a></li> Text Text Text <li><a href="">About</a></li> <li><a href="">Contact</a></li> <li><a href="">Contact</a></li> </ul> </ul></div> </nav>
    24. 24. Artic
    25. 25. NavPreviously HTML 5<div class="post”> <article><div class="postheader"> <header> <h3><a href="">I Scream My Thoughts</a></h3> <h1><a href="">I Scream My Thoughts</a></h1> <p class="date">August 10, 2011</p></div> Text Text Text <time>August 10, 2011</time> </header><p>You probably havent heard of them duis</p> <p>You probably havent heard of them duis </p></div> </article>
    26. 26. ArticlePREVIOUSLY<div class="post”><div class="postheader"> <h3><a href="">I Scream My Thoughts</a></h3> <p class="date">August 10, 2011</p></div> Text Text<p>You probably havent heard of them duis</p> Text</div>HTML5<article><header> <h1><a href="">I Scream My Thoughts</a></h1> <time>August 10, 2011</time></header><p>You probably havent heard of them duis </p></article>
    27. 27. a piece ofcontent that can
    28. 28. Section There’s also this thing called “<section>” how does that work?
    29. 29. An <article> is a piece of stand- alone
    30. 30. Blog Post
    31. 31. Comment
    32. 32. A <section> is a collection of related pieces of
    33. 33. Related Entries
    34. 34. <articles>can contain<sections>
    35. 35. Article
    36. 36. ArticleSectionSectionSection
    37. 37. <sections>can contain <articles>
    38. 38. <articles>can contain other <articles>
    39. 39. ArticleSectionSectionSection
    40. 40. ArticleSectionSectionSectionArticleArticle
    41. 41. Conte
    42. 42. ContentPreviously HTML 5<div class=”content”> <div class=”content”><div class="post”> <article>... ...</div> </article><div class="post”>... Text <article> Text Text ...</div> </article><div class="post”> <article>... ...</div> <article></div> </div>
    43. 43. Also correctPreviously HTML 5<div class=”content”> <section class=”content”><div class="post”> <article>... ...</div> </article><div class="post”>... Text <article> Text Text ...</div> </article><div class="post”> <article>... ...</div> <article></div> </section>
    44. 44. Umm That’s great, but frankly not that much of a difference. How is this better?
    45. 45. Benefit 1Before HTML 5 </div> </div></div> </article></div> Text </section> Text Text<div id=“footer”> <footer></div> </footer></body> </body>
    46. 46. Benefit 2 Less monkeying with content hierarchies
    47. 47. ArchiMain Post ve
    48. 48. ArchiMain Post ve Artic Artic Artic le le le
    49. 49. ArchiMain Post ve Artic Artic Artic le le le
    50. 50. ArchiMain Post ve article header h1 Artic Artic Artic le le le
    51. 51. Benefit 3 No longer bound to one header or one nav can have multiple.
    52. 52. New elementswork across modern browsers
    53. 53. What’s yourdefinition ofModern?
    54. 54. Use theHTML 5 Shiv http://code.google.com/p/html5shiv/
    55. 55. ATTRIBUTES
    56. 56. Data<p data-firstname=“Terry” data-lastname=“Ryan”>Terry Ryan</p>Add “data-” to anything to make your content contain dataUses? •Scritping •Microformats •jQuery Mobile •Perhaps future Search Engine hints.
    57. 57. These nextthings aren’t semantic, just kinda
    58. 58. contenteditable<p contenteditable="true” class="comment">Comment</p>Allows any text to be user editable, not just input and textareas.Uses? •Better CMS systems •Comment previews
    59. 59. spellcheck<p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p>Allows user editable field to trigger the browser’s spellcheck interfaceUses? •No one spellchecks anything they post on the web •But you will have the moral high ground to point out on your site they could have.
    60. 60. FORMSelements
    61. 61. HTML5 includes lots ofnew <input>
    62. 62. They aren’tsupported on every browser
    63. 63. All browsers default to showing unknowninput types
    64. 64. Search<input type=“search” name=“search” />Support is spottyBrowser vendors tend to round, add magnifying glass, etc. Chart from - http://wufoo.com/html
    65. 65. Email<input type=“email” name=“email” />Provides validationProvides email keyboard on iOS devices. Chart from - http://wufoo.com/html
    66. 66. URL<input type=“url” name=“url” />Provides validationProvides url keyboard on iOSdevices. Chart from - http://wufoo.com/html
    67. 67. Number<input type=“number” name=“cost” />Provides keypad on iOS and Androiddevices.Provides a stepper on desktopsTakes attributes: Min/Max Step Chart from - http://wufoo.com/html
    68. 68. Tel<input type=“tel” name=“cell” />Provides keypad on iOS and Android devices. Chart from - http://wufoo.com/html
    69. 69. Not wellsupported, but have potential
    70. 70. Range<input type=“range” name=“volume” />Provides a set of valuesThe slider allows you to pick oneNot terribly preciseTakes attributes: Min/Max Step Chart from - http://wufoo.com/html
    71. 71. Date<input type=“date” name=“dob” />Provides validationOn Opera Displays a data pickerOn Safari/Chrome Displays tickerIE Dashes your hopes and dreams the way only IE can Chart from - http://wufoo.com/html
    72. 72. FORMSattributes
    73. 73. Output<output />Semantically correct placeholder for calculated values.Can also be used a label for input type=“slider” Chart from - http://wufoo.com/html
    74. 74. Meter<meter min=“0” max=“20” value=“12”>12cm</meter>Basically a Bar Chart of results Chart from - http://wufoo.com/html
    75. 75. Progress<progress min=“100” value=“20”>20%</progress>Could be used to indicate progressthrough a multistep formCould be programmatically changed toindicate progress of program Chart from - http://wufoo.com/html
    76. 76. PITFALLS
    77. 77. Remember 10 Years ago?
    78. 78. On Tableless designs Don’t use tables for layout, use CSS. Tables are for tabular Zeldman data. They are just one of the tools in your toolkit. Holzschlag SheaIcons by:http://www.ngenworks.com/
    79. 79. What people heard Don’t use tables Tables are for Zeldman tools. Holzschlag SheaIcons by:http://www.ngenworks.com/
    80. 80. I’m not saying 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
    81. 81. I’m not saying 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
    82. 82. <article> vs.<section>
    83. 83. <nav> vs.<menu>
    84. 84. A lot of this stuff is in Flux
    85. 85. You arenot requiredto do any of what I just
    86. 86. CONCLUSIONS
    87. 87. Can you use it?
    88. 88. On desktops
    89. 89. The most common browsers have crappy HTML 5 supportSource: https://netaverages.adobe.com
    90. 90. Actually, not so much anymoreSource: https://netaverages.adobe.com
    91. 91. New Elements• Supported on most browsers• If they are not supported, can be enabled using the HTML 5 Shiv
    92. 92. New Attributes• Supported on most browsers• If they are not supported, they have no impact.
    93. 93. New Form Inputs• Support wildly varies• If they are not supported, they have no impact.
    94. 94. New Form Elements• Support wildly varies• Mimic things that have been provided by JavaScript for years
    95. 95. On mobile
    96. 96. Big Question:Why use this stuff??
    97. 97. Used to be about the “Blind Billionaire
    98. 98. It’s Also about the Annoyed Reader
    99. 99. Andincrease theunderstandability of your
    100. 100. For Future Reference• HTML 5 General • http://www.diveintohtml5.net • http://html5doctor.com• HTML5 Semantics • http://www.diveintohtml5.net/semantics.html• HTML 5 Forms • http://wufoo.com/html5 • http://www.diveintohtml5.net/forms.html• HTML Status • http://caniuse.com
    101. 101. Follow up?• Preso will be up at: - http://slideshare.net/tpryan• Feel free to contact me - terry.ryan@adobe.com Text - http://terrenceryan.com - Twitter: @tpryan - github: tpryan
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×