HTML5 workshop, part 1
6 likes5,739 views
This document discusses HTML5 and related web technologies. It introduces HTML5 semantics like header, nav, article, section, aside, and figure. It demonstrates using these elements to mark up a simple web page. It also covers HTML5 features like video, canvas, and SVG for rich media, as well as JavaScript APIs and libraries for manipulating these elements. Finally, it addresses questions around browser support for HTML5 and ensuring websites will work across browsers.
![<!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">
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</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>](https://image.slidesharecdn.com/html5workshoppart1-120213100947-phpapp01/85/HTML5-workshop-part-1-20-320.jpg)
![<!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">
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->
</head>](https://image.slidesharecdn.com/html5workshoppart1-120213100947-phpapp01/85/HTML5-workshop-part-1-21-320.jpg)
![Performance as User Experience [AEADC 2018]](https://cdn.slidesharecdn.com/ss_thumbnails/performanceasuserexperienceaeadc2018-180806174424-thumbnail.jpg?width=560&fit=bounds)
![Performance as User Experience [An Event Apart Denver 2017]](https://cdn.slidesharecdn.com/ss_thumbnails/performanceasuserexperienceaeaden2017-171212234737-thumbnail.jpg?width=560&fit=bounds)
![[In Control 2010] HTML5](https://cdn.slidesharecdn.com/ss_thumbnails/incontrolorlandohtml5-100302003930-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to HTML5 workshop, part 1 (20)
![HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://cdn.slidesharecdn.com/ss_thumbnails/html5smartmarkupforsmarterwebsites-futureofwebappslasvegas2011-110628193453-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Ad
More from Robert Nyman (20)
Ad
Recently uploaded (20)
HTML5 workshop, part 1
- 1. HTML5 The Open Web, and what it means for you
- 4. Mozilla is a global non- profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
- 5. @robertnyman
- 7. "Very emotional. But I don't like it."
- 8. Platforms!
- 10. Semantics APIs
- 11. must die!!! rea lly Not
- 12. HTML5 semantics
- 14. <!DOCTYPE html>
- 16. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- 18. <header> <aside> <article> <nav> <section> <figure> <footer> <figcaption>
- 20. <!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"> <!--[if lte IE 8]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </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>
- 21. <!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"> <!--[if lte IE 8]> <script src="http://html5shiv.googlecode.com/svn/trunk/ html5.js"></script> <![endif]--> </head>
- 22. <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>
- 23. <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>
- 24. <footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a> </footer>
- 25. <figure> <img src="elephant.jpg" alt="A close up of an elephant"> <figcaption>A mighty big elephant, and mighty close too!</figcaption> </figure>
- 27. JAWS version 10 screen reader NVDA 2010.1 VoiceOver on iPhone IOS4
- 28. <aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content </aside>
- 29. WAI-ARIA Authoring Practices 1.0 Live Regions - http://www.w3.org/WAI/PF/aria-practices/ #LiveRegions
- 31. <p data-type="police" data-value="I am da law!"> An element with custom data attributes </p>
- 32. HTML5 Doctor
- 33. Video
- 35. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p> </video>
- 42. Canvas
- 43. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>
- 46. SVG
- 47. <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>
- 49. <?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>
- 50. 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);
- 51. Raphaël JavaScript Library - SVG and VML
- 52. var paper = Raphael(document.getElementById("raphael-demo"), 320, 200), circle = paper.circle(150, 62, 60); circle.attr("fill", "#ff0000"); circle.attr("stroke", "#00ffff");
- 53. Dev tools
- 56. Will HTML5 be around?
- 57. Questions
- 59. Can I use it?
- 65. HTML5 - The beauty of the Open Web
- 66. Robert Nyman robertnyman.com/speaking/ [email protected] robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/