HTML5: New Adventures in Webpage Markup
- What is HTML5?
- Why use HTML5 Now?
- Document Definition
- Semantic Page Elements
- Form Input Types
- Microformats
- Audio
- Video
- Embed & Canvas
- Regressive Enhancement
- References
- What is HTML5?
- Anti-Flash?
- Video Format for iPhone?
- More standards for IE to break?
- P.O.S.H.?
- Semantic Markup for the FUTURE WEB!
- What does HTML5 do today?
- Simplify webpage markup
- Improve content structure
- Enable portable design
- Deliver rich media to all user agents
- Remove dependencies on proprietary technologies
- Organize for search engines
- Supported by
- All major current-release web browsers
- CMSs
- Dreamweaver CS 5.5
XHTML Transitional Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5 Document
<!DOCTYPE HTML>
<html>
Semantic elements as page structure
<header>
<hgroup>
<h1>HTML5</h1>
<h2>The new standard</h2>
</hgroup>
</header>
<section id="left">
<nav>
</nav>
</section>
<section id="center">
<hgroup>
<h1>Welcome</h1>
<article> <h2>HTML5</h2>
</article>
</hgroup>
</section>
<footer>
<nav>
</nav>
<aside id="copyright"> © 2010</aside>
</footer>
Style semantic elements as block elements
<style>
header, section, footer, aside, nav, article, figure {
display: block;
}
</style>
Improved Interfaces & Validation with new input types
<form action="" method="get">
Name:<input name="name" placeholder="Jay Peretz"/><br>
Email: <input name="mail" type="email"/><br />
Telephone: <input name="tel" type="tel" /><br />
Eye Color: <input name="eyecolor" type="color" /><br />
Birthdate: <input name="bdate" type="date" /><br />
Children: <input type="range"
min="0"
max="10"
step="1"
value="0"><br>
<input type="submit" value="Submit" />
</form>
Rich Data Elements
<p class="vcard">
<a class="fn org url" href="http://www.santarosa.edu/instruction/instructional_departments/computer-studies/" title="Santa Rosa Junior College">
<span class="organization-name">SRJC</span>/<span class="organization-unit">Computer Studies</span></a><br>
<span class="adr"><a class="extended-address" href="http://www.santarosa.edu/">Santa Rosa Junior College</a><br>
<span class="street-address">1501 Mendocino Ave.</span>, <span class="locality">Santa Rosa</span>,<br>
<span class="region">CA</span>
<span class="postal-code">95401</span>
<b class="country">USA</b><br>
<span class="tel">Telephone:
<span class="value">1-707-527-4011</span></span><br>
<span class="email"><span class="type">work</span>:
<span class="value">
<a href="mailto:info@santarosa.edu">
info@santarosa.edu</a>
</span></span></span>
</p>
SRJC/Computer Studies
Santa Rosa Junior College
1501 Mendocino Ave., Santa Rosa,
CA 95401 USA
Telephone: 1-707-527-4011
work: info@santarosa.edu
- hCard — contact information for people and organisations
- hCalendar — time-based information, such as events
- adr
- geo
- hAtom
- hAudio
- hListing
- hMedia
- hNews
- hProduct
- hRecipe
- hResume
- hReview
Simple audio tag with no player or fallback
<audio controls>
<source src="lotus-flower.mp3" type="audio/mpeg" />
<source src="lotus-flower.ogg" type="audio/ogg" />
This browser does not support the audio element.
</audio>
Video with encoded sources and Flash fallback for all user agents
<video id="movie" width="320" height="240" preload controls>
<source src="tree-frogs.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="tree-frogs.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="tree-frogs.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": "tree-frogs.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>
A simple Javascript player for user agents without built-in controls.
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
Embed
Empty element (self-closing tag) for embedding plug-in external applications using MIME types
<embed src="helloworld.swf" type="video/quicktime" />
Canvas
Renders and animates vector or bitmap graphics
<canvas id="myCanvas" onClick="displayCanvas();" width="300" height="200"><p>This browser does not support the canvas tag. The current versions of Internet Explorer, Firefox, Opera, and Chrome support the canvas tag.</p></canvas>
Simple Javascript event handler to draw three rectangles
function displayCanvas()
{
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (0, 0, 150, 75);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (40, 30, 125, 75);
ctx.fillStyle = "rgb(0,0,150)";
ctx.strokeRect (20, 20, 50, 100);
}
}
Click Below to See the Rectangles on the Canvas
Targeting Markup to user agent capabilities
- Modernizr
- Maintain a fine level of control over older browsers with regressive enhancement
- Dynamically detects HTML5 & CSS3 features in the user agent
- Open source, small footprint Javascript Library
- use markup to control fallbacks for non-compliant browsers - no need for Javascript.
Modernizr implements classes to track user agent capabilities
allowing you to style or script fallbacks
.no-audio #audio {
display: none; /* Don't show Audio */
}
<div id="audio">
<audio>
<source src="mySong.ogg" />
<source src="mySong.mp3" />
</audio>
</div>
- References for this presentation