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

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>

<![endif]-->

html5 shiv script on google code:

10

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.

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.

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-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

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.

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.

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.

31

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

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.

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-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/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