getting started with html5 - miketaylr.comthe element represents the contact information for its...

Getting Started with html5

Mike Taylor @miketaylr

1

Saturday, August 29, 2009

What is html5?

And why should I care?

2


New semantic elements

3


4



Rich DOM APIs (local storage, native drag & drop, content editable fields, web forms 2.0)

5




Rich embedded content (<audio>, <video>, <canvas>)

5




Rich embedded content (<audio>, <video>, <canvas>)

...and a whole lot more.5


2022?

October 2009?

Timeframe

6


When can I use html5?

7


When can I use html5?Today!

7


When can I use html5?Today! (sorta)

7



IE (all of ‘em):

7


8


9


document.createElement(‘nav’);

9


html5 shiv script on google code:

10


http://html5shiv.googlecode.com/svn/trunk/html5.js

http://html5shiv.googlecode.com/svn/trunk/html5.js

11



Camino, FF2:http://remysharp.com/2009/04/14/html5-and-firefox2/

12


http://remysharp.com/2009/04/14/html5-and-firefox2/




A sample site.

13


Doctype

14


Doctype

“A DOCTYPE is a mostly useless, but required, header.”

14


Doctype

<!DOCTYPE html>


14


Doctype

<!DOCTYPE html>


That’s it.

14


CSS

15


CSSarticle, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }

*see html5doctor for full reset stylesheet.

15


16


17


The <header> element represents a group of introductory or navigational aids.

<header>

18


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


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


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

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



http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements




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


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


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

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



22


23


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


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


26


27


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


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




http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#sectioning-content


29


30


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








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


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

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



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

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

http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-body-element-0

http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-body-element-0

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

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

33


Validation?

http://validator.w3c.org/check

http://html5.validator.nu/

http://gsnedders.html5.org/outliner/

34


http://validator.w3.org/check

http://validator.w3.org/check

http://html5.validator.nu

http://html5.validator.nu



Resources

http://wiki.whatwg.org/wiki/FAQ

http://whatwg.org/html5

#whatwg (irc.freenode.org)

http://html5doctor.com

http://htmldemos.com

35










thanks.

*http://www.flickr.com/photos/justinsomnia/

36


http://www.flickr.com/photos/justinsomnia/

http://www.flickr.com/photos/justinsomnia/

getting started with html5 - miketaylr.comthe element represents the contact information for its...

Documents