5. “HTML5”
• HTML5
• CSS 3
• JavaScript
• CSS 2
• JavaScript Frameworks
• Canvas (Actually part of HTML5)
• Video tag (Actually part of HTML5)
• Anything the speaker wants it to mean
11. Start with Content
whichElement?
Trying to answer that age
old question:
Should that be a div, a
span, or something else?
Home
Contribute
About
One of the main challenges
we see in building semantic
content is picking what tag
to use when.
12. Add Structure
<h1>whichElement?</h1>
<h2>Trying to answer that age old
question:</h2>
<h2>Should that be a div, a span, or
something else?</h2>
<ul>
<li>Home</li>
<li>Contribute</li>
<li>About</li>
</ul>
<p>One of the main challenges we see
in building semantic content is
picking what tag to use when. This
site seeks to help with that. Now,
before we get all judgy and preachy
let me get a few tenants out
there:</p>
14. CSS is a
language that
provides
style to content
15. Add Style
<h1>whichElement?</h1>
<style type="text/css">
<h2>Trying to answer that age old
h1{
question:</h2>
<h2>Should that red;a div, a span, or
color: be
something else?</h2>
}
h2{
<ul> color: blue;
<li>Home</li>
font-style: italic;
<li>Contribute</li>
}
<li>About</li>
</ul>
p{
<p>One ofcolor:main challenges we see
the white;
in building semantic content is
background-color: black;
picking what tag to use when. This
site }seeks to help with that. Now,
before we get all judgy and preachy
let me get a few tenants out
</style>
there:</p>
30. The most
recent*
specification**
for HTML***
* It’s not technically the most recent
** It’s actually a standard
*** While we’re at it, there is no HTML5 only HTML
This is why pragmatic people hate standards bodies sometimes
31. New in HTML5
• New semantic elements
– article, section, aside, header, footer, etc
• New multimedia elements
– audio, video, canvas
• New API’s for manipulation in JavaScript
– Offline data, drag and drop, web storage
41. Semantic HTML
means your
markup describes
it’s content without
presenting it
42. 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
43. Semantic HTML is a moving
target
• Not Boolean
• Not always objective
• A continuum
44. Semantic HTML
RELATIVELY UNSEMANTIC RELATIVELY SEMANTIC
<body background="css/bg.png">
<font face="Calibri”><center> <body>
<table width="800" bgcolor="#FFFFFF" border="10"
bordercolor="#FFFFFF">
<tr><td>
<div id="header">
<table width="100%" bgcolor="#f0f0f0" border="0“>
<tr>
<h1>The Awesome Blog of
<td><h1> Awesome</h1>
<font face="Palatino Linotype">The Awesome Blog of
Awesome</font>
<p class="tagline">
</h1>
</td> Awesome is a State of
</tr>
<tr>
Mind
<td align="right"><p><i>Awesome is a State of
Mind</i></p></td> </p>
</tr>
</table> </div>
46. 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>
47. 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
49. Header
PREVIOUSLY
<div id="header">
<h1>The Awesome Blog of Awesome</h1>
<p class="tagline">Awesome is a State of Mind</p>
</div>
HTML 5
<header>
<h1>The Awesome Blog of Awesome</h1>
<h2>Awesome is a State of Mind</h2>
</header>
63. <article>
<header>
<h1><a href="">I Made a Post Thingie</a></h1>
article header 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>
64. Benefit 3
• No longer bound to one header or one nav
can have multiple.
78. 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
79. 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
85. 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
107. Follow up?
• Preso will be up at
– http://slideshare.net/tpryan
• Feel free to contact me
– terry.ryan@adobe.com
– http://terrenceryan.com
– Twitter: @tpryan