HTML 5での主な変更点。

在来HTMLの未来形とされている、HTML 5について、私見を交えて解説します。

HTML 5での主な変更点・目次。

HTML 5の要素・属性の概要。

HTML 5の要素・属性は、基本的にはHTML 4.01 ストリクトのそれを踏襲しております。

ですから、従来のHTML 4.01 ストリクト準拠の文書は、殆どそのままHTML 5に移行させる事が可能です。

しかし、HTML 4.0で追加されたものの実用性に乏しい事が判明した機能などは削除される事になっております。

HTML 5に於ける要素の新しい概念。

HTML 4.01/XHTML 1.xでは、一部を除いてブロックレヴェル要素とインライン要素に分別しておりましたが、HTML 5ではこれとは全く異なる新たな概念を導入します。

HTML 5に於ける要素の分類。

HTML 5では以下のように要素を分類しております。

尚、リストアイテムなど、出現箇所が限定される要素についてはいずれにも分類されない事となります。

また、仕様書に明確に書かれている事ではないのですが、基本的にHTML 5の要素の大半はメタデータ内容フロウ内容の二つに分けられ(双方に該当する要素もある)に分類され、フロウ内容とされた要素については更に他の内容にもカテゴライズされると言う形になっております。

つまり、以下のように分類されます。

HTML 5の内容モデルに於ける透明な内容

加えて、新たな概念として、一部の要素では内容モデルとして透明な内容を指定しております。

透明な内容とは、分かり易く言えば、当該要素及び当該要素固有の特殊な子要素(<object>要素で言えば<param>要素)の開始・終了タグを取り除いた結果、文法違反にならないようになっている内容を指します。

例えば、<object>要素はかつてはブロックレヴェル要素を内容に持てない<p>要素<address>要素内に他のブロックレヴェル要素を押し込む事が可能とされておりました。

しかし、この場合、<object>要素の開始・終了タグを取り除くと、<p>要素などの中に他のブロックレヴェル要素が含まれた形になって文法違反となってしまいます。つまり、HTML 5で言うところの透明な内容にはなっていない事になります。

HTML 5では<object>の内容モデルは透明な内容と定義されており、従ってこの(よこしま)なマークアップは文法違反となります。

HTML 5に於ける主な新しい要素・属性。

HTML 5に於いて、新しい要素・属性がいくつも導入されております。或いは、従来からあるものの概念を変えたものもあります。

ここでは全てを取り上げませんが、主なものを挙げておきましょう。

<meta>要素の変更点。

<meta>要素について、以下の変更があります。

<script>要素の変更点。

<script>要素について、従来必須だったtype属性は省略出来る事となりました。

type属性を省略した場合、それはJAVAスクリプトと見なされます。

<style>要素の変更点。

<style>要素について、従来必須だったtype属性は省略出来る事となりました。

type属性を省略した場合、それはCSSと見なされます。

<p>要素について。

かつてのHTML 5の草案では、<p>要素について、内容をフロウ内容としておりました。

しかし、そうすると、従来出来なかった他のブロックレヴェル要素を<p>要素の内容とする事が可能となってしまいます。

その事に問題があると判断されたのか、現在の草案では<p>要素の内容はフレージング内容すなわち従来で言うインライン要素のみとなりました。

<a>要素について。

従来のHTML仕様では、<a>要素はインライン要素と定義し、内容としてブロックレヴェル要素を入れる事は出来ませんでした。

しかし、実際のウェブブラウザでは、殆ど全てでそのような記述が有効になります。

つまり、内容となるブロックレヴェル要素の全てがアンカーとなるのです。

HTML 5ではこの事実を追認し、<a>要素がブロックレヴェル要素を内容に持つ事を容認しております。

唯一の制限は<a>要素など閲覧者の操作が出来る要素(インタラクティヴ内容要素)が入らない事です。

セクションを構成する要素。

従来のブロックレヴェル要素を更に纏めた概念として、HTML 5ではセクショニング内容が定義されております。

