HTML5を今から学ぶ人のための新要素の紹介

11_5_30_2_9-150x150

ついていけますか?おいていかれますか?HTML5の時代に・・・。いや!ついていくでしょあなたなら!

Googleが注目し世界が注目しはじめたHTML5。このHTML5には新たな要素が数多く追加されました。ここではこれらの要素を簡単に説明していきます。

目次

基本構成の新要素

header要素

ページのヘッダー部分に使います。主にサイトロゴやサイト名、概要、ナビゲーションなどを囲みます。header要素はページのヘッダ部分だけでなく、記事のヘッダとしても利用することができます。

<article>

 <header>

    <h2>H2見出し</h2>

    <p>ここに文章</p>

 </header>

</article>

footer要素

ページのフッター部分に使います。著作権表記やフッターバナーなどを囲みます。header要素同様記事のフッターとしても利用することができます。

<footer>

 <p>コピーライト</p>

</footer>

section要素

見出しとコンテンツのセットをひとまとめにするときに使う。

<section>

 <h1>H1見出し</h1>

 <p>ここに文章</p>

   <section>

    <h2>H2見出し</h2>

    <p>ここに文章</p>

   </section>

   <section>

    <h2>H2見出し</h2>

    <p>ここに文章</p>

   </section>

</section>

article要素

article 要素はサイトで単独で成り立ち自己完結したものを表します。たとえば1ブログ記事などを囲みます。しかし、ブログのカテゴリ一覧などでは5記事あれば1記事ごとに完結しており5つに分けられますのでそれぞれをarticle要素で囲むことができます。

【1ブログ記事の場合】

<article>

 <h1>H1見出し</h1>

 <p>ここに文章</p>

   <section>

    <h2>H2見出し</h2>

    <p>ここに文章</p>

   </section>

   <section>

    <h2>H2見出し</h2>

    <p>ここに文章</p>

   </section>

</article>

【カテゴリ一覧の場合】

<section>

  <h1>H1見出し</h1>

   <article>

    <h2>H2見出し</h2>

    <p>説明文・・・・続きを読む→</p>

   </article>

   <article>

    <h2>H2見出し</h2>

    <p>説明文・・・・続きを読む→</p>

   </article>

   <article>

    <h2>H2見出し</h2>

    <p>説明文・・・・続きを読む→</p>

   </article>

</section>

aside要素

メインのコンテンツとは関係しているけれども関係が薄いものや少し話が脱線している場合などサブコンテンツ的な表記をする場合に補足情報やイメージ図などを表示させたい場合にaside要素を使います。


   <section>

    <h2>H2見出し</h2>

    <p>ここに文章</p>

  <aside>

   <p>ちなみに文章2はこんなものです。</p>

    </aside>

   </section>

nav要素

ページ内の主要なナビゲーションを表示させる場合に使います。たとえばグローバルナビゲーションやサイドメニューなどのマークアップ用。

<nav>

 <ul>

  <li>メニュー1</li>

  <li>メニュー2</li>

  <li>メニュー3</li>

 </ul>

</nav>

hgroup要素

H1~H6の見出しを表すときに使います。これらの要素を2つ以上入れるとレベルが高いほうほど見出しとなり、それ以外は副題となります。

<hgroup>

 <h1>見出し1</h1>

 <h2>副題</h2>

</hgroup>

コンテンツをグーループ化

figure要素 figcaption要素

イメージや図などにキャプションを入れる場合に使うのがこの要素です。figure要素はイメージや図などに加えビデオやプログラムコードや引用文などにも利用することができます。figcaption要素にはfigureのタイトルだけでなく簡単な説明文を入れることができる。

<figure>

 <img src="" alt="">

 <figcaption>ここにキャプションや説明</figcaption>

</figure>

テキスト関連に働きを与える要素

time要素

日付や時間を表す要素。datatime属性を使いマシンが読み取れるフォーマットデータを入れることができます。

<time datatime="2011-10-12">10/12</time>

mark要素

文章中の単語や指定した文字列にハイライトするために使う要素。

サンプル:こんな感じにハイライト(ブラウザにより反映されないものあり)

<p><mark>ここがハイライト</mark></p>

ruby要素 rt要素 rp要素

ruby要素はルビをふることができる要素です。rt要素でルビのふりがなを表し、rp要素はルビを括弧で囲みたい場合に利用します。rubyをサポートしているブラウザではうまく表示されますが、サポートされていない場合はルビが目的文字の横に表示されていまいます。そんな時にrp要素を使い括弧で囲っておくと良いでしょう。

サンプル:

選択肢

(

せんたくし

)


<p>

<ruby>選択肢

 <rp>(</rp>

  <rt>せんたくし</rt>

 <rp>)</rp>

</ruby>

</p>

外部のコンテンツを組み込む

embed要素

HTML4からおなじみの要素ですが、実はHTML4では規定されていませんでした。それがHTML5になり念願の規定入りしました。

video要素 audio要素

video要素は動画の再生に利用し、audio要素は音楽再生に利用する要素となります。srcにオーディオファイルのURLをセットしてcontrols属性を入れるとユーザーインターフェイスが表示される。

source要素

ビデオやオーディオファイルはブラウザにより対応フォーマットが違う場合があります。そんな時はsource要素に複数のファイルの候補を指定することでブラウザは自分にあうフォーマットを順に探し出し再生するという便利な要素です。


<audio controls="controls">

 <source src="audio.mp3" type ="audio/mpeg">

 <source src="audio.ogg" type ="audio/ogg">

canvas要素

ビットマップグラフィックスを扱うためにjavascriptと連携させ使う要素がcanvas要素です。これまで動的要素を組み込むにはFlashなどのプラグインが必要でしたが、canvas要素とjavascriptを使うことで自由に動的コンテンツを表示させることが可能になりました。

フォーム関連要素

datalist要素

テキスト入力フィールドの候補リストを表示させるための要素です。テキストフィールドにカーソルを合わせるとしたに候補が表示されるアレですね!


<input type="text" list="s"/>

<datalist id="s">

 <option value="HTML4"></option>

 <option value="HTML5"></option>

 <option value="XHTML1.0"></option>

</datalist>

progress要素

タスクの完了度を表すのがprogress要素です。value属性に0~1の値を指定することでその進捗率にあわせたプログレスバーが表示されることになります。

サンプル:


<progress value="0.5"></progress>

meter要素

meter要素は使用率のような計測結果を表す要素です。

サンプル:

<meter value="0.5"></meter>

最後に

ここでは紹介できていない要素もありますが、そちらのほうはまたの機会にメモします。

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/html5/104/trackback/