このチュートリアルの初めに、紹介された要素から驚くような効果を期待しないでください。外観はそれほど魅力的ではありませんが、それらは文書を論理的かつ意味論的に構造化するために興味深いものです。
ナビゲーションエリア
nav要素を使用すると、ナビゲーションバーまたは他のエリアを追加の要素として意味的にマークアップできます。この要素は他のページへのハイパーリンクや補足情報をマークアップすることを主な目的としています。
例:
<nav> <a href="index.html">ホーム</a> <a href="html5.html">HTML5の学習</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">WordPress</a> </nav>
nav内では任意の要素を使用できます。したがって、引き続きリストを使用してナビゲーションを定義できます。ただし、他の要素もnav内で問題なく使用できます。また、navは同じ文書内で複数回現れることもあります。
詳細を指定
もう1つ興味深い要素はdetailsです。これにより、コンテンツに関する追加情報を指定できます。ただし、details要素はsummary要素と組み合わせて本当に興味深くなります。この要素については後述します。
まず、detailsの使用例:
<article>
<details>
<summary>記事へのリンク...</summary>
<ul>
<li><a href="references1.html">リンク1</a></li>
<li><a href="references2.html">リンク2</a></li>
<li><a href="references3.html">リンク3</a></li>
</ul>
</details>
<details>
<summary>記事の出典...</summary>
<ul>
<li><a href="source1.html">リンク4</a></li>
<li><a href="source2.html">リンク5</a></li>
<li><a href="source3.html"">リンク6</a></li>
</ul>
</details>
</article>details要素の内容は、訪問者がsummary要素をクリックするまで非表示になります。
たとえば、ビデオプレーヤーと関連して興味深いかもしれません。以下に例を示します:
<video id="movie" width="320" height="180" autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
<details open>
<summary>ビデオプレーヤーの制御を表示/非表示</summary>
<p>
<button id="start" onClick="start()">再生/一時停止</button>
<button id="mute" onClick="mute()">ミュート</button>
<button id="louder" onClick="louder()">音量を上げる</button>
<button id="quieter" onClick="quieter()">音量を下げる</button>
</p>
</details>
ページを表示すると、最初はプレーヤーウィンドウのみが表示されます。
ただし、訪問者が表示されているサマリーをクリックすると、summaryで定義されたコンテンツが表示されます。
仕様では、summary要素が見つからない場合、ブラウザーはデフォルトコンテンツを表示するとされています。detailsに対して注目すべき点はopen属性です。
<details open> … </details>
この属性を設定すると、ページの読み込み時にsummary要素の内容が直接表示されます。
概要
最後にsummary要素にもう少し詳しく見てみましょう。
<article>
<details>
<summary>記事へのリンク...</summary>
<ul>
<li><a href="references1.html">リンク1</a></li>
<li><a href="references2.html">リンク2</a></li>
<li><a href="references3.html">リンク3</a></li>
</ul>
</details>
<details>
<summary>記事の出典...</summary>
<ul>
<li><a href="source1.html">リンク4</a></li>
<li><a href="source2.html">リンク5</a></li>
<li><a href="source3.html"">リンク6</a></li>
</ul>
</details>
</article>
summary を使用することで、details と関連付けてまだ開かれていないコンテンツが定義されます。したがって、summary を使用すると、必要な時に表示される追加情報を取り込むことができます。
確かに、JavaScriptを使用して展開および折りたたみ可能な領域を簡単に作成することもできます。ただし、ブラウザーでJavaScriptが無効になっていると、アプリケーションは機能しません。そのため、details と summary の広範なサポートが望ましいです。
余白とマージナル
追加情報、マージナル、クロスリンクなどは、HTML5のaside要素を使用してマークアップすることができます。これにより、マークアップされたコンテンツはドキュメント全体のコンテキストにありますが、直接関連付けられていません。
HTML5の仕様では、aside 要素に対してどのような寸法が適用されるべきかが明確に定義されていないことに注意してください。したがって、aside コンテンツは例えばマージナルやサイドバーとして表示される可能性があります。
次の例は、aside 領域の定義を示しています。
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Web-Apps erstellen (Teil 10): jQuery mobile (2)</h2>
<p>このチュートリアルでは、最初の実際のjQMページが作成されます。そのためには、すでに学習したHTMLの基本構造が必要です。</p>
<aside>
<h3>さらなる情報</h3>
<ul>
<li><a href="#/fn1">詳細な情報はこちら…</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>ナビゲーション</h2>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="# ">お問い合わせ</a></li>
</ul>
</nav>
</aside>
</body>時間を追加する
新しいtime要素を使用して、時間を特定の方法でマークアップすることができます。この要素の特長は、時間を人間と機械が読める形式にすることです。
時間はtime要素内に記述されます。ブラウザーが時間情報を読み取る機会を与えるために、time 要素の datetime 属性が使用されます。
<p>私たちは <time datetime="2014-04-15 19:00">4月15日19時に会います</time>。 </p>
ここでまた述べておくと、現在のブラウザーでは視覚的な影響がなく、機械が時間情報を読み取れるようにするだけであることに注意してください。
テキストの強調
mark 要素を使用すると、単語やテキスト全体を視覚的に強調表示することができます。HTML5の仕様には、この要素をテキストコンテンツと組み合わせて使用することを明示的に指示しており、また、特定のコンテキストと関連付ける必要があるとされています。
例:
<p>このチュートリアルでは最初の実際のjQMページが作成されます。そのためには、お持ちの
ブラウザーがどのように強調表示を行うかは明確に定義されていません。
ただし、Google ChromeとFirefoxの両方が黄色の背景を採用しています。ダイアログのマークアップ
HTML5では、ダイアログの専用マークアップにも配慮されています。そのために
dialog要素が使用されます。ただし、現時点ではdialog要素はSafariおよびGoogle Canary、つまりブラウザーの開発者向けバージョンのみがサポートしています。こちらも例を示します:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;"> <p>これはボックスの内容です。</p> <button id="hide">閉じる</button> </dialog> <button id="show">内容を表示</button> </div> <script type="text/JavaScript"> (function() { var dialog = document.getElementById('dialog'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })(); </script>
ボタンをクリックするとダイアログが表示されます。この機能を使用するには、前の例のようにHTML5、CSS、JavaScriptの組み合わせが必要です。
