you don't have to be a ninja to learn html5!

You Don’t Have to be a

Ninjato Learn

HTML5@claytonlz

Desert Code CampApril 2nd, 2011

Saturday, April 2, 2011

Semantic ElementsVideoFormsExampleBoilerplate


<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>Saturday, April 2, 2011

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


http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#outline

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#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>Saturday, April 2, 2011

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

<nav> <ul> <li><a href="/home">Home</a></li> <li><a href="/news">News</a></li> </ul></nav>


<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>Saturday, April 2, 2011

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


<article class="entry"> <h1>My Trip to Las Vegas</h1> <span>By John Smith</span> <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.

<article class="entry"> <h1>My Trip to Las Vegas</h1> <span>By John Smith</span> <p>...</p></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>Saturday, April 2, 2011

<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> <h1>Album Reviews</h1> <h2>Stuff you should buy!</h2></hgroup>

<h3>Link 80 - 17 Reasons</h3><h3>MF Doom - Mm..Food</h3><h3>Bad Brains - Build a Nation</h3>


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

<hgroup> <h1>Album Reviews</h1> <h2>Stuff you should buy!</h2></hgroup>

<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> <h1>Album Reviews</h1> <h2>Stuff you should buy!</h2></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>Saturday, April 2, 2011

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element

http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#represents

http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#represents

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

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


IE 9.0+

FireFox 3.5+

Safari 3.0+

Chrome 3.0+

Opera 10.5+

iPhone 1.0+

Android 2.0+


<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: The <video> Element



Video: Size



Video: Controls



AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm

Video: Mime Types



type video/mp4

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

audio codec mp4a.40.2 (Low-Complexity AAC)

Video: Codecs


<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='email' placeholder='[email protected]'>

Safari Chrome Opera iPhone

<input type='url' placeholder='http://example.com'>


http://example.com

http://example.com

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

Safari Chrome Opera


Forms: Ranges

Safari Chrome Opera

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


Forms: Search

Safari Chrome Opera

<input type='search' />


Forms: Required Fields

Safari Chrome Opera

<input name='first_name' required>


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



http://diveintohtml5.org/



Clayton Lengel-Zigich : @claytonlz

http://spkr8.com/t/7006

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




http://www.flickr.com/photos/thevoicewithin/1388730534/sizes/l/

http://www.flickr.com/photos/thevoicewithin/1388730534/sizes/l/

http://www.chipwreck.de/blog/2010/02/25/html-5-video-tag-and-attributes/

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!

Documents