『現場のプロが教えるWeb制作の最新常識』発売記念イベント

最新仕様から読み解く
HTML5の“いま”と“なぜ”

酒井優

現在は勧告候補の段階ではありますが
既に新規に作られるWebサイトは
HTML5が前提になっています

セッションの流れ

自己紹介
HTML5 勧告候補の歩み
新要素のおさらい
ポリフィルとフォールバック
セマンティックな要素
デザインとディレクションとHTML5
まとめ

酒井優

フリーのWebデザイナー＆コーダー＆ディレクター
WEBCRE8.jpを運営する技術系ブロガー
HTML5KARUTAやその他のWebコンテンツを制作中
ハッカソンやセミナーイベント等も企画・実施

Twitter

@glatyou
@webcre8

コミュニティ活動

html5j スタッフ
html5j マークアップ部副部長
日本ディレクション協会メンバー

勧告 W3Cから「この技術は十分に試験的な運用がなされ、
もう問題なく使えますよ」と広く勧められる段階

勧告候補勧告に向けて運用・テストを行っている段階

Webの開発者はみんなで使いながら
デバッグを行っている様な感じです

勧告候補の間にあった変更

追加された要素	削除された要素
dialog	hgroup
data	command
main	menu
rb
rtc
template

その他微妙な解釈が変わったりしてわりと安定していない

h*はやっぱりランク付けとして使ってねー！とか
blockquoteのなかには帰属を入れても構わないよとか

dialog要素

ダイアログボックス等を表す要素

<dialog open>これはダイアログボックスです</dialog>

data要素

マシンリーダブルなデータが設定されたコンテンツを表す

金<data itemprop="price" value="10000">一萬</data>円也

main要素

文書のメインコンテンツであることを表す要素

<body>
<header>ヘッダー情報</header>
<nav>ナビゲーション</nav>
<main>
<section>
<h1>メインコンテンツ</h1>
<p>内容</p>
</section>
</main>
<aside>付属コンテンツ</aside>
<footer>フッター情報</footer>
</body>

ruby関連要素

文章にふりがなや注釈を添えるルビを表す要素群

これまで

<ruby>僕<rp>(</rp><rt>ぼく</rt><rp>)</rp></ruby>らの<ruby>地球<rp>(</rp><rt>ほし</rt><rp>)</rp></ruby>

これから

<ruby><rb>僕</rb><rp>(</rp><rt>ぼく</rt><rp>)</rp></ruby>らの<ruby><rb>地</rb><rb>球</rb><rp>(</rp><rtc><rt>ほ</rt><rt>し</rt></rtc><rp>・</rp><rtc><rt>ち</rt><rt>きゅう</rt></rtc><rp>)</rp></ruby>

template要素

文書内におけるスクリプトで繰り返し使われる
コンテンツを表す

<table>
 <thead>
<tr>
 <th>Data1 <th>Data2 <th>Data3 <th>Data4
 <tbody>
<template id="row">
 <tr><td><td><td><td>
</template>
</table>

その他

picture要素、srcset等のレスポンシブイメージについての
仕様はいずれもワーキングドラフトの段階
フォーム・コントロール要素にも豊富な機能が追加
contenteditable属性やmanifest属性など

details要素とsummary要素

トピックとその詳細を表す

Webkit・blink系ブラウザは対応(Androidは4.0から)

ポリフィル

dialog要素

Chrome Canaryでしか動かない…

ポリフィル

dialog element demo

XHTMLまでコンテンツの大枠を示すものがdivしかなかった

HTML5では
コンテンツの意味的な分割をsectionで行い
articleで投稿
navでナビゲーション
asideで関連性の薄いコンテンツ
mainで主要なコンテンツ
headerとfooterがそれぞれヘッダー、フッター情報を表す

figureで補足的なコンテンツを
blockquoteが引用ブロックを
pが段落を
その他のブロックやレイアウトの為にdivが使われる
これに加えて
テーブルモデルとフォームコントロール要素
各種のリストでほとんどのコンテンツを表現する

大まかにコンテンツの役割を判断できる

テキストに装飾をする場合も意味があって装飾する

キーボード入力を表す kbd
定義を表すdfn
リンクを表す a
コードを表す code
強い重要性を表す strong
印を付けたいテキストを表す mark

class名よりも普遍的な意図が表れる

Webサイトはアプリケーション化している
表現できないものはカスタム要素で

<blockquote class="twitter-tweet" lang="ja">
<p>【ブログ書きました】広大なWeb技術における地図のような本 — 現場のプロが教えるWeb制作の最新常識 - WEBCRE8.jp - 
<a href="http://t.co/OpCBemsZAA">http://t.co/OpCBemsZAA</a>
</p>
— ウェブクリ8 (@webcre8) 
<a href="https://twitter.com/webcre8/statuses/436333377457618944">2014, 2月 20</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>