これらの要素を用いなくてもHTML 5として不適合になる事はありませんが、巧く活用すれば文書はより構造的になるでしょう。

<section>要素。

<section>要素は、文書中の一セクションです。

フロウ内容の一つで、且つセクショニング内容でもある要素です。

内容はフロウ内容となります。

<nav>要素は、ナヴィゲーション関連のセクションです。

フロウ内容の一つで、且つセクショニング内容でもある要素です。

内容はフロウ内容となります。

<article>要素。

<article>要素は、一つの記事のセクションです。

フロウ内容の一つで、且つセクショニング内容でもある要素です。

内容はフロウ内容となります。

<aside>要素。

<aside>要素は、本文から外れる内容(脚注など)を納めたセクションです。

フロウ内容の一つで、且つセクショニング内容でもある要素です。

内容はフロウ内容となります。

<hgourp>要素。

<hgourp>要素は、見出しの集まりです。

フロウ内容の一つで、且つ見出し内容でもある要素です。

直下の内容は一個以上の<h○>要素に限られます。

例えば、ページの大見出しに題名とサブタイトルを用いたい場合、以下のようにマークアップする事が考えられます。

<hgroup>
    <h1>しらぎくのウェブサイト作成入門</h1>
    <h2>〜HTML, CSS, JAVAスクリプト, モバイルなど〜</h2>
    </hgroup>

<header>要素及び<footer>要素は、文書のヘッダ/文書のフッタとなるセクションです。

いずれもフロウ内容の一つです。

内容はいずれもフロウ内容となりますが、これらの要素の入れ子は出来ません。

主なテキストレヴェル要素。

HTML 4.01以降に導入された、インライン要素或いはテキストレヴェル要素の概念はHTML 5ではなくなりますが、それに近いものとして、フレージング内容と言う概念を導入しております。

それでも、仕様書ではテキストレヴェルの要素について、節立てして解説しております。

ここでは、新たに導入されたインライン要素或いは変更のあるインライン要素について解説いたします。

<time>要素。

<time>要素は、日時に関する語句です。

フロウ内容の一つで、且つフレージング内容の一つでもある要素です。

内容はフレージング内容となりますが、<time>要素の入れ子は出来ません。

<kbd>要素に導入された新しい考え方。

<kbd>要素は、古くから定義されている要素ですが、新たな意味が加わりました。

本来の定義はキーボードを通じて入力されるテキストであるにも拘らず、その要素名から、しばしば押下されるキーを<kbd>要素としても良いではないかと言う議論がされておりました。

HTML 5ではその回答として、二重に<kbd>要素としてマークアップしたものを押下されるキーとすると定義したのです。

例えば、以下の場合、

をそれぞれ意味します。

<dfn>要素の変更点。

<dfn>要素の現在の定義。

<dfn>要素は、定義される語句で、<p>要素, <dl>要素及びセクショニング内容内での定義文内で用いなければなりません。

フロウ内容の一つで、且つフレージング内容の一つでもある要素です。

内容はフレージング内容となりますが、<dfn>要素の入れ子は出来ません。

<dfn>要素は、HTML 4.01でも既に定義語として定義されておりましたが、更に厳密に扱いが変更されております。

具体的には、かつては定義の有無に拘らず専門用語を<dfn>要素としてマークアップする例もあったようですが、そのような使い方が出来なくなりました。

また、title属性を伴う場合、その属性値が実際に定義された語句となります。

ですから、以下の<dfn>要素は別物です。

前者はハイパーリンクに関しての定義文内のものであり、後者はスケートリンクに関しての定義文内でのものとなります。

<dfn>要素のかつての草案での定義について。

かつての草案では、<dfn>要素は一種のアンカーとして機能させる事も考えられておりました。

具体的には、<dfn>要素で定義された語句を内容に持つ<abbr>要素などは、自動的に当該<dfn>要素へのハイパーリンクとなるようにすると言うものでした。

