More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to HTML仕様書を読んでみよう
Similar to HTML仕様書を読んでみよう (20)
Recently uploaded
Recently uploaded (14)
HTML仕様書を読んでみよう
- 1. HTML仕様書を読んでみよう 富永 冴樹
- 2. 対象者 • 基本的なHTMLは読める、書ける。 • 文書型宣言（DOCTYPE）から始まり、html要素の中にheadとbody…。 • 段落はp要素、順不同リストはul要素…。 • 仕様書を読んだことがない、読み方が分からない。 • 書籍やブログ等で知識を得たが…。 • 細かいルールが分からない。 • tfoot要素の挿入位置は? • ラジオボタンやプルダウンには初期値の設定が必要。 • 関連する技術との関係（CSS, JavaScript, HTTPなど） • 表の列方向に指定できるスタイルは?
- 3. アジェンダ • HTMLの歴史と種類 • そもそもHTMLってなに? • HTMLの系統図 • HTML4.0, HTML4.01, XHTML 1.0, XHTML 1.1, HTML5 の紹介 • “W3C勧告”へのプロセスとその意味 • HTML4.01仕様書を読む • 仕様書の読み方 • DTDの読み方
- 4. HTMLの歴史と種類
- 5. そもそもHTMLってなに? 地球規模での配信を目的に情報を公開するためには、全てのコンピュータが潜在的に理 解可能であるような出版用母語の一種である、世界中で理解される言語が必要となる。 World Wide Webで使われる出版言語は、HTML (HyperText Markup Languageの略)である。 HTMLは著者に次の手段を提供する。 • 見出し、テキスト、表、リスト、写真などのあるオンライン文書を出版すること。 • ハイパーテキストリンクを通じ、オンライン情報をボタンのクリックで取得すること。 • 情報検索、予約、商品の注文などの遠隔サービスのトランザクションに用いるフォームを設計する こと。 • 表計算シートやビデオクリップ、音声クリップ、その他のアプリケーションを、文書に直接埋めこむこ と。 （中略） HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開 発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携 帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、 等の環境である。 Introduction to HTML 4 (ja)「2.2 HTMLとは何か?」より
- 6. HTMLの系統図 HTML, HTML+ HTML 2.0 （RFC1866・1995年） HTML 3.0 HTML 2.x HTML 3.2 （RFC2070・1997年） （1997年） HTML 4.0 （1997年） HTML 4.01 （1999年） XHTML 1.0 （2000年） XHTML 1.1 （2001年） Living Standard HTML5 （2014年?） HTML 5.1 XHTML 2.0
- 7. 旧石器時代のHTML <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 3.2//EN"> <html> <head> <title>HTML 3.2</title> </head> <body text="#000000" bgcolor="#FFFFFF" link="#C00000" vlink="#800000" alink="#FF00FF"> <center> <h1><font color="red" size="6">HTML 3.2</font></h1> </center> <hr> <p>この文書は <big><b>HTML 3.2</b></big> で書かれています。<br> center 要素や font 要素など、懐かしいですね。</p> </body> </html>
- 8. HTML 4.0勧告（1997年） • 国際化 HTML3.2までは仕様上ISO‐8859‐1（ Latin‐1） しか使えなかった。SGML Declaration for HTML 3.2 HTML4.0ではRFC2070（HTML2.x）で規定されたlang属性やcharset属性、bdo要素などを導入。 • スタイルシートとスクリプトに対応 構造とプレゼンテーションの分離。 font要素、center要素など見た目に関する要素、属性は非推奨に。 • マルチメディアの強化 object要素が登場し、applet要素は非推奨に。 しかし、当時のブラウザの対応がいまいちで…。 • アクセス性 フォームや表の構造化（label要素、thead要素など）。 使用上の注意が必要なものやアクセシビリティ・サポーテッドでないものもある（accesskey属性、 table要 素のsummary属性など）。
- 9. HTML 4.0は3種類ある • Strict DTD 非推奨となった要素、属性を含まないバージョン。 –body要素やform要素直下にインライン要素を置いてはいけない。 –font要素やalign属性などは使えない。 –target属性も使えないので、企業サイトでは採用されないことが多い。 • Transitional DTD 「移行型」と呼ばれる。 • Frameset DTD フレームを使う場合はこれを採用する。iframe要素はTransitionalでもOK。
- 10. HTML 4.01勧告（1999年） • img要素やform要素にname属性が追加。（後方互換性の確保） • ラジオボタンやプルダウンがいずれもチェックされていない場合の動作を 「未定義」とした。（※ RFC1866 （HTML2.0）では最初のコントロールをonにすべきと定義） などの細かな修正が行われた。 その後の XHTML 1.0, 1.1 は HTML 4.01 をベースにXML化したものであり、 XHTML 2.0の策定は2009年に頓挫。 HTML5は勧告に至っておらず、 勧告後14年経ってなお最新のHTML仕様 マークアップエンジニアは仕様書の全読必須!
- 11. XHTML 1.0勧告（2000年） HTML 4をXML形式で記述するようにしたもので、要素や属性の種類 やルールはHTML4とほぼ同一。 •整形式であること（終了タグは空要素以外必須）。 •要素と属性は小文字で記述。 •属性値は引用符でくくる。 •属性の最小化は不可。（<option selected=“selected”></option>） •空要素は <img/> のようにスラッシュを入れるか、終了タグを記述する。 •script要素とstyle要素の中身は #PCDATA に（マーク付けがparseされる）。要素内に < や & を記述するときは CDATA マーク付けを行うか外部ファイル化する。
- 12. XHTML 1.1勧告（2001年） XHTML 1.0 Strict を基にモジュール化。 •“Module‐based XHTML” •XHTML 1.0に存在した Transitional や Frameset に相当するものはない。 •lang属性が廃止されて xml:lang 属性のみに（XHTML 1.0は併記） 。 •a要素やmap要素のname属性が廃止。いわゆるページ内リンクはIDで。 •ルビ付注モジュールが追加（HTML5のルビとは使用方法が一部異なる）。
- 13. XHTMLのメディア型 • text/html 名前のとおりXHTMLでなくHTMLで使われるもの。 XHTML構文であっても文書はHTMLとして処理される。 XHTML1.0では「可能」だが、XHTML1.1では「非推奨」。 • application/xhtml+xml 推奨されているメディア型。文書はXMLとして処理される。 IE8以下は対応していない（ダウンロードになってしまう）。 Acceptヘッダをチェックして振り分けを行う「コンテントネゴシエーション」を採用しているサイ トもある。 その他、 application/xml と text/xml も利用可能ではあるが、基本的には text/html か application/xhtml+xml を使うべき。 より詳細は、 XHTML Media Types ‐ Second Edition, XHTML Media Types ― 第二版 を参照。
- 14. HTML5 • article, nav, section などの新要素。 • アウトラインという概念。 • input[type=“date”] などフォームの強化。 • audio, video要素によるマルティメディアの強化。 • 物理要素（一部倫理要素も含む）の再定義。 • s要素、i要素、b要素、u要素… • em要素とstrong要素の違いが明確化。 他にもいろいろありますが、キリがないので省略 （HTML4との違いはHTML5 differences from HTML4を参照、 日本語訳もあるよ）。 2012年12月、仕様が確定し「勧告候補（CR）」に。勧告は2014年(?)
- 15. W3C と WHATWG の関係 • W3CのHTML5とWHATWGのHTML Living Standardが存在する。 – W3C HTML5 – W3C HTML 5.1 – W3C HTML 5.1 Nightly – WHATWG HTML Living Standard • WHATWG: 「 WHATWG は 2004 年に W3C ワークショップの後に、Apple、Mozilla Foundation、Opera Software の 個人によって設立されました。Apple、Mozilla、Opera は、W3C の XHTML の方向性、HTML への関心の欠如、現実のウェ ブ制作者のニーズに対する明らかな無関心について、ますます憂慮するに至りました。そのため、3 社はこれらの憂慮を 解決するミッションに乗り出しました。そして、the Web Hypertext Application Technology Working Group が誕生しました。 」 WHATWG FAQ ‐ 日本語訳 ‐ HTML5.JPより • WHATWG の HTML Living Standard と W3C の HTML5 仕様との関 係についての最新情報
- 16. XHTMLって死んだの? • HTML5はXHTML構文でも書ける。 • <img> <img/> <img /> どれでも可、文書内で混在しても良し。 • 要素をXML構文で書き、名前空間の指定を行えば、application/xhtml+xml 等 で配信できる。いわゆる「XHTML5」。 • 外部DTDの処理は保証されていない。 • 名前文字参照（文字実態参照）は < > & " ' しか使えない。 • とかは使用不可。 数値文字参照   で。 • 僕のブログはXHTML5だよ～。
- 17. W3C勧告へのプロセス 1. Working Draft (WD) 草案 2. Last Call Working Draft (LC) 最終草案 3. Candidate Recommendation (CR) 勧告候補 4. Proposed Recommendation (PR) 勧告案 5. Recommendation (Rec) 勧告
- 18. 例: CSS2 の場合 • 1998年、CSS2勧告 display: run‐in や 聴覚スタイルシートなど、実装が進んでいないものも多く、この仕様どおりにサイトは作れない。 CSS 2.1 を定義して一部機能は削除 or CSS3 で再定義することに。 長らく、勧告に至っていない CSS 2.1 を元にサイト制作が行われることに。 • 2004年2月、 CSS 2.1勧告候補に • 2005年6月、草案に差し戻し • 2007年7月、再び勧告候補に • 2010年12月、草案に差し戻し • 2011年4月、勧告案に • 2011年6月、（やっと）勧告 制作者が”勧告”にこだわる意味はない。
- 19. HTML 4.01仕様書を読む
- 20. と、その前に
- 21. なぜ仕様書を読む必要があるのか • 市販の解説書やリファレンスサイトの方が分かりやすい。 • 英語が読めない。 • 仕様書の存在を知らない(!) • 書籍にはあまり書かれない情報。 – コメント中に2つ以上連続するハイフンを含めてはならない。 • 大抵は邦訳版がある。 – HTML4.01の場合、HTML 4仕様書邦訳計画補完委員会。 • 読み方にさえ慣れればリファレンスとして利用できる。なにより正確。 • あくまで仕様。ブラウザがそのとおりに実装しているとは限らない。
- 22. 最低限読んでおくべきHTMLの仕様書 • HTML 4.01 Specification（邦訳版） • XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)（邦訳 版） • HTML5: Edition for Web Authors （邦訳版） • HTML5 differences from HTML4 （邦訳版） – HTML4からの変更点 • XHTML Media Types ‐ Second Edition （邦訳版） – XHTML文書を text/html としても配信するための互換性ガイドライン等。 – 第一版（邦訳）とは内容が大きく異なるので注意。昔読んだ人も読み返そう。 • Polyglot Markup: HTML‐Compatible XHTML Documents （邦訳版） – HTML5をXMLとしても解析できるようにするためのガイドライン。要するにXHTML5。
- 24. DTDの読み方 開始タグ、終了タ html要素 グとも省略可能 要素の中身は <!ENTITY % html.content "HEAD, BODY"> head と body コメント <!ELEMENT HTML O O (%html.content;) -- document root element --> <!ATTLIST HTML 属性は lang, dir の %i18n; -- lang, dir -- > み指定可能 開始タグは必須、 終了タグは省略可 インライン要 p要素 素が0個以上 <!ELEMENT P - O (%inline;)* -- paragraph --> <!ATTLIST P %attrs; -- %coreattrs, %i18n, %events -- > コア属性（id, class等）、i18n、 イベントハンドラ（onclick等）
- 25. DTDの読み方 img要素 空要素 <!-- To avoid problems with text-only UAs as well as to make image content understandable and navigable 属性値の型 to users of non-visual UAs, you need to provide a description with ALT, and avoid server-side image maps --> <!ELEMENT IMG - O EMPTY -- Embedded image --> 属性の指定 <!ATTLIST IMG が必須 %attrs; -- %coreattrs, %i18n, %events -- src %URI; #REQUIRED -- URI of image to embed -- alt %Text; #REQUIRED -- short description -- longdesc %URI; #IMPLIED -- link to long description デフォルトが (complements alt) -- name CDATA #IMPLIED -- name of image for scripting -- 暗示的に存在 height %Length; #IMPLIED -- override height -- （指定は任意） width %Length; #IMPLIED -- override width -- usemap %URI; #IMPLIED -- use client-side image map -- ismap (ismap) #IMPLIED -- use server-side image map -- >
- 26. もう読めるよね table要素 <!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> <!ATTLIST TABLE -- table element -- %attrs; -- %coreattrs、%i18n、%events -- summary %Text; #IMPLIED -- purpose/structure for speech output-- width %Length; #IMPLIED -- table width -- border %Pixels; #IMPLIED -- controls frame width around table -- frame %TFrame; #IMPLIED -- which parts of frame to render -- rules %TRules; #IMPLIED -- rulings between rows and cols -- cellspacing %Length; #IMPLIED -- spacing between cells -- cellpadding %Length; #IMPLIED -- spacing within cells -- >