HTML5:HTML5:

New capabilities, new markupNew capabilities, new markup

新しい機能、新しいマークアップ新しい機能、新しいマークアップ

Daniel Davis, Opera SoftwareDaniel Davis, Opera Software@ourmaninjapan@ourmaninjapan

User Agents – not just browsersUser Agents – not just browsers

ユーザエージェントはブラウザだけではないユーザエージェントはブラウザだけではない

User AgentsUser Agentsユーザエージェントユーザエージェント

BrowsersBrowsersブラウザブラウザ

Why use new markup?Why use new markup?

新しいマークアップの利点は？新しいマークアップの利点は？

● AccessibilityAccessibility● Easily indexableEasily indexable● Future-proofFuture-proof● CoolCool

● アクセシビリティアクセシビリティ● 検索エンジンが見つけやすい検索エンジンが見つけやすい● 将来のための対策将来のための対策● かっこいいかっこいい

Create wonderful websites with HTML5?Create wonderful websites with HTML5?

HTML5HTML5で素敵なホームページが作れますか？で素敵なホームページが作れますか？

Why not use new markup?Why not use new markup?

新しいマークアップの欠点は？新しいマークアップの欠点は？

● Too broadToo broad● Too difficultToo difficult● UnsupportedUnsupported

● 分野が広すぎる分野が広すぎる● 難しすぎる難しすぎる● 対応されていない対応されていない

HTML5HTML5

HTML4HTML4XHTMLXHTML

Removed elementsRemoved elements無くなった要素無くなった要素

<center><center><font><font>

<strike><strike><u><u>

<frame>/<frameset><frame>/<frameset><applet><applet>

......

Added elementsAdded elements追加された要素追加された要素

<article><article><section><section><aside><aside>

<hgroup><hgroup><header><header><footer><footer>

<nav><nav><time><time>

<video>/<audio><video>/<audio><canvas><canvas>

……

“Pave the cowpaths”

「牛の通り道を舗装する」

flickr.com/foxypar4flickr.com/foxypar4

Flexible syntaxFlexible syntax柔軟性のある文法柔軟性のある文法

<br><br><br/><br/>

<div id=”example”><div id=”example”><div id=example><div id=example>

““If you like it, you can keep it”If you like it, you can keep it”

「今のままが良いであれば、今のままで良い」「今のままが良いであれば、今のままで良い」

diveintohtml5.orgdiveintohtml5.org

What about unsupported elements?What about unsupported elements?

対応されていない要素は？対応されていない要素は？

if(!/*@cc_on!@*/0) return;if(!/*@cc_on!@*/0) return;

var e = "abbr,article,aside,audio,canvas,var e = "abbr,article,aside,audio,canvas,

datalist,details,eventsource,figure,footer,datalist,details,eventsource,figure,footer,

header,hgroup,mark,menu,meter,nav,output,header,hgroup,mark,menu,meter,nav,output,

progress,section,time,video".split(',');progress,section,time,video".split(',');

var i=e.length;var i=e.length;

while(i--){while(i--){

document.createElement(e[i]);document.createElement(e[i]);

}}

remysharp.com/2009/01/07/html5-enabling-scriptremysharp.com/2009/01/07/html5-enabling-script

article, aside, dialog, details, figure, article, aside, dialog, details, figure,

footer, header, hgroup, nav, section, time { footer, header, hgroup, nav, section, time {

display:block;display:block;

}}

html5doctor.com/html-5-reset-stylesheethtml5doctor.com/html-5-reset-stylesheet

flickr.com/laffy4kflickr.com/laffy4k

HTML5 in practice...HTML5 in practice...

HTML5HTML5を使ってみよう！を使ってみよう！