例えば、文書中に <dfn>堀北真希</dfn> 要素があった場合、<abbr class="actress">堀北真希</abbr>要素を記述すれば、それが該当する<dfn>要素へのリンクとなる訳です。

しかし、よく考えれば分かる事ですが、他の文書に定義があった場合この方法では参照する事が出来ません。

また、そのような機能を実装しているウェブブラウザの存在は全くと言って良いほど知られておらず、後方互換性の見地からも問題が生じ得ます。

そのような事からか、<dfn>要素をアンカーとして機能させると言う文言は何時しか削除されたのです。

<i>要素の変更点。

<i>要素は、従来は斜体テキストと定義されておりましたが、HTML 5では通常のテキストと異なったスタイルを与えられた(視覚系ブラウザであれば斜体表示)、汎用のフレージング内容です。

フロウ内容の一つで、且つフレージング内容の一つでもある要素です。

内容はフレージング内容に限られます。

HTML 2.0の頃から存続してした要素ですが、斜体テキストと言う物理要素であったため一部では否定的な見方もされた要素でした。しかし、HTML 5では特別なスタイルを与えられた汎用のインライン要素として再定義されました。

尚、HTML 5では斜体表示と決めている訳ではありません。従ってスタイルシート言語で任意のスタイルを与えても良い事としております。

<b>要素の変更点。

<b>要素は、従来は太字テキストと定義されておりましたが、HTML 5では通常のテキストと異なったスタイルを与えられた(視覚系ブラウザであれば太字表示)、汎用のフレージング内容です。

フロウ内容の一つで、且つフレージング内容の一つでもある要素です。

内容はフレージング内容に限られます。

HTML 2.0の頃から存続してした要素ですが、太字テキストと言う物理要素であったため一部では否定的な見方もされた要素でした。しかし、HTML 5では特別なスタイルを与えられた汎用のインライン要素として再定義されました。

尚、HTML 5では太字表示と決めている訳ではありません。従ってスタイルシート言語で任意のスタイルを与えても良い事としております。

<strong>要素の変更点。

<strong>要素は、従来はより強い強調と定義されておりましたが、HTML 5では重要なフレーズと言う定義に変更されます。

<em>要素などとの関係については、別文書・HTML 5での<em>要素, <strong>要素と新要素・<mark>要素をご覧ください。

<mark>要素。

<mark>要素は、(他の文脈から関連付けられるであろう)目立たせたフレーズです。

フロウ内容の一つで、且つフレージング内容の一つでもある要素です。

内容はフレージング内容に限られます。

策定当初は<m>要素とされましたが、現在では<mark>要素に変更されております。

<progress>要素。

<progress>要素は、スクリプト処理の進行状況などを表すフレーズです。

フロウ内容の一つで、且つフレージング内容の一つでもある要素です。

内容はフレージング内容に限られますが、<progress>要素の入れ子は出来ません。

<meter>要素。

<meter>要素は、数量に関するフレーズです。

フロウ内容の一つで、且つフレージング内容の一つでもある要素です。

内容はフレージング内容に限られます。

DOM操作などで動的に変更する事を想定して、最大値及び最小値を指定するmax属性及びmin属性及び高い値とされる閾値及び低い値とされる閾値を定めるhigh属性及びlow属性も定義されております。

また、数値以外の語句をマークアップする場合には、具体的な値をvalue属性で与える事になります。これに依りDOM操作で値をグラフ化する事が可能になります。

<ruby>要素の変更点。

<ruby>要素は、XHTML 1.1での定義同様、ルビを与えられたテキストですが、内容モデルが大幅に変更されております。

フロウ内容の一つで、且つフレージング内容の一つでもある要素です。

内容は、以下のものが一個以上となります。

  1. フレージング内容の直後に一個の<rt>要素(ルビテキスト)
  2. またはフレージング内容の直後に<rp>要素(ルビ非対応環境向けの区切り符号), <rt>要素(ルビテキスト), <rp>要素の順

具体例を挙げておきます。

