必要条件

この記事に必要な予備知識

Familiarity with building web pages using HTML and CSS.

ユーザーレベル

すべて

HTML5セマンティクスに関する前の記事では、HTML5仕様に追加された新しい要素と、そのセマンティックな意味について解説しました。この記事では、HTML4(あるいはXHTML—この記事ではこれらを同じ意味で使用します)とHTML5のドキュメント構造の違いについて、新しいグローバル属性の追加を含めて説明します。

ドキュメント構造の変更

HTML5では、ドキュメント自体にいくつかの変更が加えられています。個人的に残念なことは、HTML5では形式の整わないドキュメントの作成も許されていることです。言い換えれば、<p>要素や<li>要素を閉じないルーズな構造が許容されています。それでもブラウザーはどう処理すればよいかわかります。大文字と小文字は区別されないので、先頭を大文字にするのもすべて小文字にするのも自由です。HTML4に慣れている方なら、今までのスタイルを変える必要はありません。XHTMLが気に入っているなら、そのまま使い続けて何の問題もありません。ただし、ルーズな形式のドキュメントは許容されるとはいえ、推奨されない場合もあります。ごちゃごちゃしたコードの問題解決には手間がかかるので、これからもクリーンなマークアップを使用することをお勧めします。

doctype

HTML4とHTML5の最も明らかな違いは、短くなった新しいdoctypeです。読者の皆さんはどうかわかりませんが、私にはHTML4やXHTML1のdoctypeは覚えられませんでした。あまりに長くて込み入っていたからです。次に示すのがこれまでのdoctypeです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

これが次のようなバージョンのない短いものになります。

<!DOCTYPE HTML>

バージョン番号がないのは、変化がこれで終わりで、HTMLがこれ以上進化しないという意味ではありません。HTML5は過去との互換性を持つように設計されているため、W3Cは拡張の際にバージョン番号方式を使い続ける必要はないと判断したのです。いずれにせよ、現在のブラウザーは表示できるものを表示します。Internet Explorer(バージョン5およびそれ以前)では、規格に準拠しない間違ったボックスモデルが使用されていました。Microsoftは後に標準のW3Cのボックスモデルによるレンダリングに切り替えたため、Webページでどのレンダリングモードを使用するかを指定する方法が必要になりました。このため、ブラウザーが標準モード(W3C準拠バージョン)と互換モード(Web上の多くの古いドキュメントで使用されている標準に準拠しないバージョン)のレンダリングを切り替えるためのdoctypeが作成されました。新しい単純化されたdoctypeは、ドキュメントを標準モードでレンダリングするようにブラウザーに指示するための最も文字数の少ない方法です。

charset

ドキュメントの構造に関するもう1つの変更は、charsetすなわち文字エンコーディングです。これまで使われていた記述は次の通りです。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

doctypeと同様、これも次のように簡単に記述できるようになりました。

<meta charset="utf-8">

スタイルシートおよびスクリプトへのリンク

シンプル化の一環として、<link>要素と<script>要素にtype属性が必須ではなくなりました。これまでの記述は次の通りです。

<link href="assets/css/main.css" rel="stylesheet" type="text/css" /> <script src="assets/js/modernizr.custom.js" type="text/javascript"></script>

これからは次のように短く書くこともできるようになります。

<link href="assets/css/main.css" rel="stylesheet" /> <script src="assets/js/modernizr.custom.js"></script>

ドキュメント全体

これまで説明したことを1つのドキュメントにまとめると、HTML5ページは次のようになります。

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Document Name</title> <link href="assets/css/main.css" rel="stylesheet" /> <script src="assets/js/modernizr.custom.js"></script> </head> <body> <p>Your content</p> </body> </html>

グローバル属性

HTML4の属性に対して、いくつかの変更があります。既におなじみと思われる既存の属性のいくつかが、グローバルになりました。これらは、必要に応じてどの要素にも適用できます。次のものがそうです。

  • accesskey
  • class
  • dir
  • id
  • lang
  • style
  • tabindex
  • title

さらに、いくつかの新しいグローバル属性が追加されました。それぞれについて簡単に見ていきましょう。

contenteditable属性

contenteditable属性は、任意のHTML要素を編集可能にするものです。truefalseinheritの3種類の値を取ることができます。

