HTML5 workshop, part 1

HTML5
The Open Web,
and what it
means for you

Mozilla is a
global non-
proﬁt dedicated
to putting you
in control of
your online
experience and
shaping the
future of the
Web for the
public good

"Very emotional. But I don't like it."

must die!!!
rea lly
Not

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 example with new elements and WAI-ARIA landmark roles - robertnyman.com</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">

</head>

<body id="index-page">

<div id="container">
<header role="banner">
<h1>HTML5 example <a href="http://robertnyman.com/html5">- To: Information and samples for HTML5 and related APIs</a></h1>
<p>This page has valid simple HTML5 markup with new elements complemented with WAI-ARIA landmark roles for accessibility</p>
</header>

<div id="demo-main" role="main">
<article id="demo-main-content">
<header>
<hgroup>
<h2>A title</h2>
<h3>Subtitle to the above title</h3>
</hgroup>
</header>
<section>
<p>Some content, created <time datetime="2009-10-14">October 14th 2009</time></p>
</section>
<section>
<p>Some more content - I guess you get the drift by now</p>
</section>
</article>

<aside id="demo-aside-content" role="complementary">
This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action in a simple context
</aside>
</div>

<footer id="page-footer" role="contentinfo">
Created by <a href="http://robertnyman.com/">Robert Nyman</a>
</footer>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 example with new elements and WAI-ARIA landmark
roles - robertnyman.com</title>
<link rel="stylesheet" href="css/base.css" type="text/css"
media="screen">

</head>

<header role="banner">
<h1>HTML5 example <a href="http://robertnyman.com/html5">-
To: Information and samples for HTML5 and related APIs</a></h1>
<p>This page has valid simple HTML5 markup with new elements
complemented with WAI-ARIA landmark roles for accessibility</p>
</header>

<div id="demo-main" role="main">
<article id="demo-main-content">
<header>
<hgroup>
<h2>A title</h2>
<h3>Subtitle to the above title</h3>
</hgroup>
</header>
<section>
<p>Some content, created <time datetime="2009-10-14">October
14th 2009</time></p>
</section>
<section>
<p>Some more content - I guess you get the drift by now</p>
</section>
</article>

<aside id="demo-aside-content" role="complementary">
This is just a demo page to see HTML5 markup and WAI-ARIA landmark
roles in action in a simple context
</aside>
</div>

<footer id="page-footer" role="contentinfo">
Created by <a href="http://robertnyman.com/">Robert Nyman</a>
</footer>

<figure>
<img src="elephant.jpg" alt="A close up of an elephant">
<figcaption>A mighty big elephant, and mighty close too!</figcaption>
</figure>

JAWS version 10 screen reader

NVDA 2010.1
VoiceOver on iPhone IOS4

<aside aria-live="polite" aria-relevant="additions" aria-atomic="true">
Some sidebar content
</aside>

WAI-ARIA Authoring Practices 1.0
Live Regions
-
http://www.w3.org/WAI/PF/aria-practices/
#LiveRegions

<p data-type="police" data-value="I am da law!">
An element with custom data attributes
</p>

<video controls>
<source src="nasa.mp4"></source>
<source src="nasa.webm"></source>
<p>Hello, older web browser</p>
</video>

<canvas id="my-canvas" width="500" height="500">
I am canvas
</canvas>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="110" version="1.1" >
<circle cx="100" cy="52" r="50" stroke="#0000ff"
stroke-width="1" fill="#ff0000" />
</svg>

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
svg.setAttribute("width", "200");
svg.setAttribute("height", "110");
svg.setAttribute("version", "1.1");

circle.setAttribute("cx", "100");
circle.setAttribute("cy", "52");
circle.setAttribute("r", "50");
circle.setAttribute("fill", "#ff0000");
circle.setAttribute("stroke", "#00ffff");
svg.appendChild(circle);
document.getElementById("svg-container").appendChild(svg);

Raphaël JavaScript Library
-
SVG and VML

var paper = Raphael(document.getElementById("raphael-demo"), 320, 200),
circle = paper.circle(150, 62, 60);
circle.attr("fill", "#ff0000");
circle.attr("stroke", "#00ffff");

HTML5
-
The beauty of the Open Web

Robert Nyman
robertnyman.com/speaking/ robnyman@mozilla.com
robertnyman.com/html5/ Twitter: @robertnyman
robertnyman.com/css3/

HTML5 workshop, part 1

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML5 workshop, part 1

Similar to HTML5 workshop, part 1 (20)

More from Robert Nyman

More from Robert Nyman (20)

Recently uploaded

Recently uploaded (20)

HTML5 workshop, part 1