Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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         ...
For Future Reference• HTML 5
For Future Reference• HTML 5
For Future Reference• HTML 5
For Future Reference• HTML 5
For Future Reference• HTML 5
For Future Reference• HTML 5
For Future Reference• HTML 5
For Future Reference• HTML 5
Prochain SlideShare
Chargement dans…5
×

For Future Reference• HTML 5 Semantic HTML5

15 635 vues

Publié le

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

Publié dans : Technologie, Formation
  • Soyez le premier à commenter

×