You Don't Have to be a Ninja to Learn HTML5!

You Don’t
Have to be a
Ninja
to Learn
HTML5
@claytonlz
Desert Code Camp
April 2nd, 2011

Saturday, April 2, 2011

Semantic Elements
Video
Forms
Example
Boilerplate


<section>
“The section element represents a generic
section of a document or application. A
section, in this context, is a thematic grouping
of content, typically with a heading.”

</section>

<section id="chapter_1">
...
</section>
A general rule is that the section element is
appropriate only if the element's contents
would be listed explicitly in the document's
outline.


<nav>
“The nav element represents a section of a
page that links to other pages or to parts
within the page: a section with navigation
links.”

</nav>

<nav>
<ul>
</ul>
</nav>

The nav element allows some user agents
to omit navigation information or skip
directly to navigation information.


<article>
“The article element represents a self-
contained composition in a document, page,
application, or site and that is, in principle,
independently distributable or reusable, e.g.
in syndication.”

</article>

<div class="entry">
<h2>My Trip to Las Vegas</h2>
<span>By John Smith</span>
<p>...</p>
</div>


<article class="entry">
<p>...</p>
</article>

When article elements are nested, the inner
article elements represent articles that are in
principle related to the contents of the outer
article.


<hgroup>
“The hgroup element represents the heading
of a section. The element is used to group a
set of h1–h6 elements when the heading has
multiple levels, such as subheadings,
alternative titles, or taglines.”

</hgroup>

<h1>Album Reviews</h1>
<h2>Stuff you should buy!</h2>
<h3>Link 80 - 17 Reasons</h3>
<h3>MF Doom - Mm..Food</h3>
<h3>Bad Brains - Build a Nation</h3>


Album Reviews
|
+-- Stuff you should buy
|
+--- Link 80 - 17 Reasons
|
+--- MF Doom - Mm...Food
|
+--- Bad Brains - Build a Nation


<hgroup>
</hgroup>


The point of using hgroup is to mask the h2
element (which acts as a tagline) from the
outline algorithm.


<hgroup>
</hgroup>
<article>
<hgroup>
<h1>Link 80</h1>
<h2>17 Reasons</h2>
</hgroup>
<p>...</p>
</article>


<header>
“The header element represents a group of
introductory or navigational aids.”

“The footer element represents a footer for its
nearest ancestor sectioning content or
sectioning root element.”

</footer>

<body>
<div id="header">
<h1>My Journal</h1>
</div>
...
<div id="footer">
© 2011 Clayton
</div>
</body>


<body>
<header>
<h1>My Journal</h1>
</header>
...
<footer>
© 2011 Clayton
</footer>
</body>


<body>
<header>
<h1>My Journal</h1>
</header>
...
<footer>
© 2011 Clayton
</footer>
</body>

Footers don't necessarily have to appear at the
end of a section, though they usually do.


IE 9.0+

FireFox 3.5+

Safari 3.0+

Chrome 3.0+

Opera 10.5+

iPhone 1.0+

Android 2.0+


Video: The <video> Element
<video width="320" height="240" controls>
<source src="oxy-clean.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="oxy-clean.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="oxy-clean.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>


Video: Size
</video>


Video: Controls
</video>


Video: Mime Types
</video>

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm


Video: Codecs
</video>

type video/mp4

video codec avc1.42E01E (H.264 Baseline)

audio codec mp4a.40.2 (Low-Complexity AAC)


<video id="movie" width="320" height="240" preload controls>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="pr6.mp4" />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/
dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}}' />
<p>Download video as <a href="pr6.mp4">MP4</a>,↵
<a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.
</p>
</object>
</video>
<script>
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>


Forms: Placeholders
<input type='url' placeholder='http://example.com'>
<input type='email' placeholder='email@example.com'>

Safari Chrome Opera iPhone


Forms: Numbers
<input type='number' min='0' max='10' step='1' value='2'>

Safari Chrome Opera


Forms: Ranges
<input type='range' min='0' max='100' step='5'>

Safari Chrome Opera


Forms: Search
<input type='search' />

Safari Chrome Opera


Forms: Required Fields
<input name='first_name' required>

Safari Chrome Opera


✓ Build Script
✓ Optimized html template
✓ Optimized css template
✓ Web server configs
✓ Lightweight
✓ Customizable
✓ Well Documented


http://spkr8.com/t/7006
Clayton Lengel-Zigich : @claytonlz

Photo Credits
http://www.ﬂickr.com/photos/thevoicewithin/1388730534/sizes/l/
http://www.chipwreck.de/blog/2010/02/25/html-5-video-tag-and-attributes/


You Don't Have to be a Ninja to Learn HTML5!

Recommended

Recommended

More Related Content

Featured

Featured (20)

You Don't Have to be a Ninja to Learn HTML5!