Semantic HTML 5

HTML5 Semantic Web Terry Ryan | Worldwide Developer Evangelist @tpryan

Who are you?

3 Not Sexy and Adventurous

It’s everyday stuff

Agenda •  Introduction •  Overview of Semantics •  New Semantic
elements •  New Semantic attributes •  New Form Input Types •  New Form attributes •  Pitfalls •  Conclusions

OVERVIEW Semantics

Semantic HTML means your markup describes it’s content without presenting
it

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

Semantic HTML is a moving target •  Not Boolean • 
Not always objective •  A continuum

Semantic HTML <body background="css/bg.png"> <font face="Calibri”><center> <table width="800"
bgcolor="#FFFFFF" border="10" bordercolor="#FFFFFF"> <tr><td> <table width="100%" bgcolor="#f0f0f0" border="0“> <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> <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

HTML5? What does this have to do with HTML5?

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><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>

Introducing The Awesome Blog of Awesome XHTML HTML5

ELEMENTS

Header

Header <div id="header"> <h1>The Awesome
Blog of Awesome</h1> <p class="tagline">Awesome is a State of Mind</p> </div> <header> <hgroup> <h1>The Awesome Blog of Awesome</h1> <h2>Awesome is a State of Mind</h2> </hgroup> </header> HTML 5 PREVIOUSLY

Hgroup? What’s the <hgroup> all about?

It’s for grouping related headers, that don’t spawn their own
node in the outline <hgroup> <h1></h1> <h2></h2> </hgroup> Hgroup

Hgroup? Huh?

Effect of hgroup H1 – Awesome Blog of Awesome
H2 -‐ Awesome is a State of Mind H2 -‐ Recent Posts H3 I Made a Post Thingie H3 My Thoughts are made manifest H1 – Awesome Blog of Awesome H2 Recent Posts H3 I Made a Post Thingie H3 My Thoughts are made manifest NO HGROUP WITH HGROUP

Hgroup? Still huh?

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

Footer

Navigation

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> <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

Articles

Articles <div class="post”> <div class="postheader"> <h3><a href="">I
Scream My Thoughts</a></h3> <p class="date">August 10, 2011</p> </div> <p>You probably haven't heard of them duis</p> </div> <article> <header> <h1><a href="">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

An article is a piece of content that can stand
on it’s own

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.

Time? 31 Didn’t they kill <time>?

Yes, then no.

Section? 33 There’s also this thing called “<section>” how
does that work.

An <article> is a piece of stand-alone content 34

Blog Post

Or a comment

A <section> is a collection of related pieces of content
37

Related Entries

<articles> can contain <sections> 39

Article Section Section Section

<sections> can contain <articles> 41

<articles> can contain other <articles> 42

Article Section Section Section Article Article

Content 44

Content <div class=”content”> <div class="post”> ... </div>
<div class="post”> ... </div> <div class="post”> ... </div> </div> <div class=”content”> <article> ... </article> <article> ... </article> <article> ... <article> </div> PREVIOUSLY HTML5

Also can be correct <div class=”content”> <div class="post”>
... </div> <div class="post”> ... </div> <div class="post”> ... </div> </div> <section class=”content”> <article> ... </article> <article> ... </article> <article> ... <article> </section> PREVIOUSLY HTML5

Umm That’s great, but frankly not that much of a
difference. How is this better?

Benefit 1 </div> </div>
</div> <div id=“footer”> </div> </body> </div> </article> </section> <footer> </footer> </body> BEFORE THESE ELEMENTS AFTER

Benefit 2 •  Less monkeying with content hierarchies

Main Page Archive Page Post Page Article Article Article <article>
<header> <h1><a href="">I Made a Post Thingie</a></h1> <time datetime="2011-‐09-‐02">September 2, 2011</time> </header> <img src="img/captain-‐awesome.jpg" width="300" height="200" alt="Image of Captain Awesome" /> <p>DIY ea nulla photo booth tempor occaecat, velit nihil mixtape scenester. Irony laboris echo park, wolf officia vice cupidatat labore butcher freegan farm-‐to-‐table nisi velit aliqua gluten-‐free. Aliquip nesciunt assumenda, wayfarers seitan wolf reprehenderit nulla twee sartorial dolore food truck voluptate ex vinyl. Aliquip ex enim, irony terry richardson trust fund consectetur fap pariatur dolor. Lo-‐fi nulla whatever mlkshk, banksy american apparel carles adipisicing incididunt wolf photo booth hipster. Wayfarers four loko ex cosby sweater, adipisicing sartorial non cardigan craft beer cillum reprehenderit terry richardson 3 wolf moon mollit. Ethical ut labore beard, 3 wolf moon duis readymade assumenda hipster tofu mcsweeney's master cleanse.</p> </article> article header h1