<p><ruby>堀北<rp>(</rp><rt>ほりきた</rt><rp>)</rp></ruby>真希ちゃんは、最も人気のあるアイドル女優の一人です。</p>
<p><ruby>涼宮<rp>(</rp><rt>すずみや</rt><rp>)</rp></ruby>と言う苗字は実在しないらしい。</p>

主なマルティメディア要素。(平成22年 1月30日 更新)

仕様書では埋め込み内容とされておりますが、いわゆるマルティメディアを埋め込む要素の事です。

<figure>要素。(平成22年 1月30日 更新)

<figure>要素は、埋め込まれるセクションです。

フロウ内容の一つです。

直下に入る内容はフロウ内容となりますが、必要に応じて先頭か末尾のいずれかにキャプションを<figcaption>要素として入れる事が可能です。

埋め込まれるコンテンツとしては、画像や動画などでも良いのですが、HTMLの切片なども含まれます。

例を挙げておきましょう。

<figure>
    <img alt="" src="HORIKITA_Maki.JPG" width="240" height="320" />
    <figcaption>堀北真希ちゃん&#9825;</figcaption>
    </figure>

この場合、(恐らく)堀北真希ちゃんの写真の後に、堀北真希ちゃん♡と言うキャプションが付く形になります。

従来、「文章に含まれない画像などは取敢えずリストとしてマークアップすべきだ、<div>要素としてマークアップするな」などと言われたりしたものですが、こじ付けがましくリストとしてマークアップする事に疑問を感じたかも知れません。HTML 5ではこのように専用の要素が定義されたため、問題を感じなくなるでしょう。

平成22年 1月30日付の変更点。

平成22年 1月29日までの草案では、

と言う内容モデルでしたが、インターネットエクスプローラ 7.0までで<dt>要素/<dd>要素に問題がある事が判明したからか、上記のように全く異なる内容モデルになりました。

<img>要素の変更点。

<img>要素では、従来如何なる場合でも省略が許されなかったalt属性について、省略しても良い事とされました。

勿論、アンカー内など省略されては困る場合には当然記述しなければなりませんが、文章内にない画像であれば、省略しても良い事とされました。

<embed>要素の正式な規格化。

<embed>要素は、従来から非公認要素とされておりましたが、HTML 5で漸く公式の要素となりました。

インターネットエクスプローラは代替コンテンツを持てる要素としておりましたが、空要素として定義される事となっております。

また、<embed>要素固有の属性は以下のものが定められております。

src属性
埋め込むオブジェクトのURIです。
type属性
埋め込むオブジェクトのMIMEタイプ。
width属性
オブジェクトの横幅です。
height属性
オブジェクトの高さです。

この他、XMLの文法に従い、ラテン文字の大文字を含まない属性名であれば(実際にはHTML 5では属性名は全て小文字かされる)、どんなHTML 5の名前空間に属さない属性も指定する事が出来ます。

<object>要素の変更点。

<object>要素は、HTML 4.01で既に定義されておりますが、一部変更があります。

まず、属性の多くが削除されました。HTML 5で定義されている<object>要素固有の属性は以下の通りです。

data属性
埋め込みオブジェクトのURIを指定します。
type属性
埋め込みオブジェクトのMIMEタイプを指定します。
name属性
埋め込みオブジェクトに与える名前を指定します。DOM操作などで用いられます。
usemap属性
クライアントサイドクリッカブルマップを用いる場合、対応する<map>要素のname属性値をフラグメントとして指定します。
form属性
フォームの入力欄などに対応するオブジェクトの場合、対応する<form>要素のname属性値を指定します。
width属性
オブジェクトの横幅を指定します。
height属性
オブジェクトの高さを指定します。

尚、data属性とtype属性の双方を省略する事は出来ません。

これに依り、かつて<p>要素<address>要素などブロックレヴェル要素を内容に含み得ない要素内でブロックレヴェル要素を内包させるために属性を持たない<object>要素を含めさせると言う"文法破り"が出来なくなりました

また、<object>要素の内容についても、透明な内容とされており、上記のような"文法破り"のための利用を禁じております。