contenteditableは既に使用されているのをご覧になったことがあるかもしれません。これは例えば、チュートリアルなどで、ユーザーがデモを操作して値を変更できるようにするのに便利です(CSSトリックのデモを参照)。カンファレンスなどのプレゼンテーションで、プレゼンターがHTML5で作成したスライドを使って、プレゼンテーション中にブラウザーからその場でスライドを編集するのをご覧になった方もおられるかもしれません。

どんなものでも編集可能にできます。ページの中にテキストエディターを作成することだってできます。ローカルストレージを使用すれば、ユーザーが後でページに戻ってきたときに変更を保持しておくこともできます。contenteditableはIEではバージョン5.5からサポートされているので、サポートはかなり良好です(ただし、モバイルの世界ではまだです)。ページの一部を編集可能にする場合、次のようにoutlineと属性セレクターを使って、ユーザーに視覚的な手がかりを与えることができます。

[contenteditable]:hover, [contenteditable]:focus { outline: 2px dotted red; } <p contenteditable="true">Your content</p>

属性セレクターはIE7からサポートされており、特定の属性を持つ要素をターゲットにするために使用できます。ここでは:hover:focusの2つの擬似クラスを使っているのがおわかりでしょう。これは、ユーザーがマウスとキーボードのどちらを使っていても視覚的手がかりが得られるようにするためです。borderでなくoutlineを使用したのは、要素のボックスモデルに追加されないので、動作したときにページのその部分が突然変化するように見えることを避けられるからです。なお、IE6/7をサポートする必要がある場合は、borderを使用する必要があります。

contextmenu属性

W3C HTML5ワーキングドラフトには、次のように記されています。

contextmenu属性は、要素のコンテキストメニューを指定する。値は、DOM内のmenu要素のIDである。」

menu要素自体は、単なるコマンドのリストです。フォーム要素でも、リスト項目でも、他の要素でもかまいません。メニューは、keyupやmouseupなどのイベントが発生するまでは見えません。イベントが発生すると、オプションや操作のバブルメニューが表示されます。

これにより、ドロップダウンメニューと同じ方式でUIのスペースを節約できます。何らかの方法で要求されるまで表示されないからです。現時点ではサポートしているブラウザーはありませんが、実装の準備は進められています。コードは次のようになります。

<label for="char">Charter name: </label> <input name="char" type="text" contextmenu="boatmenu" required> <menu type="context" id="boatmenu"> <!—menu content elements here --> </menu>

data-*属性

W3C HTML5ワーキングドラフトには次のように記されています。

「カスタムデータ属性は、どの名前空間にも属さない属性であり、名前の先頭が「data-」で、ハイフンの後に少なくとも1文字が続くものである…」

カスタムデータ属性は、自分のサイトで動作するスクリプトとの間でデータを共有するための属性を作成するために使用します。一般的なソフトウェアによるデータ収集に利用することは想定されていません。指定できるカスタムデータ属性の数に制限はありません。caniuse.comには、「data-*属性はすべてのブラウザーで既に使用でき、getAttributeによってそれらにアクセスすることができる」と記されています。

サポートが良好なので、カスタムデータ属性が実際に使われている例は既にたくさんあります。Dreamweaver CS5.5では、jQuery Mobile(JQM)アプリケーションを作成できます。jQuery Mobileでは、要素やテーマなど様々なものの役割を識別するために、カスタムデータ属性が広く使われています。JQMページの例を次に示します。

<div data-role="page" id="page" data-theme="b"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content">Content</div> <div data-role="footer"> <h4>Footer</h4> </div> </div>

roleおよびaria-*属性

様々なブラウジング習慣や身体的障害を持つユーザーからWebサイトをアクセス可能にすることに努力している方なら、role属性とaria-*属性の価値がおわかりになると思います。WAI-ARIA(Accessible Rich Internet Applications)とは、障害を持つ人々にとって理解しやすく操作しやすい動的Webコンテンツやアプリケーションの定義方法を提供する方式です。これを実現するには、ドキュメントやアプリケーションの構造を定義するロールや、ウィジェットロール、関係、ステート、プロパティを定義するaria-*属性が使用されます。

HTML5アプリケーションのアクセシビリティを高めるために、仕様ではARIAの使用が推奨されています。セマンティックHTML5要素を使用するには、対応するロールを設定する必要があります。基本的な構造は次のようになります。

<header id="banner" role="banner"> ... </header> <nav role="navigation"> ... </nav> <article id="post" role="main"> ... </article> <footer role="contentinfo"> ... </footer>

