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

1. HTML5:
New capabilities, new markup
新しい機能、新しいマークアップ
Daniel Davis, Opera Software
@ourmaninjapan

2. User Agents – not just browsers
ユーザエージェントはブラウザだけではない

3. Browsers
ブラウザ
User Agents
ユーザエージェント

4. Why use new markup?
新しいマークアップの利点は？

5. ●
Accessibility ●
アクセシビリティ
●
Easily indexable ●
検索エンジンが見つけやすい
● Future-proof ● 将来のための対策
● Cool ● かっこいい

6. Create wonderful websites with HTML5?
HTML5で素敵なホームページが作れますか？

7. Why not use new markup?
新しいマークアップの欠点は？

8. ●
Too broad ●
分野が広すぎる
●
Too difficult ●
難しすぎる
● Unsupported ● 対応されていない

9. HTML4
XHTML
HTML5

12. Removed elements
無くなった要素
<center>
<font>
<strike>
<u>
<frame>/<frameset>
<applet>
...

13. Added elements
追加された要素
<article>
<section>
<aside>
<hgroup>
<header>
<footer>
<nav>
<time>
<video>/<audio>
<canvas>
…

14. “Pave the cowpaths”
「牛の通り道を舗装する」
flickr.com/foxypar4

17. Flexible syntax
柔軟性のある文法
<br>
<br/>
<div id=”example”>
<div id=example>

18. “If you like it, you can keep it”
「今のままが良いであれば、今のままで良い」
diveintohtml5.org

19. What about unsupported elements?
対応されていない要素は？

20. if(!/*@cc_on!@*/0) return;
var e = "abbr,article,aside,audio,canvas,
datalist,details,eventsource,figure,footer,
header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video".split(',');
var i=e.length;
while(i--){
document.createElement(e[i]);
}
remysharp.com/2009/01/07/html5-enabling-script

21. article, aside, dialog, details, figure,
footer, header, hgroup, nav, section, time {
display:block;
}
html5doctor.com/html-5-reset-stylesheet

22. flickr.com/laffy4k
HTML5 in practice...
HTML5を使ってみよう！