<video>要素。

<video>要素は、埋め込まれる動画です。

フロウ内容の一つで、フレージング内容の一つでもあり、且つ埋め込み内容の一つでもある要素です。

<video>要素の内容は、以下の順となります。

  1. (src属性で動画を指定しない場合のみ)再生する動画を指定する一個以上の<source>要素
  2. <video>要素をサポートしていない環境向けの代替文章

属性としては、

src属性
埋め込む動画のURI
width属性
埋め込む動画の横幅
height属性
埋め込む動画の高さ
loop属性
記述されている場合には繰返し再生します。

などがあります。

例えば、以下のようになるでしょう。

<figure>
    <figcaption>堀北真希ちゃん&#9825;</figcaption>
    <video src="HORIKITA_Maki.wmv" width="480" height="320">
        <p><a href="HORIKITA_Maki.wmv" type="video/x-ms-wmv">堀北真希ちゃんの動画</a>を配信しております。</p>
        </video>
    </figure>

注意すべき事として、<video>要素での埋め込みはプラグインを起動するのではなく、ウェブブラウザが直接当該動画を再生する事です。

このため、対応する動画形式を決める必要があるのですが、それぞれの思惑があり統一は困難になっております。

<audio>要素。

<audio>要素は、埋め込まれる音声です。

フロウ内容の一つで、フレージング内容の一つでもあり、且つ埋め込み内容の一つでもある要素です。

<audio>要素の内容は以下のようになります。

  1. (src属性で音声を指定しない場合のみ)再生する音声を指定する一個以上の<source>要素
  2. <audio>要素をサポートしていない環境向けの代替文章

属性としては、

src属性
埋め込む音声のURI
loop属性
記述されている場合には繰返し再生します。

などがあります。

注意すべき事として、<audio>要素での埋め込みはプラグインを起動するのではなく、ウェブブラウザが直接当該音声を再生する事です。

このため、対応する動画音声を決める必要があるのですが、それぞれの思惑があり統一は困難になっております。

<source>要素。

<source>要素は、<video>要素<audio>要素などの第一子要素となり得る要素で、実際に埋め込む動画なり音声なりを指定する要素です。

<source>要素は空要素です。属性としては、

src属性
埋め込むメディアのURI
type属性
埋め込むメディアのMIMEタイプ

などがあります。

ところで、<video>要素<audio>要素とも、埋め込むメディアのMIMEタイプを指定する方法がありません。

何故かと言えば、メディアが異なるとメディアのURIも異なったものになる場合が多いからです。

<video>要素や<audio>要素でMIMEタイプを指定してしまうと、別のタイプなら対応出来る環境では取扱が出来なくなってしまう恐れがあります。

そこで、複数タイプのメディアを用意している場合には、<video>要素や<audio>要素で直下の冒頭に用意しているメディアを<source>要素で列挙する事で、その中から対応出来るものをウェブブラウザが選択出来るようにすると言う訳です。

例えば、以下のようになるでしょう。

<figure>
    <figcaption>堀北真希ちゃん&#9825;</figcaption>
    <video width="480" height="320">
        <source src="HORIKITA_Maki.wmv" type="video/x-ms-wmv" />
        <source src="HORIKITA_Maki.mov" type="video/quicktime" />
        <p>堀北真希ちゃんの動画を配信しております。</p>
        <ul>
            <li><a href="HORIKITA_Maki.wmv" type="video/x-ms-wmv">堀北真希ちゃんの動画</a></li>
            <li><a href="HORIKITA_Maki.mov" type="video/quicktime">クイックタイム版</a></li>
            </ul>
        </video>
    </figure>

現状、<video>要素<audio>要素が使える最新のウェブブラウザでは、当然<source>要素にも対応しております。

しかし、ファイヤーフォックスなど、対応していないメディア形式の<source>要素が先行した場合に(対応している形式の<source>要素が後続していても)エラーとしてしまう不具合を持ったものがあり、実用化はまだまだ先の事のようです。

