6. • New semantically-rich markup
• Changes to the markup you know and love
7. • New semantically-rich markup
• Changes to the markup you know and love
• APIs that can access device-specific features
8. • New semantically-rich markup
• Changes to the markup you know and love
• APIs that can access device-specific features
• APIs for caching and storing items in the browser
9. • New semantically-rich markup
• Changes to the markup you know and love
• APIs that can access device-specific features
• APIs for caching and storing items in the browser
• CSS3
10. • New semantically-rich markup
• Changes to the markup you know and love
• APIs that can access device-specific features
• APIs for caching and storing items in the browser
• CSS3
11. “ HTML5 DOES NOT INCLUDE
JAVASCRIPT APIS, CSS3,
“
AMPERSANDS, OR CAT PICTURES!
16. SECTIONING ELEMENTS
• header <header>
• nav <nav>
• article
<article>
• section
• aside <section> <aside>
• footer <aside>
<section>
<footer>
The header element represents a group of introductory or navigational aids.
17. SECTIONING ELEMENTS
• header <header>
• nav <nav>
• article
<article>
• section
• aside <section> <aside>
• footer <aside>
<section>
<footer>
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.
18. SECTIONING ELEMENTS
• header <header>
• nav <nav>
• article
<article>
• section
• aside <section> <aside>
• footer <aside>
<section>
<footer>
The article element represents a self-contained document, page,
application, or widget which is fit for syndication.
19. SECTIONING ELEMENTS
• header <header>
• nav <nav>
• article
<article>
• section
• aside <section> <aside>
• footer <aside>
<section>
<footer>
The section element represents a thematic grouping of content.
20. SECTIONING ELEMENTS
• header <header>
• nav <nav>
• article
<article>
• section
• aside <section> <aside>
• footer <aside>
<section>
<footer>
The aside element represents content that is related to the surrounding
document/article, but could be considered separate from that content.
21. SECTIONING ELEMENTS
• header <header>
• nav <nav>
• article
<article>
• section
• aside <section> <aside>
• footer <aside>
<section>
<footer>
The footer element typically contains information about its section,
such as authors, links to related documents, copyright information, etc.
24. <article>
<h1> Lorem ipsum dolor </h1>
<section>
<h1> Chapter One </h1>
<h2> In the Beginning </h2>
<p> ... </p>
<h2> Meanwhile, Back at the Ranch </h2>
<p> ... </p>
</section>
<aside>
<blockquote> <p> ... </p> </blockquote>
</aside>
<section>
<h1> Chapter Two </h1>
<p> ... </p>
</section>
</article>
25. <article>
<h1> Lorem ipsum dolor </h1>
<section>
<h1> Chapter One </h1>
<h2> In the Beginning </h2>
<p> ... </p>
<h2> Meanwhile, Back at the Ranch </h2>
<p> ... </p>
</section>
<aside>
<blockquote> <p> ... </p> </blockquote>
</aside>
<section>
<h1> Chapter Two </h1>
<p> ... </p>
</section>
</article>
26. <article>
<h1> Lorem ipsum dolor </h1>
<section>
<h1> Chapter One </h1>
<h2> In the Beginning </h2>
<p> ... </p>
<h2> Meanwhile, Back at the Ranch </h2>
<p> ... </p>
</section>
<aside>
<blockquote> <p> ... </p> </blockquote>
</aside>
<section>
<h1> Chapter Two </h1>
<p> ... </p>
</section>
</article>
27. <article>
<h1> Lorem ipsum dolor </h1>
<section>
<h1> Chapter One </h1>
<h2> In the Beginning </h2>
<p> ... </p>
<h2> Meanwhile, Back at the Ranch </h2>
<p> ... </p>
</section>
<aside>
<blockquote> <p> ... </p> </blockquote>
</aside>
<section>
<h1> Chapter Two </h1>
<p> ... </p>
</section>
</article>
28. DOCUMENT OUTLINE
•untitled document
• untitled header
• untitled nav
• Lorem Ipsum Dolor
• Chapter One
• In The Beginning
• Meanwhile, Back at the Ranch
• untitled aside
• Chapter Two
• untitled aside
• untitled footer
29. DOCUMENT OUTLINE
•untitled document
• untitled header
• untitled nav
HTML5 Outliner for Chrome
• Lorem Ipsum Dolor
Generates a navigable page outline with heading and sectioning elements.
• Chapter One
• In The Beginning
http://wil.to/html5/2 Back at the Ranch
• Meanwhile,
• untitled aside
• Chapter Two
• untitled aside
• untitled footer
30. MORE NEW HOTNESS
• meter
Represents a scalar measurement within a known range, or a fractional value.
<meter>2 of 6 gigabytes</meter> used.
31. MORE NEW HOTNESS
• meter
Represents a scalar measurement within a known range, or a fractional value.
<meter>2 of 6 gigabytes</meter> used.
• progress
Represents the completion progress of a task within a known range.
<progress max="100">80%</meter> complete.
32. MORE NEW HOTNESS
• meter
Represents a scalar measurement within a known range, or a fractional value.
<meter>2 of 6 gigabytes</meter> used.
• progress
Represents the completion progress of a task within a known range.
<progress max="100">80%</meter> complete.
• time
Represents dates and times in a machine-readable way.
On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.
33. MORE NEW HOTNESS
• meter
Represents a scalar measurement within a known range, or a fractional value.
<meter>2 of 6 gigabytes</meter> used.
• progress
Represents the completion progress of a task within a known range.
<progress max="100">80%</meter> complete.
• time
Represents dates and times in a machine-readable way.
On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.
• output
Represents the result of a calculation.
<input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>
34. MORE NEW HOTNESS
• meter
Represents a scalar measurement within a known range, or a fractional value.
<meter>2 of 6 gigabytes</meter> used.
• progress
Represents the completion progress of a task within a known range.
<progress max="100">80%</meter> complete.
• time
Represents dates and times in a machine-readable way.
On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.
• output
Represents the result of a calculation.
<input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>
• blink
Is gone, and if I ever catch you using it again so help me, guys.
35. MORE NEW HOTNESS
• meter
Represents a scalar measurement within a known range, or a fractional value.
<meter>2 of 6 gigabytes</meter> used.
• progress
The HTML5 Spec progress of a task within a known range.
Represents the completion for Web Developers
<progress max="100">80%</meter> complete.
Formatted for readability and quick access to information.
• time
Represents dates and times in a machine-readable way.
http://developers.whatwg.org/ 2010, 2:55am EDT</time>.
On <time datetime="2010-05-24T02:55:30-04:00">May 24th
• output
Represents the result of a calculation.
<input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>
• blink
Is gone, and if I ever catch you using it again so help me, guys.
38. HTML5 Support in IE 6/7/8
Remy Sharp’s HTML5-enabling script for Internet Explorer.
http://wil.to/html5/3
YOU KNEW IT WOULD COME UP EVENTUALLY
39. REPURPOSED ELEMENTS
<dl>, <dt>, and <dd>
An association list consisting of zero or more key-value groups.
<dl>
<dt>Full Name:</dt>
<dd>John Smith</dd>
<dt>Occupation:</dt>
<dd>Doctor</dd>
</dt>
42. REPURPOSED ELEMENTS
<cite>
Represents the title of a work (a book, song, film, etc.)—but not a
person’s name.
<p>I don’t quite agree with the <cite>HTML5 spec</cite> here.</p>
61. FONT-FACE
@font-face {
font-family: 'AllerBold';
src: url('aller_bd-webfont.eot');
src: url('aller_bd-webfont.eot?#iefix') format('embedded-
opentype'),
Font Squirrel
url('aller_bd-webfont.woff') format('woff'),
url('aller_bd-webfont.ttf') format('truetype'),
A repository of free and @font-face licensed fonts, as well as a tool
url('aller_bd-webfont.svg#AllerBold') format('svg');
to generate the appropriate @font-face syntax.
}
http://www.fontsquirrel.com/