LotosLabo

プログラミング技術とか気になった情報を載せていきます

HTML5で変更・追加されたところ2

追加された要素


※新要素を使う際は対応しているブラウザや対応しているプラットフォーム、そのバージョンを確認する必要があります。

hgroup要素


セクションの見出しを表します。h1~h6の要素をグループ化するのに使用します。
h1~h6要素以外の要素を使用することは出来ません。
※しかし、廃止予定とかなんとか

<hgroup>
  <h1>あいうえお</h1>
  <h2>かきくけこ</h2>
</hgroup>



header要素


各セクションのヘッダーを表す場合に使用。

特徴:

・ページ内に複数使用できる
・見出し要素がなくても構わない
・セクショニング・コンテンツではないため、アウトラインに現れない
・header要素内ではheader要素、footer要素は使えない

<header>
 <hgroup>
  <h1>あいうえお</h1>
  <h2>かきくけこ</h2>
 </hgroup>
</header>



footer要素

各セクションのフッターを表す場合に使用。


特徴:

・ページ内に複数使用できる
・セクショニング・コンテンツではないため、アウトラインに現れない
・footer要素内ではheader要素、footer要素は使えない
・ページの最後に使用しなくても構わない


nav要素


ナビゲーションリンクを伴うセクション表す。サイトやページの主要なナビゲーションに使用する。すべてのリンクに使用せず、主要なところに使う。


aside要素

メインコンテンツとは関連性が薄く、切り離すことが出来るコンテンツ。サイト以外のリンクやブログパーツや外部リンクにしようする。


figure要素

キャプション付図表を表し、メインコンテンツから参照されるようなコンテンツを表す。
figura要素のキャプションを表すにはfigcaption要素を使用し、これは最後に入れる。

<figure>
 <img src=".jpg" alt="〇〇"/>
 <figcaption>〇〇</figcaption>
</figure>



section要素

セクションとは章や節や項のように、見出しとそれに関する内容というようにアウトラインになる範囲を定義する領域。section要素は必ず章や節で使わなければならない。またdivの要素の代わりではない。
章や節といった単位で扱うので、セクション内容を表すh1~h6の見出しが必ず必要になる。コンテナ要素ではないので、レイアウト目的に使用することはできない。スタイリングに都合の良い要素が必要になった場合はdiv要素が推奨されている。


article要素


記事であることを示す要素です。


audio要素


Flashなどを使用することなくオーディオプレイヤーをウェブページに表示することが出来ます。


属性:

src → 再生したオーディオファイルへのパス

preload → オーディオファイルの読み込み制御
      none …再生時まで読み込まない
      metadata …メタ情報のみ先に読み込む
      auto …先に読み込む

autoplay → オーディオが再生可能になった場合に、自動で再生を行うかを指示する

loop → 再生が終了後に、再び最初から再生するかを指示する

controles → 再生や停止ボタンなどのUIの表示


<audio src="audio/sample.wave" controls></audio>



canvas要素

スクリプティングによりグラフィックの描画することが出来ます。グラフの描画、写真の合成、アニメーションの作成が可能。
基本的にjavascriptと組み合わせて使用します。


<canvas id="sample" width="300" height="300">
 テスト
</canvas>



command要素

ユーザが呼び出すことのできるコマンド(ラジオボタンチェックボックス、またはコマンドボタン)を定義します。


detalist要素

フォームの入力欄などで入力候補となるデータリストを定義します。


details要素

ユーザーのリクエストに応じて提供される詳細情報を表します。


embed要素

プラグインで再生されるコンテンツ(動画や音声など)を文書内に埋め込みます。

<embed src="example.swf" type="application/x-shockwave-flash" width="400" height="300">



keygen要素


フォームの送信時に暗号鍵(秘密鍵と公開鍵のペア)を生成します。

<keygen name="example">



mark要素


テキストをハイライトして表示する

<mark>ハイライトで表示します</mark>




こんにちは


menu要素


操作メニューを作成する際に使用します。サブメニューをメインメニューで入れ子にして、階層メニューにすることもできます。


meter要素

特定の範囲内における数量や割合を示します。

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



output要素


計算結果の出力欄を表します。

<output name="example"></output>



progress要素


作業の進捗状況を示します。プログレスバーの作成です。

<progress value="50" max="100">50%</progress>


50%


source要素

再生候補となるメディアファイル(動画・音声)を指定します。この要素は、video要素、またはaudio要素の子要素として使用します。


summary要素

詳細情報のキャプション、要約、説明文などを表します。この要素は、details要素の最初の子要素として使用します。


time要素

正確な日付や時刻を表します。

<time>2014-1-31</time>



video要素


動画を文書内に埋め込みます。この要素に対応しているブラウザでは、プラグインを使わずに動画を再生することができます。

<video src="example.mp4" width="640" height="360" autoplay loop></video>



rp要素

ルビテキストを囲む括弧記号を指定します。この要素は、ruby要素の子要素として使用します(rt要素の前後に配置します)。


rt要素

、直前のテキストに対するルビテキスト(ふりがなの文字列)を表します。この要素は、ruby要素の子要素として使用します。


ruby要素

ルビを振ります。

<ruby>
漢<rt>かん</rt>
字<rt>じ</rt>
</ruby>


wbr要素

改行位置の候補を表します。


bdi要素


隔離されたテキストを表します。この要素によって隔離されたテキストは、周囲の書字方向に影響を及ぼしません。

<bdi>隔離されたテキストを表します</bdi>



track要素

動画や音声にテキストトラック(字幕など)を埋め込みます。この要素は、video要素、またはaudio要素の子要素として使用します。

<track src="example_ja.vtt" kind="subtitles" srclang="ja" label="日本語字幕" default>