TOSSUG HTML5 讀書會新標籤與表單

HTML5 The Missing Part
othree

Outline

• Semantic Web
• HTML5
• Web Forms 2.0

Semantic Web

• Tim Bernes Lee

How ?

• XML for data
• (X)HTML for web content

(X)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 ( )

XHTML 2.0

•
•
• ex: no <h1> ~ <h6>, <br>

How ?
•
• <table> for not
• <p> for
• <h1> ~ <h6> for not
• <blockquote> for not
• <b>, <i>, <u>, <big>, <small>

http://www.certiﬁedchinesetranslation.com/openaccess/rdfa-primer.html

2nd Step

• RDFa, Microformats ... etc

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

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


RDFa
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
<span property="v:name">Bob Smith</span>
<span property="v:nickname">Smithy</span>

<a href="http://www.example.com" rel="v:url">www.example.com</a>.
Albuquerque (NM) <span property="v:affiliation">ACME
Corp</span>.
<span property="v:title"> </span>
</div>


Microformats
<div class="vcard">
<span class="fn">Bob Smith</span>
<span class="nickname">Smithy</span>

<a href="http://www.example.com" class="url">www.example.com</a>.
Albuquerque (NM) <span class="org">ACME Corp</span>.
<span class="title"> </span>
</div>


Microformats
hCalendar
hCard
rel-license
rel-nofollow
rel-tag
XFN
XOXO
...

Beneﬁts

• (Accessibility)
• SEO
•
•

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

New Structure Elements
<header>
<footer>
<nav>
<aside>
<article>
<hgroup>
<section>

A Web Page
<div id=”header”></div>

<ul id=”navigator”></ul>

<div id=”sidebar”>
<div id=”content”></div> </div>

<div id=”footer”></div>

A Web Page in HTML5
<header></header>

<nav></nav>

<aside>
<div id=”content”></div> </aside>

<footer></footer>

Structure Elements

• <header>
• <footer>
• <aside>
• <nav>

Weblog Index
<div class=”entry”></div>



Weblog Index
<article></article>

<article></article>

<article></article>

<article>

•
•
•
•
• ...etc

An Article
<h1></h1>

<p></p>

<h2></h2>

<p></p>

<h2></h2>

<p></p>

An Article
<h1></h1>

<p></p>

<section>
<h2></h2>

<p></p>

<h2></h2>

<p></p>

</section>

<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

Outline

• My Weblog

• Travel day

• I'm going to Prague!


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>


Outline

• My Weblog

• A lot of effort went into making this effortless

• Travel day

• I'm going to Prague!


Mixin

• Is <article> in <article> valid ?
• Is <article> in <section> valid ?
• How about <header> in <article> ?

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

<article>
<header>
<h1>Title</h1>
<p><time pubdate></p>
</header>

<p>Centent</p>

<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by</p>

<p><time pubdate></p>
</footer>
<p></p>
</article>
</section>
</article>

New Elements

<ﬁgure>
<ﬁgcaption>

for

http://html5doctor.com/the-ﬁgure-ﬁgcaption-elements/

Actually for
• Everything
• image
• code
• blockquote
• video
• ...etc

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-ﬁgure-element

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-ﬁgure-element

And...

<audio>
<video>
<canvas>
<embed>

New Inline Elements
<b>, <i>, <small>
<ruby>, <rt>, <rp>
<mark>
<time>
<a>

b, i, small redeﬁne

• <b> for typographic presentation is boldened
• <i> for alternate voice or mood
• <small> for small print

Ruby Markup

<ruby>
<rt> </rt>
<rt> </rt>
</ruby>

http://dev.w3.org/html5/spec/text-level-semantics.html#the-ruby-element

<rp>

<ruby>
<rp>(</rp><rt> </rt><rp>)</rp>
<rp>(</rp><rt> </rt><rp>)</rp>
</ruby>

( ) ( )
http://dev.w3.org/html5/spec/text-level-semantics.html#the-rp-element

mark usage

•
•
• highlight
• ...etc

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

Example

<time datetime="2006-09-23">a Saturday</time>
<time pubdate datetime="2009-08-30">today</time>

http://dev.w3.org/html5/spec/text-level-semantics.html#the-time-element

Annoying pubdate

• without pubdate : just a time
• with pubdate : page publish time
• with pubdate and inside an <article> :
article’s publish time

<a>

• block level link howto ?
• XHTML 2 :
• href is global level attribute
• HTML5 ?

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

Content Models

http://dev.w3.org/html5/spec/content-models.html#ﬂow-content

Remember Microformats ?
<div class="vcard">
<span class="fn">Bob Smith</span>
<span class="nickname">Smithy</span>

<a href="http://www.example.com" class="url">www.example.com</a>.
Albuquerque (NM) <span class="org">ACME Corp</span>.
<span class="title"> </span>
</div>


Microdata
<div itemscope itemtype="http://data-vocabulary.org/Person">
<span itemprop="name">Bob Smith</span>
<span itemprop="nickname">Smithy</span>.

<a href="http://www.example.com" itemprop="url">www.example.com</a>
Albuquerque (NM) <span itemprop="title"> </span>
<span itemprop="affiliation">ACME Corp</span>
</div>


attributes

• itemscope :
• itemtype :
• itemprop :

APIs

• document . getItems( [ types ] )
• element . properties
• element . itemValue [ = value ]

http://www.w3.org/TR/2010/WD-microdata-20100624/#microdata-dom-api

HTML 4.01 Spec

http://www.w3.org/TR/html401/

What’s New

• New Input Types
• New Attributes
• Form Validation

New Input Types
url
email
tel
number
range
color
date

DEMO
http://miketaylr.com/pres/html5/forms2.html

And One More Type

search

New Form Elements

<output>
<datalist>

<output>

<form>
<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output onforminput="value = a.valueAsNumber +
b.valueAsNumber"></output>
</form>

http://dev.w3.org/html5/spec/the-button-element.html#the-output-element

<datalist>
<input type="search" autofocus list="search-suggestions"/>
<datalist id="search-suggestions">
<option label="DM" value="Depeche Mode">
<option label="Moz" value="Morrissey">
<option label="NO" value="New Order">
<option label="TC" value="The Cure">
</datalist>

http://miketaylr.com/pres/html5/forms2.html

New Attributes

• autofocus: auto focus
• autocomplete: browser’s auto complete
• placeholder: short hint
• multiple for [type=ﬁle]: upload multiple ﬁle

Validation

• support new input types
• pattern attribute for <input>
• novalidate attribute for <form>

Opera Supports
http://www.opera.com/docs/specs/presto26/

TOSSUG HTML5 讀書會新標籤與表單

Recommended

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to TOSSUG HTML5 讀書會新標籤與表單 (20)

More from 偉格高 (12)

Recently uploaded (20)