HTML5 の XML 構文 (1) 整形式文書として記述する XML 文書として曖昧さのない記述にする (2) 名前空間宣言を入れる XML としての拡張性は名前空間によって実現される (3) XML 宣言を入れる XML 宣言は文字コードの判別に用いられる 14 (1) 整形式文書として記述する (a) 正しい木構造で記述する (b) 終了タグを省略しない (c) タグの大文字 小文字を区別する (d) 属性の値は必ず引用符で囲む (e) ブーリアン属性の値を省略しない (f) 特別な文字は実体参照で記述する 15
(1) 整形式文書として記述する (a) 正しい木構造で記述する ただ 1 つのルート要素を持つ HTML では,html 要素がルート要素となる すべての要素が正しい入れ子関係になっている どの親要素もその子要素全体を含む 入れ子関係が交差しないようにする <b> 文書に <u> 意味 </u> を持たせる </b> <b> 文書に <u> 意味 </b> を持たせる </u> 親要素が子要素全体を含む 入れ子関係の交差 ( 不可 ) 16 < 練習 1-7> 正しい木構造 以下のタグ表記のうち正しい木構造の条件を満たすものはどれか答えなさい (1) <b><u><i></b></i><u> (2) <b><u></u></b><i></i> (3) <b><i><b></b></i></b> 17
(1) 整形式文書として記述する (b) 終了タグを省略しない ブラウザによる省略タグの補完に頼らない HTML では, いくつかの要素で終了タグの省略が可能 ( 文法的に省略可能と規定されている ) XML として正しい書き方 ( 整形式 ) 整形式でない書き方 <ul> <li>1 番目の項目 </li> <li>2 番目の項目 </li> </ul> <ul> <li>1 番目の項目 <li>2 番目の項目 </ul> HTML の構文としては, どちらも正しい 18 空要素 : 内容を持たない要素 XML では 終了タグは省略できない 内容を持たない要素の例 (HTML): br( 改行 ),hr( 水平線 ),img( 画像 ) など 終了タグを補うか, 開始タグを /> で閉じる 例 : <br></br> または <br/> と表記する HTML5 の HTML 構文では 終了タグを省略しなければならない 開始タグを > または /> で閉じる 例 : <br> または <br/> と表記する 復習 <br/> 表記は,HTML 4.01 では定義されていないが, 多くのブラウザで適切に解釈される 19
(1) 整形式文書として記述する (c) タグの大文字 小文字を区別する XML では大文字と小文字が区別される HTML では要素名, 属性名を大文字 小文字どちらで表記してもよい img,img,img はどれも同じ要素名を表す HTML5 XML 構文では要素名, 属性名を小文字で表記しなければならない img( イメージ ) 要素を IMG,Img と表記するのは誤り src( ソース ) 属性を SRC,Src と表記するのは誤り 20 (1) 整形式文書として記述する (d) 属性の値は必ず引用符で囲む XML では属性値を引用符で囲まなければならない 二重引用符 ( ダブルクォート ) " または一重引用符 ( シングルクォート ) ' で囲む 誤 正 <img src=photo.jpg /> <a href=http://xx.yy.com> リンク先 </a> <img src="photo.jpg" /> <a href='http://xx.yy.com'> リンク先 </a> HTML では属性値を引用符で囲まなくてもよい width=100 src=photo.jpg でも誤りではない 21
(1) 整形式文書として記述する (e) ブーリアン属性の値を省略しない XML では, 属性値を必ず指定する ( 省略不可 ) 例 : <option selected="selected"> </option> HTML では, ブーリアン属性 ( 値が true/false で解釈される ) の属性値を省略してもよい 例 : <option selected> </option> 属性値として "selected" が指定されたと解釈される <select size="3"> <option>large</option> <option selected>medium</option> <option>small</option> </select> 22 (1) 整形式文書として記述する (f) 特別な文字の置き換え 特別な意味をもつ文字 ( < & など ) は, 文字コードや実体名を用いて表す <p> タグ名は,< と > で囲む </p> XML では < と > ( 開始タグ?) 文字参照または実体参照を使用しなければならない HTML では, あいまいに解釈されていた テキストや属性値の中に < 等を用いても, その文字として解釈された 23
実体参照 文字参照の例 XML で利用可能な実体参照 文字 説明 実体参照 文字参照 10 進数 16 進数 < 小なり記号 < < < > 大なり記号 > > > & アンパサンド & & & " 二重引用符 " " " ' アポストロフィ ' ' ' ' は HTML では使えない 文字参照に使う文字コードは, ISO/IEC 10646 の一部 ( ユニコードに対応する部分 ) 24 実体参照と文字参照の書き方 文字参照 : ユニコードのコード番号で置き換える 書き方 または 
 進コード ;  進コード ; <p> タグ名は,< と > で囲む </p> 16 進コードの場合は x が付く 実体参照 : 実体名で特別な文字を置き換える 書き方 & 実体名 ; <p> タグ名は,< と > で囲む </p> 実体参照の方が直観的にわかりやすい 25
