4. Semantic HTML
means
your markup
describes
it’s content
without presenting
it
5. Definition
• HTML where specific elements are used
• HTML where elements are not misused
• HTML with no presentation information
6. Semantic HTML is a
• Not Boolean
• Not always objective
• A continuum Text
7. Example
Unsemantic 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>
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>
15. Header
Previously
<div id="header">
<h1>The Awesome Blog of Awesome</h1>
<p class="tagline">Awesome is a State of Mind</p>
</div>
Text
Text
Text
HTML 5
<header>
<hgroup>
<h1>The Awesome Blog of Awesome</h1>
<h2>Awesome is a State of Mind</h2>
</hgroup>
</header>
19. Effect of hgroup
Without With
H1 – 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
21. 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
30. Nav
Previously 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 haven't heard of them duis</p> <p>You probably haven't heard of them duis </p>
</div> </article>
31. Article
PREVIOUSLY
<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 haven't 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 haven't heard of them duis </p>
</article>
49. Content
Previously 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>
50. Also correct
Previously 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>
51. Umm
That’s great, but
frankly not that
much of a
difference.
How is this
better?
52. Benefit 1
Before HTML 5
</div> </div>
</div> </article>
</div> Text
</section>
Text
Text
<div id=“footer”> <footer>
</div> </footer>
</body> </body>
66. spellcheck
<p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p>
Allows user editable field 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.
73. URL
<input type=“url” name=“url” />
Provides validation
Provides url keyboard on iOS
devices.
Chart from - http://wufoo.com/html
74. Number
<input type=“number” name=“cost” />
Provides keypad on iOS and Android
devices.
Provides a stepper on desktops
Takes attributes:
Min/Max
Step
Chart from - http://wufoo.com/html
77. Range
<input type=“range” name=“volume” />
Provides a set of values
The slider allows you to pick
one
Not terribly precise
Takes attributes:
Min/Max
Step
Chart from - http://wufoo.com/html
78. Date
<input type=“date” name=“dob” />
Provides validation
On Opera
Displays a data picker
On Safari/Chrome
Displays ticker
IE
Dashes your hopes and
dreams the way only IE
can Chart from - http://wufoo.com/html
80. Output
<output />
Semantically correct placeholder for calculated values.
Can also be used a label for input type=“slider”
Chart from - http://wufoo.com/html
81. Meter
<meter min=“0” max=“20” value=“12”>12cm</meter>
Basically a Bar Chart of results
Chart from - http://wufoo.com/html
85. 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
Shea
Icons by:
http://www.ngenworks.com/
86. What people heard
Don’t use tables
Tables are for
Zeldman
tools.
Holzschlag
Shea
Icons by:
http://www.ngenworks.com/
87. 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
88. 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
108. 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
109. 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