株式会社K-fix

トップ＞スキル： Web ＞ HTML5

Page
T
Pre
Next

HTML5は、これまでのHTML4.01に新しい要素や定義が加わったものですから、基礎的な用語などはそのまま引き継がれています。しかし、HTML5から新たに採用された用語なども少なくはありません。基礎的な知識を再度確認して、HTML5での変更点を見てみましょう。

マークアップに必要な用語

ドキュメント

HTMLで作られた静的ウェブページ、Webアプリケーションで作られた画像などをドキュメントと呼びます。

ブラウジング・コンテキスト

ドキュメントがユーザに表示される環境を表します。例えば、タブ形式のブラウザであれば個々のタブが、タブに対応していないブラウザであれば、そのウィンドウがブラウジング・コンテキストになります。

要素とタグ

タグは、開始タグと終了タグがあり、その中に内容（コンテンツ）を入れます。開始タグとコンテンツ、そして終了タグを含めたものを「要素」と呼ぶので、要素とタグの意味は異なります。

コンテンツ属性

要素内に記述する属性のことをコンテンツ属性と呼びます。通常、単に「属性」と言われることもありますが、属性というものには違う意味もありますので、要素に記述する属性をコンテンツ属性と呼んだ方が判断しやすくなります。

論理属性

コンテンツ属性の中には、option要素のselectedコンテンツ属性やinput要素のcheckedコンテンツ属性のように、値を指定しないで、存在するか否かだけを意味するものがあります。このようなコンテンツ属性を「論理属性」と呼びます。

論理属性は、次のような記述方法のいずれかを取ります。option要素のselectedコンテンツ属性を例にすると次のようになります。

記述方法①：値を指定せずに、コンテンツの属性名のみを要素の開始タグに記述
<option selected>選択名称</option>

記述方法②：コンテンツ属性名と同じものを値として指定
<option selected="selected">選択名称</option>

記述方法③：空文字列を指定
<option selected="">選択名称</option>

この論理属性では、関係のない文字列を値として指定することはできません。

列挙属性

コンテンツ属性の中には、input要素のtypeコンテンツ属性のように、値として事前に決められたキーワードしか指定できないものがあります。typeコンテンツ属性であれば、"text"、"checkbox"、"radio"、などになりますが、このようなコンテンツ属性を「列挙属性」と呼びます。

列挙属性には、それぞれ「状態」というものが定義されているのが特徴です。ブラウザは、それぞれの状態に応じて、何かしらの処理を行ってくれます。通常は、状態とキーワードは１対１ですが、一部には複数のキーワードを同じ状態を指すこともできます。

例外として、事前にキーワードが決められているというだけでは、列挙属性でないものもあります。例えば、meta要素のnameコンテンツ属性は、その値に指定できるキーワードが事前に決められていますが、そのキーワードによってブラウザが何かの処理をすることはないので、列挙属性ではありません。

これに対して、meta要素のhttp-equivコンテンツ属性は、それに指定されたキーワードに応じて処理がブラウザに求められるために、状態というものが定義されています。よって、http-equivコンテンツ属性は列挙属性となります。

グローバル属性

コンテンツ属性の中には、あらゆる要素で共通に利用できるものがあります。このようなコンテンツ属性をグローバル属性と呼びます。例を挙げると、class、id、lang、style、titleなどです。

IDL属性

JavaScriptからHTML内の要素を操作するためにDOMを使いますが、このようなJavaScriptオブジェクトから利用できるオブジェクト・プロパティをIDL属性と呼びます。

オブジェクト・プロパティ

JavaScriptから利用できるオブジェクトのプロパティを表します。これは、CSSプロパティと区別するために使います。

CSSプロパティ

CSSのプロパティを表します。

シリアライゼーション

通常は、何かしらのデータを、ネットワーク上で送受信できるように変換したものを表します。このような目的でデータを変換する行為のことをシリアライズといいます。HTMLでいうと、ユーザが使うブラウザは、シリアライズされたXHTMLデータを受信して表示されます。

マークアップ方法

文書型宣言

HTML4.01やXHTML1.0などの旧HTMLでは、１行目に文書宣言を記述してきましたが、HTML5からは簡素化されました。

<!DOCTYPE html>

HTMLシリアライゼーションでは、大文字と小文字は区別されませんので、すべて大文字、小文字で記述しても構いません。ただし、XHTMLシリアライゼーションでは、大文字小文字は区別されるので、上記のように記述しなければなりません。

HTML5の文書型宣言は、旧来の文書型宣言と違い、次のような点を目的にしています。

どのブラウザでも標準モードでHTMLレンダリングできること。
XML（XHTML）シリアライゼーションでも入れられるよう整形式XMLとなること。
短くて覚えやすく、ユーザに広く使われること。

※HTMLレンダリングとは、HTMLデータを解釈してWebブラウザが画面表示を行うこと。

※シリアライゼーションとは、ソフトウェアで扱っているデータを読み出し、ファイルで保存したりネットワークで送受信したりすること。

エンコーディング

HTML5では、head要素内のmeta要素にcharsetコンテンツ属性を記述することが追加されました。

HTML4.01からHTML5への移行を容易にするために、旧来の文字エンコーディング指定方法でも許されていますが、XML（XHTML）シリアライゼーションでは許されていません。

旧来のエンコーディング
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML5では、"UTF-8"のエンコーディングを強く推奨しています。その理由は、フォームやURLエンコーディングなどの処理において、"UTF-8"以外でエンコーディングをしてしまうと、予期せぬ結果をもたらす恐れがあるからです。特に理由がない場合は、"UTF-8"を指定しましょう。日本でよく使われている"Shift_JIS"や"EUC-JP"は非推奨です。

