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

HTML5とは?

HTMLタグ辞書
HTML5について

HTML

そもそもHTMLとは?

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

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

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

以下は適切に“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の5回目、15年ぶりの大幅な改定版で、ウェブページやウェブアプリケーションを構築する際に使用されるHTML技術仕様の標準規格のことです。W3Cによって検討・標準化が進められてきました。

W3C(World Wide Web Consortium)”は“World Wide Web”で使用される各種技術の標準化を推進する為に設立された団体でHTML、XML、MathML、DOM等の標準規格を策定しています。

HTML5はWHATWGによって検討されていたウェブアプリケーションの技術仕様であるWeb Applications 1.0とHTMLのフォーム要素を発展させた技術仕様のWeb Forms 2.0がもとになっています。

WHATWG(Web Hypertext Application Technology Working Group)”はHTMLよりもXMLの標準化を優先するW3Cの方針やウェブ制作者のニーズに対する軽視に不満を持ったApple、Mozilla、Operaによって2004年に、独自に次世代HTMLの在り方を検討するために立ち上げられた団体です。

2007年にW3CはHTMLの改定を目的としたワーキンググループを立ち上げ、そこでWHATWGが策定してきた技術仕様をHTML5のベースとして採用しました。これ以降W3CとWHATWGは協力してHTML5の技術仕様を策定するようになり、2014年10月28日にHTML5は勧告されました。

W3Cによって仕様が完全に決まるまでに“作業草稿”、“勧告候補”、“勧告案”、“勧告”の4段階があり、仕様が完全に決まって公式に発表される規格文書そのもの、もしくはその規格文書を発表すること“勧告”と言います。

HTML5その後

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

W3CとWHATWGの共同作業によって策定されたHTML5ですが、その後WHATWGはW3Cとの方針の相違からHTML5を“HTML Living Standard”と名前を変え独自に仕様書を策定していくようになりました。MicrosoftのInternet ExplorerはW3Cの仕様に沿って、GoogleのChrome、MozillaのFirefox、AppleのSafariはWHATWGの仕様に沿って開発されているような状態になっており、2つの標準が併存している状態となります。

W3CによるHTML5とWHATWGによるHTML Living Standardの間で大きな違いはないですが、細部では異なる部分があります。また、W3CによるHTML5は段階的に“完成”した仕様を策定するのを目指しているのに対してWHATWGによるHTML Living Standardは日々少しずつ、継続的に更新されているという違いもあります。

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

いままでの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
はてなブックマーク