<canvas>要素。

<canvas>要素は、クライアントサイドスクリプトに依りビット単位での描画が出来る領域です。

フロウ内容の一つで、フレージング内容の一つでもあり、且つ埋め込み内容の一つでもある要素です。

<canvas>要素の内容は<canvas>要素やスクリプトに対応していない環境向けの代替文章です(透明な内容)。属性としては

width属性
領域の横幅
height属性
領域の高さ

が定義されております。

尚、<canvas>要素に対応している環境では、初期化された際に黒無地とする事とされております。

平成21年12月 7日現在、既にインターネットエクスプローラ以外の大手ウェブブラウザ(ファイヤーフォックス, オペラ及びサファリなど)の最新版では完全とまでは行かなくてもサポートがされております。

主な使い道は、ウェブ上で動作するCADやヴィデオゲームなどが考えられます。

追加された主な属性。

data-○○属性(私的な属性)。

クライアントサイドスクリプトやウェブプログラムのために、私的な属性を用いたいと思った方もいるかも知れません。

DTDで規定された従来のHTMLでは、勝手な属性名の属性を付ける事は出来ませんが、HTML 5ではdata-○○属性と言う私的な属性を用いる事が出来ます。

これは、data- の後ろにXMLの名前規則に合致した一字以上の半角コロン及び半角ラテン大文字を含まない文字列が続くものです。

尚、当然ながら勝手に定義した属性なので、CSSなどのセレクタに使う場合には注意が必要です。

変更された主な属性。

accesskey属性の変更点。

accesskey属性は従来は特定の要素でのみ定義されておりましたが、HTML 5では一般属性となります。

従来からの相違点として、キーは複数のキーを空白文字で区切って指定出来ます。

複数のキーを指定された場合、アクセスキーとして利用可能な文字を前から順番に探して行って割り当てます。

例えば、以下のように記述すると、PCならN携帯電話ならダイヤルボタンの#をアクセスキーとして採る事でしょう。

<a accesskey="N #" href="WhatIsNew.html">更新内容のご案内</a>

tabindex属性の変更点。

tabindex属性も従来は特定の要素でのみ定義されておりましたが、HTML 5では一般属性となります。

XML関連の属性の扱い。

在来HTMLであるHTML 4やISO-HTMLを利用する場合、XML関連の属性は利用出来ませんでした。

HTML 5では、

これらの属性を形式的に記述する事が出来るようになります。

xmlns属性

在来HTMLとしてHTML 5を利用する場合、XHTML 1 文書のHTML 5化、或いはHTML 5文書の将来のXHTML 5への移行を容易にするため、xmlns="http://www.w3.org/1999/xhtml" 属性を任意の要素に附与する事が出来ます。

xml:lang属性

XML名前空間を指定し、且つそれに属するlang属性は在来HTML文書では利用出来ません。

ですが、

を容易にするため、HTML 5では

  1. lang属性と併記し
  2. 且つ値がlang属性値と(大文字小文字問わず)一致する

場合に限り、xml:lang 属性を併記出来ます。

この場合、xml: は名前空間を指定するものではなく、在来HTMLで定義された属性名の一部と見なされます(つまり、勝手に変えてはいけない)。

尚、在来HTML 5として作成した文書をXHTML 5に移行する場合、lang属性はわざわざ削除する必要はありません。lang属性の値がxml:lang属性の値を(大文字小文字問わず)同じである限り、残しておいても問題はない事としております。

具体的には、以下のように記述が出来ます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"></html>

尚、xml:id属性(一般XMLで利用出来るID値の識別子を与える属性)やxml:base属性(一般XMLで利用出来るデフォルトのURIを指定する属性)は在来HTMLとして利用する場合には記述出来ません。

非推奨の扱いを取り消された要素・属性。

HTML 4.0で非推奨とされた要素・属性の中で、その扱いを取り消されたものがあります。

これらの要素・属性は、HTML 5の文書では堂々と利用する事が可能となります。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com