Benefit 3 •  No longer bound to one header or
one nav can have multiple.

New elements work across modern browsers without fail

What’s your definition of Modern?

Use the HTML 5 Shiv h)p://code.google.com/p/html5shiv/

ATTRIBUTES

•  Add “data-” to anything to make your content contain
data •  Uses? •  Scritping •  Microformats •  jQuery Mobile •  Perhaps future Search Engine hints. <p data-‐firstname=“Terry” data-‐lastname=“Ryan”>Terry Ryan</p> data

These next things aren’t semantic, just kinda cool

•  Allows any text to be user editable, not just
input and textareas. •  Uses •  Better CMS systems •  Comment previews <p contenteditable="true” class="comment">Comment</p> contenteditable

•  Allows any field that is user editable to trigger
the browser’s spellcheck interface •  Uses: •  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. <p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p> spellcheck

FORM Input

HTML5 includes lots of new <input> types 61

They aren’t supported on every browser 62

All browsers default to showing unknown input types as text
63

•  Support is spotty •  Browser vendors tend to round,
add magnifying glass, etc. <input type=“search” name=“search” /> Search

•  Provides validation •  Provides email keyboard on iOS devices.
<input type=“email” name=“email” /> Email

Provides validation Provides url keyboard on iOS devices. <input type=“url”
name=“url” /> Url

Provides keypad on iOS and Android devices. Provides a stepper
on desktops Takes attributes: –  Min/Max –  Step <input type=“number” name=“cost” /> Number

•  Provides keypad on iOS and Android devices. <input type=“tel”
name=“cell” /> Tel

Not well supported, but have potential

•  Provides a set of values •  The slider allows
you to pick one •  Not terribly precise •  Takes attributes: •  Min/Max •  Step <input type=“range” name=“volume” /> Range

•  Provides validation •  On Opera •  Displays a data
picker •  On Safari/Chrome •  Displays ticker •  IE •  Dashes your hopes and dreams the way only IE can <input type=“date” name=“dob” /> Date

FORM Elements

Output Semantically correct placeholder for calculated values. Can also be
used a label for input type=“slider” <output />

Output in Action <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(){ var quantity = document.getElementById("quantity").value; var price = document.getElementById("price").value; var total = document.getElementById("total"); total.value = Math.round(quantity * price * 100)/100; } </script>

meter Basically a Bar Chart of results <meter min=“0” max=“20”
value=“12”>12cm</meter>

progress 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>

PITFALLS

Remember 10 years ago? 78

On Tableless designs Don’t use tables for layout, use CSS.
Tables are for tabular data. They are just one of the tools in your toolkit. Holzschlag Zeldman Shea Icons by: http://www.ngenworks.com/

What people heard Don’t use tables for layout, use CSS.
Tables are for tabular data. They are just one of the tools in your toolkit. Holzschlag Zeldman Shea Icons by: http://www.ngenworks.com/

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

You are not required to do any of what I
just said

A lot of this stuff is in Flux

CONCLUSIONS

Can you use it? 88

On Desktops 89

The most common browsers have crappy HTML 5 support Source:
https://netaverages.adobe.com

Actually, not so much anymore Source: 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?? 98

USED TO BE ABOUT THE “BLIND BILLIONAIRE IT’S ALSO ABOUT
THE ANNOYED READER

All They Care About is this Content

More Content here More Content here More Content here Content
We can tell them

And increase the understandability of your code

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 •  HTML Status – http://caniuse.com 103

Follow up? •  Feel free to contact me – [email protected] – http://terrenceryan.com
– Twitter: @tpryan

Semantic HTML 5

Semantic HTML 5

More Decks by Terrence Ryan

Other Decks in Technology

Featured

Transcript