HTML 5タグ説明

HTML 4.01が、1999年に標準となって以降、インターネットは大きく変わりました。今日では、HTML 4.01の要素のいくつかは廃止され、それらをあえて使うという動きはなく、全く使われていません。 テンプレートのマークアップを改善するために開発者は、HTML5タグと技術の使用を試みました。ページ・マークアップをチェックすると、若干の新しいタグに気がつくかもしれません。

新しいマークアップ要素

タグ 説明
<article> コンテンツの内容が独立し、自己完結しているという事を示す場合に使用されます。例えば、ニュース記事、ブログの投稿、フォーラムでの投稿、あるいは、それを除いたサイト内で、独立して配置されているコンテンツです。
<aside> ページの内容に関連はしているが、メインとなる内容からは逸れた補足的な内容として、本文と区別して扱うような場合に使用します。
<bdi> 書字方向の異なる言語が混在する文書で、句読点や、括弧などが自分が意図しない場所に配置されてしまう事を避けるため、周辺の文字から書字方向の影響を受けないように内容を隔離させる場合に使用します。
<command> ユーザが呼び出すことのできるコマンドを定義する場合に使用します。ラジオボタン、チェックボックス、またコマンドボタンなどです。
<details> 追加の文書の備考、また操作手段など、詳細情報であることを表す場合に使用します。
<summary> <summary>の親要素である<details>の内容の内、要約やキャプションを表す場合に使用します。
<figure> イラスト、図表、写真、コードソースのような、自己完結型のコンテンツを表す場合に使用します。
<figcaption> <figure>で使用した図表等のキャプションをつける場合に使用します。<
<footer> 文書またはセクションのフッターである事を定義する場合に使用します。ここには、著者名、文書の日付、連絡先情報、著作権情報を含むことができます。
<header> 文書またはセクションのヘッダーである事を定義する場合に使用します。ここには、ナビゲーションを含めることができます。
<hgroup> セクションの見出しである事を表したり、複数の見出しをまとめる場合に使用します。見出しを表すには<h1>から<h6>までを使います。<h1>が一番大きなメインの見出しで、その他はサブの見出しです。
<mark> 文書内のテキストをハイライトする場合に使用します。
<meter> 最大値と最小値が既知である際、測定値を定義する場合に使用します。
<nav> ナビゲーションのセクションである事を表す場合に使用します。
<progress> 作業完了までの進行状況を表す場合に使用します。
<ruby> ルビをふるセクションを指定する場合に使用します。(漢字のふりがな等)
<rt> ルビの内容を指定します。
<rp> ルビ要素をサポートしていないブラウザでは、本文とルビテキストが連続して表示されるため、その際にルビテキストを囲む括弧等を予め指定しておく場合に使用します。
<section> ページ内で、チャプターやヘッダー、フッター、またはその他のセクションを明示的に示す場合に使用します。
<time> 日付や時刻を、24時間での表記や、グレゴリオ暦で表示させる場合に使用します。
<wbr> テキストの長さによってブラウザの判断で、自動で改行されても良い位置である事を示す場合に使用します。

新しいメディアの要素

タグ 説明
<audio> マルチメディア・コンテンツやその他のオーディオストリーム等を再生する場合に使用します。
<video> ムービークリップまたは他のビデオストリームのような映像コンテンツを再生する場合に使用します。
<source> ビデオタグやオーディオタグの要素内で、コンテンツのソースを指定したり、異なる複数のフォーマットのファイルを指定する場合に使用します。
<embed> プラグインを必要とするコンテンツを、ページ内に埋め込む場合に使用します。
<track> ビデオタグやオーディオタグの要素内で、例えば字幕や見出しなどの、トラック情報を指定する場合に使用します。

新しいメディアの要素

タグ 説明
<canvas> JavaScript等のスクリプトを使用してグラフィックを描画する場合に使用します。その際、canvasタグはコンテナ要素になります。

新しいフォーム要素

タグ 説明
<datalist> <input>要素の入力値のオプションとなるリストを表示する場合に使用します。
<keygen> ユーザー認証をするための暗号化方式の一種である鍵ペア(キーペア)を作成する場合に使用します。
<output> 入力した数値の計算結果を表示する場合に使用します。

新しい<input>タグのtype属性

タイプ 説明
tel 電話番号を入力する場合に使用する属性値です。
search 検索テキストを入力する場合に使用する属性値です。
url URLを入力する場合に使用する属性値です。
email 1つまたは複数の電子メールアドレスを入力する場合に使用する属性値です。
datetime 日付および時間を入力する場合に使用する属性値です。
date 日付を入力する場合に使用する属性値です。
month 月を入力する場合に使用する属性値です。
week 週を入力する場合に使用する属性値です。
time 時間を入力する場合に使用する属性値です。
datetime-local ローカルの日付/時刻を入力する場合に使用する属性値です。
number 数値を入力する場合に使用する属性値です。
range 与えられた範囲内の数値を入力する場合に使用する属性値です。
color #FF8800のような16進数の色番号を入力する場合に使用する属性値です。
placeholder テキストが入力する前に、入力する内容についてのヒントを指定する場合に使用する属性値です。

説明は以上です。当社のテンプレートを使用するにあたり、より快適に作業ができることを願っています。


Comments are closed.