Slide 1
Slide 1 text
HTML5 入門
2013.3.16 @姫路IT系勉強会 Vol.15
@spark6251 （N@N）
Slide 2
Slide 2 text
自己紹介
• N@N（@spark6251）
• N@N→NOaN→NOAN→ノアン
• 明石高専 電気情報工学科四年生
• プログラミングあんまりしてない
• たぶんWeb屋
進行中のお仕事
• 明石高専
Slide 3
Slide 3 text
ねらい
• HTML5について幾らか知ってもらう
• セマンティクスな構文を
Slide 4
Slide 4 text
ねらい
• HTML5について幾らか知ってもらう
• セマンティクスな構文を
• あとXHTMLdis
Slide 5
Slide 5 text
セマンティクスについて――
Slide 6
Slide 6 text
内容
• HTMLとは
• HTML5とは
• HTML 4.01との比較
• 読める！DTD――1分で分かる？DTD入門
• まとめ
Slide 7
Slide 7 text
1. HTMLとは
Slide 8
Slide 8 text
ところで
Slide 9
Slide 9 text
そもそもHTMLとはなんぞや？
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
まずMIMEタイプの話
Content-Type:
• text/html
• text/css
• image/jpeg
• application/pdf
URLの付いてるもの全てにあるどう表示・処理す
べきかの唯一の指標。
参考：IANA | MIME Media Types
(http://www.iana.org/assignments/media-types)
Slide 12
Slide 12 text
XHTMLの話
• 要素名は小文字(ex.
• 空要素は閉じる(ex.
• 全ての属性値は囲む(ex.
• 全ての属性値は囲む(ex.
•
ちなみにXHTML 1.1でlang属性は廃止
Slide 13
Slide 13 text
XHTMLの話
1998.02：W3CによるXML
そもそもXMLは厳格な構文である
HTMLをXMLの形式で再定義
できたXHTMLは厳格である
application/xhtml+xmlで厳格なチェック！
エラーがあっても正常に[要出典]動作するHTML
とはおさらば！
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
結局使われたのはXHTML 1.0でtext/html
つまり構文はXHTMLながら実情はHTML
• application/xhtml+xml（理想）
• XHTML 1.0でtext/html（現実）
Slide 17
Slide 17 text
＿＿＿
/ ||￣￣|| ∧＿∧
|.....||＿＿|| （ ） どうしてこうなった…
|￣￣＼三⊂/￣￣￣/
| | ( ./ /
W3C
Slide 18
Slide 18 text
そもそも
text/htmlという逃げ道を
置いていたのが悪い
Slide 19
Slide 19 text
どうしてこうなった？
• そもそもHTMLの時代からエラーのあるHTML
を書いている人が多かった。
（現在でも99%以上のWebページが一つの
エラーを含んでいるという推測も有り）
Slide 20
Slide 20 text
結論
Slide 21
Slide 21 text
誰もわざわざ
厳しくしようと
しなかった
Slide 22
Slide 22 text
W3Cの対策
• XHTML 1.1でMIMEタイプは
application/xhtml+xmlのみに限定
• XHTML 1.2、XHTML 2.0も同様（結局両方共
中止）
Slide 23
Slide 23 text
そして今
ほとんどXHTML 1.0であり1.1は普及しなかった。
XHTMLを使っているとは名ばかりのXMLらしい
HTMLである。
Slide 24
Slide 24 text
XHTML(developer)dis
XHTMLdis
実態はXHTML(developer)dis
Slide 25
Slide 25 text
XHTML(developer)dis
XHTMLdis
実態はXHTML(developer)dis
HTMLdis
ちゃんとした構文で書かない
Slide 26
Slide 26 text
XHTML(developer)dis
XHTMLdis
実態はXHTML(developer)dis
HTMLdis
W3Cdis
結局そうなったのは誰のせい？
ちゃんとした構文で書かない
Slide 27
Slide 27 text
XHTML is HTML
Slide 28
Slide 28 text
XHTML is HTML
というギャグを
Slide 29
Slide 29 text
2. HTML5とは
HTML5になって何がどうなったか。
HTML5で何ができるか。
Slide 30
Slide 30 text
HTML5とは一体何でしょう？
Slide 31
Slide 31 text
そうですね、
HTML5とか
JavaScriptで作った
コンテンツのことです
Slide 32
Slide 32 text
冗談はさておき
Slide 33
Slide 33 text
冗談はさておき
いや割と冗談でもないんですが
Slide 34
Slide 34 text
小話
• 2004.06：W3Cがワークショップを開く
Webアプリケーション開発者向けの機能が出るが
W3Cの構想ではない……
• HTMLやCSSのためにDOMの拡張を？→否決
• その機能を実現しようと離反（WHATWG）
• W3CはXHTML 2.0、WHATWGはフォームな
どの機能
• XHTML 2.0は終息し、W3CとWHATWGは共
同作業、HTML5開発へ
Slide 35
Slide 35 text
つまり
• HTML5の目的：明確なタグ構造、
デベロッパーへの機能
• 事実HTML5とはWeb Applications 1.0＋
Web Forms 2.0
• FLASHの代替だとか、速度云々だとか、完全な
勘違い
Slide 36
Slide 36 text
HTML5とは
• HTMLのver. 5
• 2014年に策定予定
• デベロッパー泣かせ（主にブラウザのせい）
• HTMLと5の間にスペースは挿れない
• HTML＋XHTML1＋DOM2 HTML
• フォームがかなり強くなった
Slide 37
Slide 37 text
HTML5とは
今までのHTML
• タグ付けした文書の
製作
• Webアプリケーショ
ンには不向き
HTML5
• より強固なタグ付け
• Webアプリケーショ
ンの開発の手助け
• 便利[要出典]
• わかりやすい[要出典]
• 神[要出典]
Slide 38
Slide 38 text
canvas
Slide 39
Slide 39 text
Web Storage
File API
WebGL
WebSocket
Geolocation API
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
HTML5の機能でもJSを使う
更にはJSの優良ライブラリの増加
Slide 45
Slide 45 text
HTML5とは
•
• 物理タグの論理タグ化 • 意味の変わった要素 • 消えた要素、新しい要素
• 物理タグの論理タグ化 • 意味の変わった要素 • 消えた要素、新しい要素
Slide 46
Slide 46 text
• u：下線→軽いラベル付け
• i：イタリック体→思考や専門用品
• hr：水平線→段落レベルの区切り
Slide 47
Slide 47 text
• u：下線→軽いラベル付け
• i：イタリック体→思考や専門用品
• hr：水平線→段落レベルの区切り
最早要素名から予測不可能
Slide 48
Slide 48 text
• 【重要】small：小さい文字→注釈や著作権表示
• address：連絡先など→連絡先のみ
Slide 49
Slide 49 text
消えた要素
これについては一言だけ
Slide 50
Slide 50 text
まともなHTML書いてたら
消えた要素なんか
使ってないので
知らなくていいです
Slide 51
Slide 51 text
新しい要素
• nav
• section
• header
• footer
• article
• aside
• video
• audio
• canvas
Slide 52
Slide 52 text
2013年5月2日発売
Slide 54
Slide 54 text
section
• 汎用セクション
• 基本的にヘッダを伴
う
• div要素のが汎用なブ
ロック要素に対し、
section要素は汎用な
セクション
Slide 55
Slide 55 text
header
![]()
• ヘッダ
• 見出し
• ページ全体のヘッダ
でも良いし、セク
ションごとの見出し
でも良い
Slide 56
Slide 56 text
footer
• フッタ
• サイト全体のフッタ
でも良いし、セク
ションごとのフッタ
でも良い
Slide 57
Slide 57 text
article
• 例えば文書、ブログ
記事、コメント欄、
もしくはサイト内で
自己完結してる項目
Slide 58
Slide 58 text
aside
• 話の内容から少しそ
れたもの
• 印刷物の囲み記事
• 広告
Slide 59
Slide 59 text
video
• 動画を再生する
• controlsでインター
フェース表示
• autoplayで自動再生
Slide 60
Slide 60 text
audio
• 音声を再生する
• controlsでインター
フェース表示
• autoplayで自動再生
Slide 61
Slide 61 text
canvas
• 図形を描く
• 標準のHTMLとJSの
みで図形が描ける
（！）
• widthとheightのデ
フォルト値はそれぞ
れ300と150
Slide 62
Slide 62 text
canvas
$(function() {
//var ctx =
document.getElementById('sample').getContext('2d');
var ctx = $('#sample').get(0).getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(10, 10, 10, 20);
});
Slide 63
Slide 63 text
参考：HTML5 &CSS3 Support
(http://www.findmebyip.com/litmus)
Slide 64
Slide 64 text
参考：HTML5 &CSS3 Support
(http://www.findmebyip.com/litmus)
Slide 65
Slide 65 text
登場させる意味
• 当然わかりやすい構文になる（人間にも機械に
も）
• （そもそもユーザエージェントはid名から意味
を推測してはいけない（！））
Slide 66
Slide 66 text
3. HTML 4.01との比較
HTML5ではどう書けるのか
Slide 67
Slide 67 text
HTML 4.01
Title
HTML5
Title
Slide 68
Slide 68 text
MIMEタイプの消失
単純な話、
Webで使われている標準のスタイルシートはCSS
のみで、スクリプト言語はJavaScriptのみである
省略された
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
JavaScript
Slide 76
Slide 76 text
The type attribute gives the styling language.
If the attribute is present,
its value must be a valid MIME type
that designates a styling language.
The charset parameter must not be specified.
The default value for the type attribute,
which is used if the attribute is absent, is "text/css"
参考：HTML Living Standard
(http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#the-script-element)
The src attribute, if specified,
gives the address of the external script resource to use.
The value of the attribute must be a
valid non-empty URL potentially surrounded by spaces
identifying a script resource of the type given by the type attribute,
if the attribute is present,
or of the type "text/javascript", if the attribute is absent.
Slide 77
Slide 77 text
type属性はスタイルシート言語を提供する。
属性が存在する場合、
その値は言語を指定する
有効なMIMEタイプでなければいけない。
charsetパラメータが指定することはできない。
属性が存在しない場合、
type属性のデフォルト値は”text/css”である。
Slide 78
Slide 78 text
HTML 4.01
![]()
HTML5
![]()
Slide 79
Slide 79 text
4. 読める！DTD――1分で分かる？DTD入門
ところでDTDは読めますか？
Slide 80
Slide 80 text
参考：strict.dtd
Slide 81
Slide 81 text
形式 意味
A, B A, Bがこの順で
A&B A, Bが順不同で
+A 子孫にAが記述可能
-A 子孫にAが記述不可
Slide 82
Slide 82 text
Slide 83
Slide 83 text
あれ
htmlも
headも
bodyも
省略できるじゃん
Slide 84
Slide 84 text
Title
Slide 85
Slide 85 text
Title
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
htmlも
headも
bodyも
いらんかったんや！
Slide 88
Slide 88 text
結局DTDっているの？
• HTML5にDTDは存在しない←表現しきれない
• 自身で考えてコーディング
• 自身で思う適した書き方で良い
参考：WCAN mini Markup vol.11をとおして、
HTML5のDTDについて考えてみた
(http://chifffon.net/blog/web/entry-135.html)
Slide 89
Slide 89 text
コンテンツモデル
• Metadata、Flow、Sectioning、Heading、
Phrasing、Embedded、Interactiveの6つの
コンテンツもでるによる文書構造
• 例えばa要素はFlow、Phrasing、Interactive
に属す。
• block要素、inline要素の区別ではない
Slide 91
Slide 91 text
それでもDTDを軽く知っておくことはミスをなく
せるし、正しい文書構造にさせることは間違いな
い。
Slide 92
Slide 92 text
5. まとめ
• HTML5で新しく出た要素でわかりやすい
HTMLを
• jQueryなどの手軽に使えるライブラリが増えて
るのでこの機にJavaScript等の言語も
Title
Slide 93
Slide 93 text
御清聴ありがとうございました