Fri, October 20, 2017

HTML5とは?

■概要

HTML5はHTML4に代わる次世代のHTMLとしてWHATWGおよびW3Cが策定を進めている仕様です。

従来のHTML4やXHTML1にはユーザーの操作に対して何かアクションを起こすといったいわゆるウェブアプリケーションの機能が不十分でした。
しかしHTML5にはウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されています。そのためHTML5が普及すればFlashなどのプラグインが不要になると言った意見も出てきています。Adobeは社をあげて反論しているようですが。。

また、HTML5ではページの構造をさらに明確にするための新しい要素がいくつか追加されています。
これによって、今まで本来の用途とは異なるdiv要素等でレイアウトされていたヘッダーやフッター、ナビゲーション等が明確に識別されるようになります。

■新たに追加されたマークアップ要素

(レイアウトに関する要素)

  • header要素:
    ページのヘッダ(ロゴや紹介文、VI等が含まれる部分)にあたるセクションを定義します。
  • footer要素:
    ページのフッタ(作者に関する情報、コピーライト等が含まれる部分)にあたるセクションを定義します。
  • section要素:
    一般的なセクションを定義します。Hタグとあわせて使うと、文書構造をさらに明確に示すことができます。
  • article要素:
    blogの記事など、独立した文書を定義します。
  • nav要素:
    ナビゲーションにあたるセクションを定義します。

(ブロック要素)

  • aside要素:
    本文を補足する情報(注釈、引用等)を定義。
  • figure要素:
    画像やビデオなどのキャプションや説明文を定義したり、本文と画像などを関連づけるための要素。
    テキストと画像などを<figure></figure>で囲むかたちで使用します。
  • dialog要素:
    対話形式の会話文などを定義します。

(インライン要素)

  • time要素:
    日付や時刻などを定義。
  • m要素:
    重要部分を示す要素。(マーカーのイメージ)
  • meter要素:
    料金や容量などの測定値を定義します。
  • progress要素:
    ダウンロードなどの実行中のタスクの進行状況を示すために使う要素。動的な部分で使われる要素。

(マルチメディア要素)

HTML5の真骨頂といったところですね。

  • video要素:
    imgタグのように画像を置く感じで動画を埋め込む事が出来ます。
    例) <video src="ファイル名">
  • audio要素:
    video要素と同じような使い方でオーディを再生することができます。また、autoplayやloopといった、オーディオを制御する属性も用意されています。
    例) <audio src="ファイル名">

以上、新たに追加された要素として重要と思われるものを列挙してみました。
全てを解説しているわけではないので、その他の要素や属性に関してを詳しく知りたい方はこちらからどうぞ。

参考:HTML 5 における HTML 4 からの変更点 3.1. 新しい要素
参考:HTML 5 における HTML 4 からの変更点 3.2. 新しい属性
参考:HTML 5 における HTML 4 からの変更点 3.3. 変更された要素
参考:HTML 5 における HTML 4 からの変更点 3.4. 不在の要素
参考:HTML 5 における HTML 4 からの変更点 3.5. 不在の属性

■API

HTML5はマークアップだけでなくWebアプリケーションを製作する手助けとなるAPIも提供しています。
これらのAPIは新しいアプリケーションのために導入された要素と共に使うことができます。

(新たに追加されたAPI例)

  • 新しいvideoおよびaudio要素にてビデオやオーディオを再生するAPI
  • Canvas要素で使用可能なAPI
  • オフラインアプリケーションを可能にするAPI
  • ドラッグ&ドロップのAPI
  • 戻るボタンのAPI

情報元:HTML 5 における HTML 4 からの変更点 4. API

タグ:

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

No related posts.


Leave a Reply

Spam Protection by WP-SpamFree