Getting Started with html5 - miketaylr.comThe element represents the contact information for its...
Transcript of Getting Started with html5 - miketaylr.comThe element represents the contact information for its...
![Page 1: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/1.jpg)
Getting Started with html5
Mike Taylor @miketaylr
1
Saturday, August 29, 2009
![Page 2: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/2.jpg)
What is html5?
And why should I care?
2
Saturday, August 29, 2009
![Page 3: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/3.jpg)
New semantic elements
3
Saturday, August 29, 2009
![Page 4: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/4.jpg)
4
Saturday, August 29, 2009
![Page 5: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/5.jpg)
New semantic elements
Rich DOM APIs (local storage, native drag & drop, content editable fields, web forms 2.0)
5
Saturday, August 29, 2009
![Page 6: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/6.jpg)
New semantic elements
Rich DOM APIs (local storage, native drag & drop, content editable fields, web forms 2.0)
Rich embedded content (<audio>, <video>, <canvas>)
5
Saturday, August 29, 2009
![Page 7: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/7.jpg)
New semantic elements
Rich DOM APIs (local storage, native drag & drop, content editable fields, web forms 2.0)
Rich embedded content (<audio>, <video>, <canvas>)
...and a whole lot more.5
Saturday, August 29, 2009
![Page 8: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/8.jpg)
2022?
October 2009?
Timeframe
6
Saturday, August 29, 2009
![Page 9: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/9.jpg)
When can I use html5?
7
Saturday, August 29, 2009
![Page 10: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/10.jpg)
When can I use html5?Today!
7
Saturday, August 29, 2009
![Page 11: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/11.jpg)
When can I use html5?Today! (sorta)
7
Saturday, August 29, 2009
![Page 12: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/12.jpg)
When can I use html5?Today! (sorta)
IE (all of ‘em):
7
Saturday, August 29, 2009
![Page 13: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/13.jpg)
8
Saturday, August 29, 2009
![Page 14: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/14.jpg)
9
Saturday, August 29, 2009
![Page 15: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/15.jpg)
document.createElement(‘nav’);
9
Saturday, August 29, 2009
![Page 16: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/16.jpg)
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
html5 shiv script on google code:
10
Saturday, August 29, 2009
![Page 17: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/17.jpg)
11
Saturday, August 29, 2009
![Page 18: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/18.jpg)
When can I use html5?Today! (sorta)
Camino, FF2:http://remysharp.com/2009/04/14/html5-and-firefox2/
12
Saturday, August 29, 2009
![Page 19: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/19.jpg)
A sample site.
13
Saturday, August 29, 2009
![Page 20: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/20.jpg)
Doctype
14
Saturday, August 29, 2009
![Page 21: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/21.jpg)
Doctype
“A DOCTYPE is a mostly useless, but required, header.”
14
Saturday, August 29, 2009
![Page 22: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/22.jpg)
Doctype
<!DOCTYPE html>
“A DOCTYPE is a mostly useless, but required, header.”
14
Saturday, August 29, 2009
![Page 23: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/23.jpg)
Doctype
<!DOCTYPE html>
“A DOCTYPE is a mostly useless, but required, header.”
That’s it.
14
Saturday, August 29, 2009
![Page 24: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/24.jpg)
CSS
15
Saturday, August 29, 2009
![Page 25: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/25.jpg)
CSSarticle, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
*see html5doctor for full reset stylesheet.
15
Saturday, August 29, 2009
![Page 26: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/26.jpg)
16
Saturday, August 29, 2009
![Page 27: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/27.jpg)
17
Saturday, August 29, 2009
![Page 28: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/28.jpg)
The <header> element represents a group of introductory or navigational aids.
<header>
18
Saturday, August 29, 2009
![Page 29: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/29.jpg)
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>
19
Saturday, August 29, 2009
![Page 30: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/30.jpg)
Outline
Mappetite1.City guidemaps to great food2.Untitled Section3.Mappetite Mondays
1.Stoptaste: Can Ravell in Barcelona2.Wandersee: Thompkins Square Park3.Wandersee: Alcatraz Island
4.Openings & Closings5.Connect with Mappetite!
20
Saturday, August 29, 2009
![Page 31: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/31.jpg)
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>
21
Saturday, August 29, 2009
![Page 32: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/32.jpg)
22
Saturday, August 29, 2009
![Page 33: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/33.jpg)
23
Saturday, August 29, 2009
![Page 34: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/34.jpg)
The <section> element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading, possibly with a footer.
<section>
24
Saturday, August 29, 2009
![Page 35: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/35.jpg)
The <article> element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site.
<article>
25
Saturday, August 29, 2009
![Page 36: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/36.jpg)
26
Saturday, August 29, 2009
![Page 37: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/37.jpg)
27
Saturday, August 29, 2009
![Page 38: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/38.jpg)
The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the <aside> element, and which could be considered separate from that content.
<aside>
28
Saturday, August 29, 2009
![Page 39: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/39.jpg)
29
Saturday, August 29, 2009
![Page 40: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/40.jpg)
30
Saturday, August 29, 2009
![Page 41: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/41.jpg)
The <footer> element represents a footer for its nearest ancestor sectioning content. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
<footer>
31
Saturday, August 29, 2009
![Page 42: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/42.jpg)
The <address> element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.
<address>
32
Saturday, August 29, 2009
![Page 43: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/43.jpg)
33
Saturday, August 29, 2009
![Page 44: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/44.jpg)
Validation?
http://validator.w3c.org/check
http://html5.validator.nu/
http://gsnedders.html5.org/outliner/
34
Saturday, August 29, 2009
![Page 45: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/45.jpg)
Resources
http://wiki.whatwg.org/wiki/FAQ
http://whatwg.org/html5
#whatwg (irc.freenode.org)
http://html5doctor.com
http://htmldemos.com
35
Saturday, August 29, 2009
![Page 46: Getting Started with html5 - miketaylr.comThe element represents the contact information for its nearest article or body element ancestor. If that is the body element,](https://reader036.fdocuments.us/reader036/viewer/2022062606/5feb8437c41af50d900d3583/html5/thumbnails/46.jpg)
thanks.
*http://www.flickr.com/photos/justinsomnia/
36
Saturday, August 29, 2009