Introduction to HTML5

HTML5 入門 2013.3.16 @姫路IT系勉強会 Vol.15 @spark6251 （N@N）

自己紹介 • N@N（@spark6251） • N@N→NOaN→NOAN→ノアン • 明石高専電気情報工学科四年生 • プログラミングあんまりしてない
• たぶんWeb屋進行中のお仕事 • 明石高専

ねらい • HTML5について幾らか知ってもらう • セマンティクスな構文を

ねらい • HTML5について幾らか知ってもらう • セマンティクスな構文を • あとXHTMLdis

セマンティクスについて――

内容 • HTMLとは • HTML5とは • HTML 4.01との比較 • 読める！DTD――1分で分かる？DTD入門
• まとめ

1. HTMLとは

ところで

そもそもHTMLとはなんぞや？

まずMIMEタイプの話 Content-Type: • text/html • text/css • image/jpeg • application/pdf
URLの付いてるもの全てにあるどう表示・処理すべきかの唯一の指標。参考：IANA | MIME Media Types (http://www.iana.org/assignments/media-types)

XHTMLの話 • 要素名は小文字(ex. <html> • 空要素は閉じる(ex. <br /> • 全ての属性値は囲む(ex.
<div width=“100”> • <html lang=“ja-JP” xml:lang=“ja-JP”> ちなみにXHTML 1.1でlang属性は廃止

XHTMLの話 1998.02：W3CによるXML そもそもXMLは厳格な構文である HTMLをXMLの形式で再定義できたXHTMLは厳格である application/xhtml+xmlで厳格なチェック！エラーがあっても正常に[要出典]動作するHTML とはおさらば！

結局使われたのはXHTML 1.0でtext/html つまり構文はXHTMLながら実情はHTML • application/xhtml+xml（理想） • XHTML 1.0でtext/html（現実）

＿＿＿ / ||￣￣|| ∧＿∧ |.....||＿＿|| （）どうしてこうなった… |￣￣＼三⊂/￣￣￣/ |
| ( ./ / W3C

そもそも text/htmlという逃げ道を置いていたのが悪い

どうしてこうなった？ • そもそもHTMLの時代からエラーのあるHTML を書いている人が多かった。（現在でも99%以上のWebページが一つのエラーを含んでいるという推測も有り）

結論

誰もわざわざ厳しくしようとしなかった

W3Cの対策 • XHTML 1.1でMIMEタイプは application/xhtml+xmlのみに限定 • XHTML 1.2、XHTML 2.0も同様（結局両方共中止）

そして今ほとんどXHTML 1.0であり1.1は普及しなかった。 XHTMLを使っているとは名ばかりのXMLらしい HTMLである。

XHTML(developer)dis XHTMLdis 実態はXHTML(developer)dis

XHTML(developer)dis XHTMLdis 実態はXHTML(developer)dis HTMLdis ちゃんとした構文で書かない

XHTML(developer)dis XHTMLdis 実態はXHTML(developer)dis HTMLdis W3Cdis 結局そうなったのは誰のせい？ちゃんとした構文で書かない

XHTML is HTML

XHTML is HTML というギャグを

2. HTML5とは HTML5になって何がどうなったか。 HTML5で何ができるか。

HTML5とは一体何でしょう？

そうですね、 HTML5とか JavaScriptで作ったコンテンツのことです

冗談はさておき

冗談はさておきいや割と冗談でもないんですが

小話 • 2004.06：W3Cがワークショップを開く Webアプリケーション開発者向けの機能が出るが W3Cの構想ではない…… • HTMLやCSSのためにDOMの拡張を？→否決 • その機能を実現しようと離反（WHATWG） •
W3CはXHTML 2.0、WHATWGはフォームなどの機能 • XHTML 2.0は終息し、W3CとWHATWGは共同作業、HTML5開発へ

つまり • HTML5の目的：明確なタグ構造、デベロッパーへの機能 • 事実HTML5とはWeb Applications 1.0＋ Web Forms
2.0 • FLASHの代替だとか、速度云々だとか、完全な勘違い

HTML5とは • HTMLのver. 5 • 2014年に策定予定 • デベロッパー泣かせ（主にブラウザのせい） • HTMLと5の間にスペースは挿れない
• HTML＋XHTML1＋DOM2 HTML • フォームがかなり強くなった

HTML5とは今までのHTML • タグ付けした文書の製作 • Webアプリケーションには不向き HTML5 •
より強固なタグ付け • Webアプリケーションの開発の手助け • 便利[要出典] • わかりやすい[要出典] • 神[要出典]

canvas

Web Storage File API WebGL WebSocket Geolocation API

HTML5の機能でもJSを使う更にはJSの優良ライブラリの増加

HTML5とは • <br /> • 物理タグの論理タグ化 • 意味の変わった要素 • 消えた要素、新しい要素

• u：下線→軽いラベル付け • i：イタリック体→思考や専門用品 • hr：水平線→段落レベルの区切り

• u：下線→軽いラベル付け • i：イタリック体→思考や専門用品 • hr：水平線→段落レベルの区切り最早要素名から予測不可能

• 【重要】small：小さい文字→注釈や著作権表示 • address：連絡先など→連絡先のみ

消えた要素これについては一言だけ

まともなHTML書いてたら消えた要素なんか使ってないので知らなくていいです

新しい要素 • nav • section • header • footer •
article • aside • video • audio • canvas

2013年5月2日発売

nav <nav> <ul> <li><a href=""> </a></li> <li><a href=""> </a></li> </ul>
</nav> • 主要なナビゲーションに用いる • <ul id=“mainMenu”> に相当する（もちろんそれ以外でも主要であれば該当）

section <article> <section> <header> </header> <div></div> </section> </article> • 汎用セクション
• 基本的にヘッダを伴う • div要素のが汎用なブロック要素に対し、 section要素は汎用なセクション

header <header> <img src="" alt="" /> </header> 
<section> <header></header>  <p></p> </section> • ヘッダ • 見出し • ページ全体のヘッダでも良いし、セクションごとの見出しでも良い

footer <section> <p></p> <footer></footer> </section> <footer></footer> </body> </html> • フッタ
• サイト全体のフッタでも良いし、セクションごとのフッタでも良い

article <article> <section> <header> </header> <div></div> </section> </article> • 例えば文書、ブログ
記事、コメント欄、もしくはサイト内で自己完結してる項目

aside <article> <aside></aside>  </article> <aside></aside>  • 話の内容から少しそれたもの • 印刷物の囲み記事 • 広告

video <video src=""></video> <video src="“ controls> </video> <video src="" autoplay>
</video> • 動画を再生する • controlsでインターフェース表示 • autoplayで自動再生

audio <audio src=""></audio> <audio src="" controls> </audio> <audio src="" autoplay>
</audio> • 音声を再生する • controlsでインターフェース表示 • autoplayで自動再生

canvas <canvas id="sample"> </canvas> • 図形を描く • 標準のHTMLとJSのみで図形が描ける（！）
• widthとheightのデフォルト値はそれぞれ300と150

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); });

参考：HTML5 &CSS3 Support (http://www.findmebyip.com/litmus)

登場させる意味 • 当然わかりやすい構文になる（人間にも機械にも） • （そもそもユーザエージェントはid名から意味を推測してはいけない（！））

3. HTML 4.01との比較 HTML5ではどう書けるのか

HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja-JP">
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Title</title> <link rel="stylesheet" href="style.css" type="text/css"> <script src=“main.js” type="text/javascript"></script> HTML5 <!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>Title</title> <link rel="stylesheet" href="style.css" /> <script src=“main.js”></script>

MIMEタイプの消失単純な話、 Webで使われている標準のスタイルシートはCSS のみで、スクリプト言語はJavaScriptのみである省略された

JavaScript

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.

type属性はスタイルシート言語を提供する。属性が存在する場合、その値は言語を指定する有効なMIMEタイプでなければいけない。 charsetパラメータが指定することはできない。属性が存在しない場合、 type属性のデフォルト値は”text/css”である。

HTML 4.01 <div class="header"> <img src="" alt=""> </div> <div class="article">
<div class="section"> <div class="header"></div> <p></p> </div> </div> HTML5 <header> <img src="" alt="" /> </header> <article> <section> <header></header> <p></p> </section> </article>

4. 読める！DTD――1分で分かる？DTD入門ところでDTDは読めますか？

<!ELEMENT HTML O O (%html.content;) -- document root element -->
<!ELEMENT DL - - (DT|DD)+ -- definition list --> <!ELEMENT DT - O (%inline;)* -- definition term --> <!ELEMENT DD - O (%flow;)* -- definition description --> <!ELEMENT IMG - O EMPTY -- Embedded image --> 参考：strict.dtd

形式意味 A, B A, Bがこの順で A&B A, Bが順不同で +A
子孫にAが記述可能 -A 子孫にAが記述不可

<!ELEMENT HTML O O (%html.content;) -- document root element -->
<!ENTITY % html.content "HEAD, BODY"> <!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head --> <!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT“ -- repeatable head elements --> <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->

あれ htmlも headも bodyも省略できるじゃん

<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>Title</title> <link
rel="stylesheet" href="css/style.css" /> <script src=“js/main.js”></script> </head> <body> <article> <section> <header></header> <p></p> </section> </article> </body> </html>

<!DOCTYPE html> <meta charset="UTF-8" /> <title>Title</title> <link rel="stylesheet" href="css/style.css" />
<script src=“js/main.js”></script> <article> <section> <header></header> <p></p> </section> </article>

htmlも headも bodyもいらんかったんや！

結局DTDっているの？ • HTML5にDTDは存在しない←表現しきれない • 自身で考えてコーディング • 自身で思う適した書き方で良い参考：WCAN mini Markup
vol.11をとおして、 HTML5のDTDについて考えてみた (http://chifffon.net/blog/web/entry-135.html)

コンテンツモデル • Metadata、Flow、Sectioning、Heading、 Phrasing、Embedded、Interactiveの6つのコンテンツもでるによる文書構造 • 例えばa要素はFlow、Phrasing、Interactive に属す。 • block要素、inline要素の区別ではない

<a href=""> <header></header> <p></p> </a> 問題ない構文

それでもDTDを軽く知っておくことはミスをなくせるし、正しい文書構造にさせることは間違いない。

5. まとめ • HTML5で新しく出た要素でわかりやすい HTMLを • jQueryなどの手軽に使えるライブラリが増えてるのでこの機にJavaScript等の言語も <!DOCTYPE html>
<html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>Title</title> <link rel="stylesheet" href=“css/style.css" /> <script src=“js/main.js”></script> </head>

御清聴ありがとうございました

Introduction to HTML5

Introduction to HTML5

More Decks by N@N

Other Decks in Technology

Featured

Transcript