この他に、たくさんのaria-*属性があり、コンテンツのナビゲーションと理解を容易にするために利用できます。aria-labelledbyaria-levelaria-describedbyaria-orientationなどは、コンテンツを認識しやすくする役割を果たします。詳しくは、ARIAのステートとプロパティのページを参照してください。

HTML5に関する前の記事で、新しいfigure要素とfigcaption要素について説明しました。そこで使用したコードは次のようなものでした。

<figure> <img src="virgin-gorda.jpg" alt="The boat as seen through the rocks at the Baths on Virgin Gorda."> <figcaption>The Baths at Virgin Gorda</figcaption> </figure>

aria-describedby属性を追加すると、<figure>要素と<figcaption>要素の間に、現時点では支援技術にとってセマンティックに存在しない関係を構築できます。コードは次のようになります。

<figure> <img src="virgin-gorda.jpg" alt="The boat as seen through the rocks at the Baths on Virgin Gorda." aria-describedby="capt1"> <figcaption id="capt1">The Baths at Virgin Gorda</figcaption> </figure>

詳しくは、SitePointにあるDerek FeatherstoneのARIAおよびアクセシビリティの現実に関するチュートリアルを参照してください。

draggableおよびdropzone属性

これら2つの属性は、新しいドラッグ&ドロップAPI(DnD API)に属するため、一緒に扱われています。draggable属性には、truefalseautoの3つのステートがあります(autoはキーワードではなく、単に値がない場合のデフォルトです)。W3C HTML5ワーキングドラフトには、次のように記されています。

「trueステートは要素がドラッグ可能であることを示す。falseステートはドラッグ可能でないことを示す。autoステートは、ユーザーエージェントのデフォルトの動作を使用する。」

何かをドラッグしようとする場合は、ドロップもできなければ意味がありません。dropzone属性はそのためにあります。現在指定できる値は、copymovelinkの3種類です。copyは、ドラッグされた要素のコピーを作成します。moveは、要素を新しい位置に実際に移動します。linkは、ドラッグされたデータへのリンクを作成します。DnD APIの利用は広がりつつあり、例えばGmailでは、ファイルを直接ブラウザーにドラッグしてアップロードすることができます。Ryan Seddonは、カスタムフォントをサーバーにアップロードせずにテストする方法を作成しました(Font Dragr)。これはDnD APIを利用しており、フォントファイルをブラウザーに直接ドラッグしてプレビューできます。

これらの属性に対するサポートは良好です(Androidを含む、Opera以外のすべてのブラウザーで利用可能)が、dropzoneではJavaScriptを多少使用する必要があります。初めて使用するための優れたチュートリアルとして、HTML5 DoctorのRemy Sharpの記事「Native Drag and Drop(ネイティブドラッグ&ドロップ)」があります。また、コンテンツのアクセシビリティを高めるためには、aria-dropeffectaria-grabbed(ステート)も重要です。

hidden属性

W3C HTML5ワーキングドラフトには、hidden属性に関して次のように書かれています。

「hidden属性はブール値の属性である。要素に対して指定すると、要素がまだ有意味になっていない、あるいは既に有意味ではなくなったことを示す。ユーザーエージェントは、hidden属性が指定された要素をレンダリングすべきではない。」

もちろん、この属性はJavaScriptを通じて操作することが前提になっています。例としては、Webゲームにログインするためにhidden属性を使用する場合が挙げられます。最初はログイン画面だけが表示され、ゲームは表示されていません。登録情報の確認が済むと、ログイン画面が消えてゲームが表示されます。

要素にhidden属性が適用されている場合、スクリーンリーダーを含むすべてのユーザーエージェントからは見えませんが、スクリプトとフォームコントロールは実行できます。単に表現が変わっただけで、display:noneと同じことです(HTML5アクセシビリティには、サポートするすべてのブラウザー、すなわち基本的にIE以外のすべては、display:noneを使用すると記されています)。display:noneを使用すると、要素にはボックス自体が表示されません。このため、その周りのすべてのものがその場所になだれ込むことになります。hidden属性も同じ働きをします。hidden属性、display:nonearia-hidden属性のどれを使用するかは、慎重に考慮する必要があります。

<fieldset id="login" hidden>

spellcheck属性

W3C HTML5ワーキングドラフトには、次のように記されています。

「ユーザーエージェントは、編集可能なテキストの綴りと文法をチェックすることができる。テキストは、フォームコントロール内(例えばtextarea要素の値)や、編集ホストの要素内(contenteditableを使用)に存在することができる。」

