HTML Living standard

HTML Living standard

HTML Living standardについて

HTMLは、HTML1.0に始まり、成長してきました。
HTML2.0、HTML3.0、HTML3.2、HTML4.0、HTML4.01を経て、HTML5となっています。

 

実は、HTML4.0の後に、21世紀にはいってからXHTML1.0というものが作られました。
2000年半ばからは、XHTMLが主流となって、新規のサイト(Webページ)はXHTMLで作られるようになっていきました。

 

XHTMLはは機械がより解釈しやすいように厳密さを増した形のものとなっていましたが、次世代のHTMLとしてHTML5が認知されるようになります。
すると2009年にはXHTML1.0のバージョンアップ版のXHTML2.0は策定の停止が発表され、ますますシンプルで書きやすいHTML5に注目が集まっていくことになり、多くのブラウザもHTML5に対応するようになってきています。

 

Safari、Internet Explorer、chrome、Firefox、Opera、Edge、iOS safari、Androidブラウザーといった具合に、現在ではほとんどのブラウザの最新バージョンががHTML5対応となってきていて、既にHTML5が主流になっています。

 

HTML5は、前バージョンであるHTML4.01の文法はもちろん、XHTMLの文法も利用できる仕様になっていますので、XHTML5と呼ばれることもあります。
HTML5になっても基本文法は変わっていません。

 

HTML Living standardは、HTML5の最終版「HTML5.2」から、一部要素や属性が新しく追加・変更・廃止されています。

 

しかし、基本的な要素や属性の扱いは、HTML5と同じでまったく変わりありません。
つまり、HTML Living StandardとHTML5は、一部のタグの扱いが違うだけで大きな違いはありません。

HTML Living Standardが目指しているものとは

HTML4.01、またはXHTMLからHTML Living Standardに変わるということは、それだけの目指しているものがあるのですが、HTML5になって変わってくることについてまとめてみます。

 

煩雑さをなくし、より書きやすく

THMLの記載は、HTML5でより簡単な形になりました。
その良い例が、DOCTYPEの宣言文です。

 

DOCTYPEの宣言文とは、このサイト(Webページ)が、どのバージョンのHTMLを使って書かれているHTML文書なのかということを、一番最初に宣言するものです。
逆に言うと、HTMLファイルの冒頭に記載されているDOCTYPE宣言文をみれば、このHTML文書がHTML4.01で記載されたものなのか、HTML5で作られたものなのか、どのバージョンのHTMLで記載されているのかがわかるようになっています。

 

このDOCTYPE宣言文をみてみると、次のように違ってきます。

HTML4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

HTML4.01 Transional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

XHTML1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

XHTML1.0 Transional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

HTML5
<!DOCTYPE html>

このように、HTML5は、DOCTYPE宣言をとってみても、記載がすごく簡素化されているのがわかるかと思います。

 

CSSとの役割分担を明確に

HTML4.01までは、HTMLには書式を設定するための要素や属性がありましたが、HTML5でその多くが廃止になりました。
つまり意味を伝えない見た目だけの修飾に関しては、構造を構築するHTMLではなくてCSSの役割ということになっています。

 

逆にいうと、HTML5は、HTMLをいじらずにCSSだけでデザインやレイアウト、文字の修飾を変えることができるようになりました。

 

例えば、

<b>本日は晴天なり。</b>

これは、HTML4.01までだと、開始タグ <b> と終了タグ </b> で挟まれた「本日は晴天なり。」という文字を太字にするということでしたが、HTML5.0では、レビュー記事の中にある製品名など特別なテキストといった意味づけのものに使われます。
「本日は晴天なり。」を赤文字にした場合は、
HTML4.01までは、

<span style="color:#FF0A0A">本日は晴天なり。</span>

となります。

 

しかしHTML5.0では、HTML5には文字の色や大きさを変えたり、太字にしたり斜体にしたり下線を引いたりといった文字修飾はCSSに任せるという役割分担になっています。従って、HTMLは次のようになります。

<span class="red ">本日は晴天なり。</span>

そして、CSSのほうで、

.red{ color: #FF0A0A!important; }/*赤*/

といった感じで、red というクラスで指定した文字の color は、カラーコード#FF0A0A つまり赤色にするということでルールづけします。
このように文字修飾、文字のセンタリングなどは、文字の色を赤色にするような形で、CSSのほうでルールづけしていくことになります。

 

構造や意味をプログラムに伝えやすい構造になっている

 

HTML5.0は、構造や意味をプログラムに伝えやすい構造になっています。
特に以前と大きく変わったところは、新要素でセマンティクスが強化されているところです。

 

セマンティクスとは、データの意味をプログラムに伝えやすくするもので、HTML5.0では、7つのシマンティクス関係の要素が追加されていて、ホームページのレイアウトの中で、どういった位置づけの場所なのかということがわかりやすくなっています。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

要素

 

意味・役割

 

header

 

ページヘッダーを表します

 

nav

 

主要なナビゲーションを表します

 

main

 

そのWebページのメインコンテンツを表します

 

aside

 

そのWebページの補足的コンテンツを表します

 

footer

 

ページフッターを表します

 

section

 

文書のアウトラインを構成するセクションを表します

 

article

 

単独で利用可能となる記事を表します

 

 

HTML4.01までのdiv要素とHTML5.0の新要素

HTML4.01までで、class名はそのサイトの中でしか通用しないので、ネットではすべて同じ div要素 として認識されてしまいます。

サイト作成1

 

HTML5.0、HTML Living Standardの場合は、header とか nav とかきちんとしたセマンティクス関係の要素名になっているので、検索エンジンなどのプログラムにもしっかりと意味が伝わります。つまり、この部分はサイトのページのメインコンテンツにあたる部分だなとか、この部分は補足的コンテンツとして記載されている部分だなということがわかるようになっているということです。

サイト作成1

 

現在、Googleをはじめとする検索エンジンやSNSは、サイト(Webページ)の内容を読み取って分類して情報を見せる処理をプログラムで行っていますが、HTML5.0であれば、サイドバーの広告ではなく、きちんと main となっている部分がメインコンテンツなんだと誤解することなく認識してくれます。
つまり、HTML5.0、HTML Living Standardは、よりサイト(Webページ)の内容を正確に伝えることができることになります。

 

コンテンツの内容がよりわかりやすく

画像要素を表す img要素 の他に、動画要素を表す video要素 、音声要素を表す audio要素 などがあり、サイト(Webページ)の中で、この部分は画像、この部分は動画、この部分は音声といったことが明確にわかりやすい構造になっています。