14. HTML
<div>
Bob Smith
Smithy
<a href="http://www.example.com">www.example.com</a>.
Albuquerque (NM) ACME Corp.
</div>
http://www.google.com/support/webmasters/bin/topic.py?topic=21997
15. vCard
BEGIN:VCARD
VERSION:3.0
N:Bob Smith
FN:Bob Smith
NICKNAME:Smithy
URL: http://www.example.com
TITLE:
ORG:ACME Corp
ADR;TYPE=work:;;;Albuquerque;NM;;
END:VCARD
http://www.google.com/support/webmasters/bin/topic.py?topic=21997
20. HTML Standards
• HTML 4.01: Still using today
• XHTML 1: Bridge between HTML and XML
• XHTML 1.1: Preparing for Semantic Web
• XHTML 2.0 ( )
• (X)HTML5 by WHATWG
31. <hgroup>
<hgroup>
<h1>My Weblog</h1>
<h2 class="tagline">A lot of effort went into making this effortless.</h2>
</hgroup>
<div class="entry">
<h2>Travel day</h2>
</div>
<div class="entry">
<h2>I'm going to Prague!</h2>
</div>
http://diveintohtml5.org/semantics.html
32. Outline
• My Weblog
• Travel day
• I'm going to Prague!
http://diveintohtml5.org/semantics.html
33. Site Title and Article Title
<h1>My Weblog</h1>
<h2 class="tagline">A lot of effort went into making this effortless.</h2>
<div class="entry">
<h2>Travel day</h2>
</div>
<div class="entry">
<h2>I'm going to Prague!</h2>
</div>
http://diveintohtml5.org/semantics.html
34. Outline
• My Weblog
• A lot of effort went into making this effortless
• Travel day
• I'm going to Prague!
http://diveintohtml5.org/semantics.html
35. Mixin
• Is <article> in <article> valid ?
• Is <article> in <section> valid ?
• How about <header> in <article> ?
36. Yes
<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>
</section>
</article>
http://dev.w3.org/html5/spec/sections.html#the-article-element
41. Examples
<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>
http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element
42. Examples
<figure>
<p>'Twas brillig, and the slithy toves<br>
Did gyre and gimble in the wabe;<br>
All mimsy were the borogoves,<br>
And the mome raths outgrabe.</p>
<figcaption><cite>Jabberwocky</cite> (first verse).
Lewis Carroll, 1832-98</figcaption>
</figure>
http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element
53. Example
<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
<p>Look around and you will find, no-one's really
<mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>
http://dev.w3.org/html5/spec/text-level-semantics.html#the-mark-element
56. Annoying pubdate
• without pubdate : just a time
• with pubdate : page publish time
• with pubdate and inside an <article> :
article’s publish time
57. <a>
• block level link howto ?
• XHTML 2 :
• href is global level attribute
• HTML5 ?
58. Block Level Link in HTML5
<a href="http://blog.othree.net">
<p>I'm block. But I always try to be a link too.</p>
<p>me too.</p>
</a>
a{
display: block;
}
77. New Attributes
• autofocus: auto focus
• autocomplete: browser’s auto complete
• placeholder: short hint
• multiple for [type=file]: upload multiple file
78. Validation
• support new input types
• pattern attribute for <input>
• novalidate attribute for <form>
