このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

HTML5とは?

記事May 30th,2015
Aug.20th,2020
HTML5について

HTML

そもそもHTMLとは?

HTMLとは“Hyper-Text Markup Language”の略でウェブ上の文書を記述するためのマークアップ言語のことです。それぞれの語句を分解すると以下のような意味になります。

“Hyper-Text”(ハイパーテキスト)
複数の文書を相互に関連付けて結び付ける仕組みのこと。テキスト間を結びつける参照のことはハイパーリンクと呼ばれ、“Hyper-Text”、テキストを超えたテキストとなる所以はこのハイパーリンクです。
“Markup”(マークアップ)
テキストに目印を付けることで見出しなどの文章の構造や、文字の大きさや色などの修飾情報、ハイパーリンクなどの機能を文章中に記述していくこと。
“Language”(ランゲージ)
マークアップするためのルールや文法のこと。

ハイパーリンクによって文書間を結びつけたり、画像、動画、音声などの関連するデータを埋め込むことができるのがHTMLの最大の特徴です。“Markup”によって文書を人間だけでなく機械、コンピュータにも理解できるように目印をつけることでこれらを機能させることができるほか、見出しや段落などの文書の構造を明確化することができます。

HTMLでマークアップすると?

以下は適切に“Markup”されていない文書の例です。

バナナの果実<br>
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。<br>
<br>
バナナの保存方法<br>
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。<br>
<br>
バナナの栄養素<br>
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。<br>
バナナの果実
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。

バナナの保存方法
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

バナナの栄養素
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

改行によって閲覧している人間は見出し、段落をなんとなく知ることができます。しかし、コンピューターには見出しがどこなのか、段落がどこなのか、を読み取ることができません。

こちらはきちんと“Markup”された例です。

<h1>バナナの果実</h1>
<p>バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。</p>
<h1>バナナの保存方法</h1>
<p>果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。</p>
<h1>バナナの栄養素</h1>
<p>ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。</p>

バナナの果実

バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。

バナナの保存方法

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

バナナの栄養素

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

HTMLタグによってどの部分が見出し、どの部分が段落、と明確に文書の構造が示されているため、コンピューターにも見出しや段落を読み取ることができます。

また、コンピューターがタグによって文書の構造を読み取ることによってタグごとの標準のスタイルが適用され、見出しが太字になったり、文字の大きさが変わったりと閲覧している人間にも読みやすいものになります。

HTML5

HTML5とは?

広義での“HTML5”はウェブページやウェブアプリケーションを構築する際に使用されるHTMLだけでなくHTMLに関連する現代のウェブ技術を表す言葉として用いられますが、多くの場合はHTMLの現行の技術仕様である“HTML Living standard”のことを指します。

狭義でのHTML5は2014年に勧告されたHTML4.01に続くHTMLの技術仕様の改訂版で、HTMLの15年ぶりの大幅な改定版です。

HTML5のこれまで

1999年にHTML 4.01の仕様を勧告したW3Cは、これに続く次世代のマークアップ言語としてXHTMLを策定してXHTML1.0の仕様を勧告しました。

しかし、HTMLではコードの記法に多少誤りがあったとしてもブラウザーが補完してウェブページを表示できたのに対してXHTMLはかなり厳密に定義されていて多少の曖昧さも許容しなかったこともあり、XHTMLはあまり普及せず、多くのウェブデザイナーはHTML4.01を使用し続けました。

このような状況にもかかわらず、XHTMLの開発を進めるW3Cに対して不満を持ったApple、Mozilla、OperaはWHATWGを立ち上げて次世代のHTMLの在り方を検討するようになります。

主要なブラウザのデベロッパーからなるWHATWGは徐々に影響力を強め、2007年にW3CはHTMLの改訂を目的としたワーキンググループを立ち上げて、そこでWHATWGが策定していた技術仕様をHTMLの改訂版のベースとして採用しました。W3CとWHATWGは協力してHTML5の技術仕様を策定して2014年10月28日にHTML5が勧告されました。