contenteditable属性と同様に、spellcheck属性の値はtruefalsedefaultのどれかです。trueはチェックされることを、falseはチェックされないことを、inheritは親に値があればそれを使用することを示します。

スペルチェックを実際に使用してみるには、Wufooのライブデモを参照してください。現在のブラウザーでのサポートはおおむね良好です(IEとSafari Mobileでは使用できません)。図1は、Chromeブラウザーでのスペルチェックのスクリーンショットです。テキストエディターやメールプログラムと同様に、赤線が引かれていることに注目してください。

<input type="text" spellcheck="true">

スペルチェックに関しては、利用できない場合の代替手段は必要ではありません。この属性はあれば便利ですが、なくてもほとんどの場合問題はなく、単に何も起こらないだけなので、意味があるところにはとりあえず付けておいてかまいません。

とても便利なリンク要素

新しいグローバル属性の話が続いて頭が混乱しているかもしれませんが、最後に1つ、HTML5のセマンティクスで最も魅力的な点を紹介させてください。これ1つだけで、新しい要素はまだ不要という方でも、HTML5のdoctypeを今すぐ使用する十分な理由になります。

それは、あらゆるものの周りにハイパーリンクを設定できることです。あらゆるものですよ。

画像をリンクで囲み、そのキャプションもまた同じリンクで囲むといった手間は、過去のものになったのです。あるいは、見出しとその下のコンテンツに同じリンクを別々に設定することも不要になったのです。W3C HTML5ワーキングドラフトには、次のように書かれています。

a要素は、パラグラフ全体、リスト、テーブル、さらにはセクション全体などを囲むことができる。ただし、内部にインタラクティブコンテンツ(ボタンや他のリンクなど)がないことが条件である。」

これがどれほどすごいことか、おわかりでしょうか。これを知った私は、即座に自分のサイトを変更しました。このサイトのホームページでは、見出しとパラグラフがグループ化されていましたが、リンクは別々に設定されていました。私はコードを次のように変更しました。

<ul> <li>...</li> <li id="training"> <a href="services.html#train"> <h1>Corporate Training</h1> <p>Bring your team up to speed on web standards, HTML5, CSS3, accessibility or Dreamweaver with a top expert in the industry.</p> </a> </li> <li>...</li> </ul>

これに関するブラウザーのサポートは良好です。私は自分の作業の中で、ときどきレンダリングが少しおかしくなるという問題に出くわしましたが、それは常にハイパーリンクをdisplay: blockに設定することで解決しました。Derek Featherstoneは、この方法によるアクセシビリティに関する大規模なテストを行っています。その結果、福祉機器のサポートに関しても問題がないという結論が出ています。

a要素がプレースホルダーとして使用可能

サイト全体で一貫したナビゲーションを使用する場合、ユーザーが現在表示しているページへはリンクしないのが普通です。しかし多くの場合、ナビゲーションのスタイルは、a要素およびそれを含むliまたはpと一体になっています。リンクを無効にするためにa要素全体を取り除いてしまうと、デザインが崩れるおそれがあります。この問題も解決されています。hrefだけを取り除けばよいのです。W3Cはこれに関して次のように述べています。

a要素にhref属性がない場合、この要素は、条件によってはリンクが設定されるはずだったが、実際には設定されなかった場所に対するプレースホルダーを表す。」

したがって、リストベースのナビゲーションでは、ユーザーがservices.htmlページを表示している場合、コードは次のようになります。

<ul> <li>...</li> <li id="services"><a>Services</a></li> <li id="resources"><a href="resources.html">Resources</a></li> <li id="clients"><a href="clients.html">Clients</a></li> </ul>

プレースホルダーとしてのa要素も、広くサポートされています。ナビゲーションに下線が引かれている場合(メニューでは通常ないことですが)、ハイパーリンクではないので下線は表示されません。それ以外のスタイルはそのままです。ご活用ください。

HTML5セマンティクスの理解 – 第3部では、古い要素への変更について説明します。廃止されたものやセマンティックな意味が変更されたもの、中には再導入されたものもあります。

また、HTML5の新しい機能について詳しくは、仕様を参照してください。仕様が技術的すぎてわかりにくいと感じられる場合は、Ben Schwarzが、ブラウザーベンダー向けの部分を削除して、われわれWebデベロッパーに必要な情報だけを残してくれた、読みやすいHTML5仕様があります。

皆様のご活躍をお祈りいたします。