html5: new capabilities, new markup
DESCRIPTION
新しい機能、新しいマークアップTRANSCRIPT
![Page 1: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/1.jpg)
HTML5:HTML5:
New capabilities, new markupNew capabilities, new markup
新しい機能、新しいマークアップ新しい機能、新しいマークアップ
Daniel Davis, Opera SoftwareDaniel Davis, Opera Software@ourmaninjapan@ourmaninjapan
![Page 2: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/2.jpg)
User Agents – not just browsersUser Agents – not just browsers
ユーザエージェントはブラウザだけではないユーザエージェントはブラウザだけではない
![Page 3: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/3.jpg)
User AgentsUser Agentsユーザエージェントユーザエージェント
BrowsersBrowsersブラウザブラウザ
![Page 4: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/4.jpg)
Why use new markup?Why use new markup?
新しいマークアップの利点は?新しいマークアップの利点は?
![Page 5: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/5.jpg)
● AccessibilityAccessibility● Easily indexableEasily indexable● Future-proofFuture-proof● CoolCool
● アクセシビリティアクセシビリティ● 検索エンジンが見つけやすい検索エンジンが見つけやすい● 将来のための対策将来のための対策● かっこいいかっこいい
![Page 6: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/6.jpg)
Create wonderful websites with HTML5?Create wonderful websites with HTML5?
HTML5HTML5で素敵なホームページが作れますか?で素敵なホームページが作れますか?
![Page 7: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/7.jpg)
Why not use new markup?Why not use new markup?
新しいマークアップの欠点は?新しいマークアップの欠点は?
![Page 8: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/8.jpg)
● Too broadToo broad● Too difficultToo difficult● UnsupportedUnsupported
● 分野が広すぎる分野が広すぎる● 難しすぎる難しすぎる● 対応されていない対応されていない
![Page 9: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/9.jpg)
HTML5HTML5
HTML4HTML4XHTMLXHTML
![Page 10: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/10.jpg)
![Page 11: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/11.jpg)
![Page 12: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/12.jpg)
Removed elementsRemoved elements無くなった要素無くなった要素
<center><center><font><font>
<strike><strike><u><u>
<frame>/<frameset><frame>/<frameset><applet><applet>
......
![Page 13: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/13.jpg)
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>
……
![Page 14: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/14.jpg)
“Pave the cowpaths”
「牛の通り道を舗装する」
flickr.com/foxypar4flickr.com/foxypar4
![Page 15: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/15.jpg)
![Page 16: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/16.jpg)
![Page 17: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/17.jpg)
Flexible syntaxFlexible syntax柔軟性のある文法柔軟性のある文法
<br><br><br/><br/>
<div id=”example”><div id=”example”><div id=example><div id=example>
![Page 18: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/18.jpg)
““If you like it, you can keep it”If you like it, you can keep it”
「今のままが良いであれば、今のままで良い」「今のままが良いであれば、今のままで良い」
diveintohtml5.orgdiveintohtml5.org
![Page 19: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/19.jpg)
What about unsupported elements?What about unsupported elements?
対応されていない要素は?対応されていない要素は?
![Page 20: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/20.jpg)
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
![Page 21: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/21.jpg)
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
![Page 22: HTML5: New capabilities, new markup](https://reader034.vdocuments.mx/reader034/viewer/2022051818/5495c0c3ac7959182e8b4ed5/html5/thumbnails/22.jpg)
flickr.com/laffy4kflickr.com/laffy4k
HTML5 in practice...HTML5 in practice...
HTML5HTML5を使ってみよう!を使ってみよう!