HTML5はその後少しずつアップデートが続けられており、HTML5.1が2016年11月1日に、HTML5.2が2017年12月14日に勧告されました。

W3CとWHATWGの共同作業によって策定されたHTML5ですが、WHATWGはW3Cとの方針の相違から“HTML Living Standard”として独自にHTMLの標準化を進めていくようになります。

長らく2つの“標準”が併存する状態が続いていましたが、2019年5月になりようやくW3CとWHATWGは“HTML Living standard”をHTML技術仕様の唯一の標準規格とし、WHATWGが主体となってW3Cが協力して技術仕様を策定・更新していくことに合意しました。

なお、WHATWGの仕様書の冒頭にもあるように、“HTML5”はHTMLの標準化がWHATWGへ移った後も“HTML Living standard”を含めたウェブ技術を表す言葉として使用されています。

いままでのHTMLとの違い

今までのHTMLからHTML5になって変わった点についていくつか取り上げます。

スタイリング要素の廃止

HTML5では文書構造をHTMLで、装飾、スタイリングはCSSで、と明確に役割が分担されるようになりました。

これまでのHTMLには書体や文字の色を変える“font”要素や太字にするb”要素、イタリック体にするi”要素などスタイリング目的の要素がありましたが、そのほとんどが廃止かもしくは意味が変更になっています。

シンプルな動画や音声データ、グラフィックの埋め込み

これまでのHTMLではFlashなどのブラグインを使用しなければならなかった、動画や音声データ、グラフィックなどの埋め込みを、新たに追加されたvideo”要素audio”要素canvas”要素によってHTMLで直接を埋め込むことができるようになりました。

セクショニング要素の追加

これまでのHTMLでも見出しによって文章のアウトライン(階層構造)を生成することはできましたが、新しく追加されたarticle”要素nav”要素section”要素aside”要素によってより明確にすることができるようになりました。

簡潔になったコード

HTML5ではDOCTYPE宣言meta”要素などの記述が簡素化され、より簡潔にコードを書くことができるようになりました。

以下はDOCTYPE宣言の例です。

HTML5
<!DOCTYPE html>
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

以下はmeta”要素で文字エンコーディングを指定した例です。

HTML5
<meta charset="UTF-8">
HTML4
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

さまざまなAPIの追加

HTML5ではアプリケーションをプログラミングする際に使用する命令や関数の記述ルールである“API(Application Programming Interface)”が新たに追加されています。それぞれの“API”で定められた命令や関数を指定することで、ドラッグ・ドロップ機能や位置情報の取得などの機能をHTMLで実現することができます。これによってより高度な機能を持った“ウェブアプリケーション”を構築することが可能となります。

フレーム関連要素の廃止

以前はフレームを使用してウィンドウを縦や横に分割してメニューなどを設けているウェブサイトが良く見かけられましたが、アクセシビリティやユーザビリティに悪影響を及ぼすとしてフレーム関連の要素は廃止されました。

より機能が充実したフォーム

今までjavascriptなどで実装しなければならなかった入力必須や妥当性チェック、入力補助などの機能をHTML5では新たに追加された多数の属性、属性値を使用してHTMLだけで実現できるようになりました。

カテゴリ、コンテンツ・モデル

HTML4では要素はブロック要素とインライン要素に分類されていましたが、HTML5ではメタデータ・コンテンツフロー・コンテンツセクショニング・コンテンツヘッディング・コンテンツフレージング・コンテンツエンベッディッド・コンテンツインタラクティブ・コンテンツと細かくコンテンツ・カテゴリーに分類されています。

また、要素はその内容に含むことができるコンテンツ(内容に含むことができる要素のカテゴリや特定の要素、テキストなど)が決められ、その定義を“コンテンツ・モデル”と呼びます。

ブラウジング・コンテキスト

HTML5では文書が表示されるウィンドウやタブなどのことをブラウジング・コンテキストと呼ぶようになりました。

ほかにも追加、廃止、意味が変更された要素や属性がありますが、詳細はそれぞれの項目を参照してください。

HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク