• 目　　次　　　　　　　　▼
  • サイトトップ
  • こんなときどうする？
  • サイト内検索
  • サイト内索引
  • サイトマップ
  •  
  • ホームページを作る
  • HTML トップ

HTMLの基本を知ろう

---

Web標準への対応

HTMLとXHTMLの違いを知ろう

• Web を記述する言語
  • XML と XHTML
  • HTML5
• 近年注目されるWeb 標準とは
• Web 標準に準拠することでのメリット
• XHTMLの基本ルール
• XHTML文書であるためには

Web を記述する言語

HTMLのバージョン

HTML は、１９８６年に ISO（国際標準化機構） で標準化されたSGML（Standard Generalized Markup Language） という言語に基づいて作られたものです。新しいタグを自由に定義することができる SGML に対し、HTML は決められたタグ以外利用できず、しかも表示に特化した構造に限られていた。自由度が無い反面、単純で覚えやすく使いやすいという特徴を持っています。

現在のように Web ページによる情報発信があたりまえになってくると、HTML では力不足な部分が目立つようになってきた。また、Web ブラウザを提供する各社が無秩序に拡張を加えたため、互換性がとれなくなってきた。

１９９８年には、より高機能な XML （eXtensible Markup Language） という言語が策定された。XML は SGML と同じく利用者が自由にタグを定義できるようになった。XML の定義構造は Microsoft Office 2007 以降の保存ファイル形式に使われたこともあり、他のファイルとの互換性も容易にとれる特徴を持っています。

ただ、XML は柔軟性はあるものの、一般ユーザーが扱うには難解です。そこで、HTML と XML の橋渡し的存在として XHTML (eXtensible Hyper Text Markup Language) が作られました。ここにXHTML は、HTML の書式をいっそう厳格に定義して Web 標準のルールに対応させ、さらに XML に基づいて拡張したものです。XHTML は HTML を拡張したものではなく、XML から再定義された言語であるとの位置づけでしょう。（このため XHTML の宣言の中には、XML の宣言がまず記述されるということになっています。）

HTML5

HTML は年々進化してきたが、現在の最新バージョンは HTML5 です。

HTML から XHTML 2.0 へ移行すべく準備をしていたが、広がらなかった。これは厳密な XHTML に対して、Web ブラウザの許容範囲が大きすぎるため 「適当なマークアップ」 でも解釈されてしまうからです。そこで現在でも支持の多い HTML 4.01 と厳密な XHTML 1.0 のゆるやかな統合を目指して、HTML5 という新しい規格が登場した。HTML のバージョンが一つあがっただけだが、その中身は大幅に強化されています。HTML5 で強化されたのはマークアップだけにとどまりません。HTML5 は Web アプリケーションとして各種 API が用意されました。

アップル社や Opera 社、Mozilla などが WHATWG (the Web Hypertext Application Technology Working Group) というグループを設立し、HTML5 の仕様を策定しました。マイクロソフトはこのグループに参加はしていないが、すでに Internet Explorer 8 以降で HTML5 の対応を進めています。iPhone も Google も　HTML5 の採用をしています。

詳細は HTML5 を参照します。

近年注目されるWeb 標準とは

情報発信を行ううえで主要な言語である、HTML, XHTML, XML, CSS などの技術を総称して Web 標準と呼びます。国際的な標準化団体である　W3C (World Wide Web Consortium) が中心となってこれら技術の標準を策定しております。

また、Web 標準に準拠することでアクセシビリティや互換性を高め、WWW (World Wide Web) の有効活用を目指す動きを含めて Web 標準と呼ぶこともあります。

ページトップへ

Web 標準に準拠することでのメリット

制作者にとってのメリットとして考えられるのは次のような点であろうか。

• さまざまな閲覧環境に対するアクセシビリティの向上
• (X)HTML 文書のメンテナンス性の向上
• (X)HTML 文書のファイル容量削減によるネットワーク資源の節約
• 検索エンジン最適化 (SEO)

利用者のメリットとしては、アクセシビリティの向上があげられる。とくに視覚障がい者をはじめとした、ハンディキャップを持つ利用者や、高齢利用者に対する配慮は必須となっています。

ページトップへ

XHTMLの基本ルール

現在の Web ページ制作では、Web 標準に対応するために、HTMLではなく、XHTMLによって記述する必要がでてきました。

W3Cの勧告では、HTMLに対するXHTMLの相違点として以下の10項目が示されています。

1. 文書は整形式にする
   • XHTMLでは、開始タグと終了タグが対応し、要素が正しいツリーを形成している整形式（ well-formed ）であることが求められる。よって、HTMLで認められていた終了タグの省略などはできない。
     • ◎　XHTMLソース（正）
       • <a href=”index.html”><span class=”sample”>….</span></a>
     • ●　XHTMLソース（誤）
       • <a fref=”index.html”><span class=”sample”>…..</a>
       • span 要素の開始タグに対して終了タグが無い。
       •  
