2. • Less Header Code
• More Semantic HTML tags
• Media Tags
• Geolocation
• Canvas
• Input Types
• Form Validation
• Draggable
• Local Storage
• Cross-Domain Messaging
• Web Sockets
• Eventually, 3D canvas
15. Address
<address>
<a href="../People/Raggett/">Dave Raggett</A>,
<a href="../People/Arnaud/">Arnaud Le Hors</A>,
contacts for the w3c HTML activity
</address>
Address applies to the nearest Article or Body tag.
17. Section
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>
18. Good
<body>
<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<h6>Sweet</h6>
<p>Red apples are sweeter</p>
<h1>Color</h1>
<p>Apples come in various
colors.</p>
</section>
</body>
19. Better
<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter</p>
</section>
</section>
<section>
<h2>Color</h2>
<p>Apples come in various colors.</p>
</section>
</body>
20. Figure and Figure Caption
<figure>
<img src="bubbles-work.jpeg"
alt="Bubbles, sitting in his office chair, works on his
latest project intently.">
<figcaption>Bubbles at work</figcaption>
</figure>
21. Figure and Figure Caption
<p>In <a href="#l4">listing 4</a> we see the primary
core interface
API declaration.</p>
<figure id="l4">
<figcaption>Listing 4. The primary core interface API
declaration.</figcaption>
<pre><code>interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence<byte> data);
void initSelfDestruct();
}</code></pre>
</figure>
22. Time and Publish Date Attribute
<time pubdate datetime="2009-10-09T14:28-08:00"></time>
23. <article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: George Washington</p>
<p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article>
<footer>
<p>Posted by: George Hammond</p>
<p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>
24. Breadcrumb Navigation
<nav>
<p>
<a href="/" rel="index up up up">Main</a> >
<a href="/products/" rel="up up">Products</a> >
<a href="/products/dishwashers/" rel="up">Dishwashers</a> >
<a>Second hand</a>
</p>
<p>
<a href="/" rel="index up up">Main</a> >
<a href="/second-hand/" rel="up">Second hand</a> >
<a>Dishwashers</a>
</p>
</nav>
Similarly, pagination can be done with
first, last, next and prev
27. Mark is highlighting something
<p><mark>Momentum is preserved across the wormhole.
Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>
Strong is different, denotes importance
<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening
will
annihilate anything in its path.</strong> Vortexes can be avoide
when
using sufficiently advanced dialing technology.</p>
28. Not all Navigation should use <nav>
<nav></nav>
only main navigation, for instance
footer nav is secondary
31. Itemscope and Itemprop
<div itemscope>
<p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Daniel</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts Water</
span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>
57. Editable Content
Turn an element into an editable area.
<script>
document.getElementsByTagName('p')[0].contentEditable = true;
</script>
58. Web Sockets
var ws = new WebSocket("ws://hostname:80/");
ws.onmessage = function (event) {
event.data
};
ws.onclose = function () {};
ws.onopen = function () {};