HTML 文書内にタグを表示する タグの表記をそのままブラウザに表示する 水平線が実際に表示される ( タグの記号が示せない ) <p> 水平線は <hr/> で表示する </p> < と > ( 実体参照 ) を使うことで, タグの記号が表示できるようになる <p> 水平線は <hr/> で表示する </p> 26 < 練習 1-8> 行儀の良い HTML 以下の文書について, 整形式の HTML5 として正しくない箇所を指摘しなさい <!DOCTYE html> <html> <head><title> 練習問題 </title></head> <body> <h1> 行儀の良い HTML</h1> <ul> <li> 入れ子関係が交差しないようにする <li> タグを省略しない </ul> <p>html5 XML 構文では, 要素名と属性名を小文字で表記しなければならない </p> <p> 特別な意味をもつ文字 ( &,< など ) をブラウザ上で表示するには実体参照を用いる </P> <hr> <a href=http://www.kanasai-u.ac.jp> 関西大学 </a> </body> </html> ブラウザ上の表示では特に問題ない 27
名前空間による複数タグセットの区別 XML では独自のマークアップ言語 ( タグセット ) が定義できる 異なるタグセットで同じ要素名が用いられる可能性がある 例 : name 氏名, 製品名 例 : title 書名, 肩書き <?xml version= 1.0?> <main xmlns:book="http://sample.com/book/" xmlns:job= http://sample.com/job/" > <book:title> 入門 HTML5</book:title> <book:author> 山田太郎 </book:author> <job:company>xyz 株式会社 </job:company> <job:title> 主任 </job:title> </main> XML 文書での名前空間宣言の利用例 特別な属性 xmlns を用いて, 名前空間を宣言する 名前空間の接頭辞 (book, job) によってタグセットを区別する 28 (2) 名前空間宣言を入れる XHTML5(HTML5 XML 構文 ) では, 名前空間の接頭辞を省略し, ルート (html) 要素に記述 html 要素内の他の要素 (head, body 等 ) は, 接頭辞を持たなくても XHTML の名前空間に属する 接頭辞が省略された名前空間は デフォルト名前空間 <?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>html5 の例 </title> </head> <body> </body> </html> XHTML の名前空間宣言 29
例 : XHTML 文書への XML データ ( グラフィックス ) の埋め込み svg 要素内で circle 要素を用いて 3 つの円を描画 <?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <p>xhtml 文書でのグラフィックス表示 </p> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <circle cx="50" cy="30" r="10" fill="orange" /> <circle cx="90" cy="30" r="20" fill="red" /> <circle cx="150" cy="30" r="30" fill="blue" /> </svg> </body> </html> この範囲に出現する要素と属性は,svg の名前空間に属する 30 名前空間 URI の正体 名前空間 URI (Unified Resource Identifier) はグローバルで一意に決まる識別名として用いられる URI のリンク先にあるページやデータが用いられる訳ではない http://www.w3.org/1999/xhtml/ XHTML の名前空間 URI のページ 31
(3) XML 宣言を入れる XML 文書では先頭 (1 行目 ) に XML 宣言を入れる XML 宣言より前に空白や空行があってはならない 文字コードの判別に用いられる encodingが省略されると, 文字コードは UTF-8 と解釈される XML 宣言の例 version : XMLのバージョン (1.0 とする ) encoding : 文書の文字コード ( 省略時は UTF-8 となる ) <?xml version="1.0" encoding="shift_jis"?> <html> </html> XML 文書では, ファイルの文字コードに合わせて,XML 宣言で文字コードを指定する 32 文字コードと言語コードの指定 XHTML5 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" <head> <title>xhtml5の例 </title> </head> </html> xml:lang="ja"> HTML5 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>html5 の例 </title> </head> </html> 33
文字コードと言語コードの違い 復習 文字コード ( ファイル内のデータを符号化する方式 ) 0 1 のビット列と個々の文字 ( 漢字, アルファベットなど ) の対応付け 言語コード ( テキストがどの言語で書かれているか ) 文字列をどの言語の言葉 ( 単語など ) とみなすかを指定する 言語コードの例 言語名日本語韓国語中国語英語フランス語 言語コード ja kr zh en fr 言語コード名, 文字コード名では大文字 小文字を区別しない 日本語文字コードの例 コード名シフトJIS JIS 日本語 EUC Unicode 文字コード Shift_JIS ISO-2202-JP EUC-JP UTF-8 日本語を表記できる文字コードは複数ある 34 < 練習 1-9> XML 文書の読込エラー 以下の XML 文書をブラウザで表示したところ, 文字コードに関するエラー (Encoding error) が出力された. この原因を推測し, その解消法を答えなさい Q1-9.xml ブラウザでの表示 35
HTML4.0 における文書型定義 3 種類のタグセットがある Strict ( 厳密な ) 構造記述の要素に限定 ( レイアウト系の要素を排除 ) Transitional ( 過渡的な ) 過去との互換性を保つためのバージョン 視覚表現のための要素が含まれる Frameset ( フレームセット ) HTML フレームを使うための特殊なバージョン XHTML 1.0 (2000 年 1 月 ) HTLM 4.0 と同様に 3 種類の文書型定義がある 36 HTML4.0 から XHTML1.1 への展開 : 文書型定義の集約 XHTML 1.1 XHTML 1.0 Strict とほぼ同じ 過渡的な措置であった Transitional,Frameset が廃止された HTML 4.0 (1997/12) Strict Transitional Frameset XHTML 1.0 (2000/01) Strict Transitional Frameset XHTML 1.1 (2001/05) 文書の構造を表す要素のみ利用可 ( 見栄えを調整する要素は廃止 ) 表示上の見栄えは HTML タグ,CSS のどちらでも設定可能 従来の HTML との互換性を維持 ( 過渡期 ) CSS によるスタイル設定が必須となった 37
Web ブラウザが受信する様々なファイル [F12] で Chrome の開発ツールを表示 開発ツールで Network タブを選択 ブラウザに読み込まれたファイルの種類 (MIME タイプ ) 38 XHTML 1.1 が普及しなかった理由 XHTML を採用した多くのサイトでは XHTML 1.1 ではなく XHTML 1.0 が用いられた MIME タイプの問題 MIME タイプ : Web サーバやブラウザがデータの種類を区別するために用いる識別子 text/html HTML 文書と互換性がある application/xhtml+xml 厳密に XML 文書として扱われる (IE6,7,8 では非対応 ) MIMEタイプ HTML 4 XHTML 1.0 XHTML 1.1 text/html application/ xhtml+xml : 用いるべき ( 推奨 ) : 用いてもよい ( 可能 ) : 用いるべきでない ( 非推奨 ) : 用いてはならない ( 禁止 ) その他の MIME タイプ text/plain テキストファイル (sample.txt) application/vnd.ms-excel エクセルファイル (sample.xls) 39
XHTML の普及が試みられた当時の主要ブラウザのリリース状況 Web 標準 年 主なブラウザ HTML 4.01 1999 IE5 XHTML 1.0 2000 IE5~IE8 の間,IE のシェアは60~90% XHTML 1.1 2001 IE6 (2004 年 92.3%) 2002 2003 Sa1 CSS2.1 2004 FF1 2005 FF1.5 Sa2 2006 IE7 FF2 2007 Sa3 HTML5 初期草案 2008 FF3 GC1 (XHTML2.0 策定停止 ) 2009 IE8 FF3.5 Sa4 GC2 2010 FF3.6 Sa5 GC4 HTML5 最終草案 2011 IE9 FF4 GC8 2012 IE10 FF10 Sa6 GC18 2013 IE11 FF18 Sa7 GC27 HTML5 勧告 2014 IE: Internet Explorer FF: Firefox Sa: Safari GC: Google Chrome IE5 は XML 宣言を正しく解釈できない IE6,7,8 では,XHTML の MIME タイプが正しく解釈できない ( ダウンロード ダイアログがポップアップする ) 40 XHTML5 HTML5 を XML 構文に基づいて記述した文書 ファイルタイプ ( 拡張子 ) の設定によって, ブラウザには XHTML5 (XML 文書 ) として処理される ファイルタイプ *.xhtml *.xml MIME タイプ application/xhtml+xml application/xml 古いブラウザ (IE8 以前など ) では上記 MIME タイプが正しく解釈できないため, 利用範囲が制限される場合もある 41