2. 要素名および属性名は小文字で記述する
   • XMLでは、大文字小文字は区別され、異なるものとして扱われる。そのため、XHTML文書ではすべての要素名および属性名を小文字で記述しなければならない。
     • ◎　XHTMLソース（正） 　　
       • <a href=”example.html”>….</a>
     • ●　XHTMLソース（誤）
       • <A HREF=”example.html”>….</A>
       • 要素名と属性を大文字で記述している。
       •  
3. 属性値は常に引用符でくくる
   • HTMLでは、引用符を省略できる属性値があった。XHTMLでは、属性値はその内容にかかわらず、すべて引用符でくくる必要がある。
     • ◎　XHTMLソース（正）
       • <table cellpadding=”5”> ….</table>
     • ●　XHTMLソース（誤）
       • <table cellpadding=5> ….</table>
       • 属性値を引用符でくくっていない。
       •  
4. 属性名と属性値を併せて記述する
   • HTMLでは属性名を省略する最小化形式の記述が可能だが、XHTMLでは許されていない。すべての場合において、属性名と属性値を併せて記述する必要がある。
     • ◎　XHTMLソース（正）
       • <option selected=”selected”> ….</option>
     • ●　XHTMLソース（誤）
       • <option selected> ….</option>
       • 属性名を省略している。
       •  
5. 空要素も終了タグを記述する
   • 改行や水平線などを示す空要素に関しても、たとえば <br></br> のように終了タグをもつか、<br /> のように ”/>” で終わらせる最小化タグ記法で記述しなければならない。
     • ◎　XHTMLソース（正）
       • <input type=”text” name=”example” />
     • ●　XHTMLソース（誤）
       • <input type=”text” name=”example”>
       • 終了タグがなく、最小化タグ記法でもない。
       •  
6. 属性値内の空白は状況により無視される
   • XHTMLでは、属性値の先頭および末尾の空白は無視され、複数の空白文字（改行を含む）の連続は１つとして扱われる。
     • ◎　 XHTMLソース
       • <a href=”example.html”>サンプルページ△</a>
       • 末尾の空白（△）は無視される。
       • <a href=”example.html”>HTML△△サンプルページ</a>
       • 連続する空白文字は１つとして扱われる。
       •  
7. id 属性を優先的に使用する
   • XHTML文書では、フラグメント識別子（参照：用語解説）に id 属性を使用する。よって、name 属性と id 属性の両方を持つ要素に関しては、id 属性を使用しなければならない。
     • ◎　XHTMLソース（正）
       • <a href=”example.html” name=”example” id=”example”>…</a>
     • ●　XHTMLソース（誤）
       • <a href=”example.html” name=”example”>…</a>
       • Name 属性より id 属性を優先しなければならない。
       •  
8. style 要素とscript 要素の扱いが異なる
   • XHTMLでは、style 要素および script 要素の内容モデルが PCDATA（参照：　用語解説； PCDATA と CDATA） として扱われる。style 要素および script 要素の内容を "<!--" と "-->" で囲むとコメント宣言が解釈されて本当にコメントとして扱われ、記述した内容が無視されてしまう可能性がある。
   • HTMLと同様に CDATA として処理したい場合は、内容モデルを CDATA セクションとして宣言する。
   • 具体的には、style 要素内を "<![CDATA[" と "］］>" で囲み CDATA セクションとして宣言します。
     • ◎　XHTMLソース
       • <style type=”text/css”>
         <![CDATA[
         h1 {
           font-size: 2em;
         }
         ］］>
         </style>
   • こうすることで、XHTMLは、style 要素内の CDATA セクションの内容をCDATAとして処理できます。
   •   
9. 要素の入れ子などSGMLにおける排除機能を再現できない
   • (X)HTMLの要素には、一部要素の入れ子に制約がある。
   • HTMLのベースであるSGMLには、ある要素が特定の要素内に含まれることを排除する機能（SGML exclusion）が用意されているが、XHTMLのベースであるXMLではこれを利用することができない。しかし、入れ子にできない要素が存在すること自体は変わらない。
   • XHTMLにおける入れ子の制約は下記のとおりである。
     • a 要素は、ほかの a 要素を包含してはならない
     • pre 要素は、img、object、big、small、sub、sup 要素を包含してはならない
     • button 要素は、input、select、texarea、label、button、form、fieldset、iframe、isindex 要素を包含してはならない
     • label 要素はほかの lable 要素を包含してはならない
     • form 要素は、ほかの form 要素を包含してはならない

ページトップへ

XHTML文書であるためには

正しいXHTML文書にするためには、XML宣言や文書型宣言と呼ばれる宣言を記述する必要があります。

そして文書の一番大きな囲みとなる要素であるhtml 要素のXML名前空間も、xmlns 要素を使って定義します。

これらについては、次のページ以降で説明を行います。

ページトップへ

---

| |