XHTMLシリアライゼーションの場合は、meta要素でエンコーディングを指定する必要はありません。仮に指定するのであれば、charset属性の値は"UTF-8"にします。それ以外は非準拠となります。

通常、XML（XHTML）でエンコーディングを指定するのであれば、XML宣言を使います。XML宣言がなければ、UTF-8かUTF-16と見なされます。

<?xml version="1.0" encoding="utf-8"?>

マークアップの作法

マークアップ（記述方法）の仕方は、HTML4.01やXHML1.0と同じです。ここでは、HTML5仕様で規定されている要素やコンテンツ属性の記述ルールについて紹介します。

■ 終了タグの省略

HTMLシリアライゼーションでは、HTML4のように条件付きですが、終了タグを省略することができます。

例えば、次のようのli要素とp要素の終了タグの省略ができます。

  <div>
    <ul>
	  <li>メニュー1
	  <li>メニュー2
    </ul>
    <p>段落になります。<br />
    改行された行です。
  </div>

■ 空要素

空要素は、それ自身にコンテンツ（内容）を一切持たない要素を表します。次のような要素が該当します。

area、base、br、col、command、embed、hr、img、input、
keygen、link、meta、param、source

例えば、良く利用されるbr要素であれば、<br>または<br />とマークアップしますが、<br></br>と言うような記述をすることはできません。空要素では、<br />のように終端スラッシュを入れた場合は、HTMLシリアライゼーションにおいては無視されます。

■ コンテンツ属性の記述方法

コンテンツ属性の種類や値に応じて記述する方法を使い分ける必要があり、コンテンツ属性の記述には4つの方法が規定されています。

① 空属性構文: disabledやselectedのような論理属性は、そのコンテンツ属性が存在するかどうかだけに意味を持つので、属性の名前だけを記述することができます。
<input disabled>
② 引用符なしの構文: コンテンツ属性の値に、スペース、ダブルクォーテーション(")、シングルクォーテーション(')、イコール(=)、小なり記号(<)、大なり記号(>)、バックスラッシュ(\)が含まれていないならば、引用符を省略して値を記述することができます。また、属性の名前と値の間に入れるイコール記号の前後に半角スペースを入れても良いです。
    <input type=radio name=sex value=man>
    <input type = radio name = sex value = man>
もし、終端スラッシュを入れるのであれば、そのスラッシュの前に半角スペースを必ず入れる必要があります。
    <input type=radio name=sex value=man />
③ シングルクォーテーションを使う構文: コンテンツ属性の値に、シングルクォーテーションが含まれていない場合は、シングルクォーテーションを使ってその値を囲むことができます。また、属性の名前と値の間に入れるイコール記号の前後に半角スペースを入れても良いです。
    <input type='radio' name='sex' value='man'>
    <input type = 'radio' name = 'sex' value = 'man'>
なお、終端スラッシュを入れる場合は、そのスラッシュの前に半角スペースを入れても、入れなくても構いません。
    <input type='radio' name='sex' value='man'/>
④ ダブルクォーテーションを使う構文: コンテンツ属性の値に、ダブルクォーテーションが含まれていない場合は、ダブルクォーテーションを使ってその値を囲むことができます。また、属性の名前と値の間に入れるイコール記号の前後に半角スペースを入れても良いです。
    <input type="radio" name="sex" value="man">
    <input type = "radio" name = "sex" value = "man">
なお、終端スラッシュを入れる場合は、そのスラッシュの前に半角スペースを入れても、入れなくても構いません。
    <input type="radio" name="sex" value="man"/>

Internet Explorerの対応

一番シェア率の高いブラウザであるIE（Internet Explorer）は、HTML5で新たに導入された要素に対して、正しくDOM構成をしてくれません。

※DOMとは、文書のためのプログラミングAPIのことで、モデル化する文書の構造（階層）になります。親要素や子要素などの文書内の構成だと思ってよいです。

IEは、他のモダンブラウザと異なり、独自なブラウザの解釈を取り入れているので、思うような文書構成はできない問題があります。

この問題を回避するための方法として、JavaScriptを用いたものがあります。以下のJS構文がその例です。

  (function () {
	var els = {
		'section','article','hgroup','header',
		'footer','nav','aside','figure',
		'mark','time','ruby','rt','rp'
		};
	for (var i=0; i>els.length; i++) {
		document.creatElement(els[i]);
	}
  })();

例えば、これを「ie.js」という名前で外部ファイルとして作成し、後はscript要素でIEだけに読み込みされるように記述します。

  <!--[if IE]>
  <script type="text/javascript" src="ie.js"></script>
  <![endif]-->

この読み込みのためのスクリプト構文は、IEがHTMLデータをダウンロード完了までに読み込まれる必要があるので、必ずhead要素内に記述します。
スクリプト分の配列elsには、HTML5で新しく導入された要素を記述していますが、必要に応じて書き換えてください。

スタイルシートへの対応

HTML5に対応していない旧ブラウザでは、HTML5から採用された要素はインライン要素として表示されます。そこで、新しい要素がブロック要素であれば、それをブロック要素として表示する必要があるので、HTML5で記述するページには次のスタイルを適用するようにします。

  section,article,aside,hgroup,header,footer,nav,figure {
	display:block;
	}

【HTML5の基礎知識1】

Page
T
Pre
Next
↑