コラム【WEB編】 HTML5とは- Xux Webzine【クスクスウェブマガジン】Webデザイン参考ギャラリー

ＨＴＭＬ５の廃止

ＨＴＭＬ５は２０２１年の１月に廃止されています。

現在はＨＴＭＬ　Ｌｉｖｉｎｇ　Ｓｔａｎｄａｒｄというものに変わっています。

ＨＴＭＬ５とＨＴＭＬ　Ｌｉｖｉｎｇ　Ｓｔａｎｄａｒｄの違い

基本的なＨＴＭＬを書く上では大きな違いはありません。

ＨＴＭＬファイルはこれまで通り　＜！ＤＯＣＴＹＰＥ　ｈｔｍｌ＞　で始まりますし、＜ｉｍｇ＞や＜ｖｉｄｅｏ＞でマルチメディアも扱えます。

ＨＴＭＬ５の最終版であるＨＴＭＬ５．２からＨＴＭＬ　Ｌｉｖｉｎｇ　ｓｔａｎｄａｒｄに変わってから要素や属性が新たに追加、変更、廃止されました。

しかし、一部のタグの扱いが変わっただけで大きな違いはありません。

ＨＴＭＬ　Ｌｉｖｉｎｇ　Ｓｔａｎｄａｒｄは日々更新されるので詳しく知りたい方は是非調べてみてください。

ＨＴＭＬ　Ｌｉｖｉｎｇ　Ｓｔａｎｄａｒｄの仕様はかなり読みやすくレイアウトされてます。

廃止はされていますが、ＨＴＭＬ５の知識は必要となる部分もありますので、ここでご紹介させていただきます。

ＨＴＭＬとは？

ＨＴＭＬ５のご説明の前に、まずＨＴＭＬとは何かをご説明します。

ＨＴＭＬとは「ハイパーテキスト・マークアップ・ランゲージ（Ｈｙｐｅｒ　Ｔｅｘｔ　Ｍａｒｋｕｐ　Ｌａｎｇｕａｇｅ）」のことで、ＷＥＢページを作成するための言語となります。

「マークアップ」とは文章の構成や、文章の役割を示すという意味の言葉です。例えば、見出しや段落・表・リンクなど、文章が構成されている要素がどのような役割を持っているかを指示しています。ＨＴＭＬの記述によって、検索エンジンがＷＥＢページの構造を把握しやすくなります。

よって、ほとんどのＷＥＢページはＨＴＭＬとＣＳＳという言語でその見た目が作られています。

基本的には、ＷＥＢページに書かれている文字がＨＴＭＬであると考えても大丈夫です。

文字は普通のテキストだけでなく、「見出し」にしたり、「太文字」や「文字の色」を変更して強調したり、「下線」を入れて装飾したりすることもあります。

こういったテキストの表現は、ＨＴＭＬの指示によって表示されるように記述されています。

ＨＴＭＬでページを構成し、ＣＳＳで装飾をする形となります。

ＨＴＭＬのタグとは？

「タグ」なんなのでしょうか？
一言でいうと、「タグ」とは「文字（テキスト）に意味を与えてあげる印のようなもの」です。

パソコンにわかる言語でパソコンに指示をだすようなイメージです。

また、文字列などをタグで囲んだ情報の単位の事を「要素」と言います。「タグ」と「要素」はＨＴＭＬでよく使用されますので、意味を理解しておくと良いでしょう。

下の例のように、文字をタグで囲うと、ただの文字がｈ１（見出し）やｐ（段落）といった意味を持つようになります。

※最後のタグ（終了タグという）には「／」が入ることに注意してください。閉じ忘れなどがあると、表示が崩れる原因になります。

このＨＴＭＬの構造でＳＥＯも変わってきたりするので、基本的な事を学び、ＨＴＭＬを記述する必要があります。

ざっくりとＨＴＭＬをご説明させていただきまして、これからが本題です。

ＨＴＭＬ５とは？

ＨＴＭＬ５とは、２０１４年にＨＴＭＬのバージョン５として勧告されたものです。前のバージョンにあたる「ＨＴＭＬ４．０１」の勧告から１５年ぶりに改定されました。

現在、Ｗ３ＣによりＨＴＭＬ５がＷＥＢの標準となっています。

ＨＴＭＬ５の大きな特徴は、ＨＴＭＬ４やＸＨＴＭＬ１．０に比べてかなりコードが簡略化され、全体的にスッキリとした構造になっています。そして、今まで難しかった動画・音声の使用やグラフィックの描画が、ＨＴＭＬ５の新要素によって容易に実装できるようになり、Ｗｅｂの表現の幅が広がりました。

ＨＴＭＬ５が発表された当時はＨＴＭＬ５に対応していないブラウザ（Ｉｎｔｅｒｎｅｔ　Ｅｘｐｌｏｒｅｒ　８）を使用していた方がまだ多かったため、ＨＴＭＬ５でＷｅｂサイトを構築するケースは多くありませんでしたが、最新版のＩＥ１１を除く旧バージョンのＩＥがサポート終了になったことや、ＧｏｏｇｌｅＣｈｒｏｍｅを使用するユーザーも増えてきたことによって、Ｗｅｂサイトを構築する際にＨＴＭＬ５を用いるケースが増えてきました。

ＨＴＭＬ５で出来ること

①今まで複雑だった事が簡単に出来るようになった

・動画や音声、グラフィックの描画が可能になった
・音声が使いやすい
・グラフの描写などが可能となった
・フォーム周りの機能が強化されている
など

②綺麗なＨＴＭＬが書ける

・長かった記述をすっきり書ける
・要素の定義の見直しや追加が行われている
・文章構造化がより強化
など

ＨＴＭＬ５の特徴

ＨＴＭＬ５は以前のバージョンに比べ、圧倒的に書きやすく、より詳細な役割を持たせることができるようになり、ブラウザの互換性も向上しています。

さらに、Ｆｌａｓｈという技術に頼らなければならなかった動画や、グラフィックなどもＨＴＭＬ５を使うことで簡単に記述することができるようになっています。

また、ＨＴＭＬ５になることでアプリケーションの開発もすることができるようになりました。

ＨＴＭＬ５は、インターネット環境のない、オフラインの状態でも使用することができるのです。

さらに、スマートフォンやタブレットなどの端末に対応するためのレスポンシブ対応をＨＴＭＬ５を使うことで簡単に対応できるようになっています。

大きな特徴として「ＤＯＣＴＹＰＥ宣言」も簡単に書くことができるようになっています。

ＨＴＭＬでは、１行目に「この言語を記述します。」という趣旨の「ＤＯＣＴＹＰＥ宣言」というものを記述しなければなりません。ＨＴＭＬ５以前は、開発者が暗記することが出来ないほど長い記述でしたが、ＨＴＭＬ５からは非常に簡単な書き方をすることができるようになりました。

ＨＴＭＬ５の使用方法

ＨＴＭＬ５を使うには、上記でご説明した「タグ」というものを学ぶことが必要になります。

例えば、下記画像のようにまず、「ＤＯＣＴＹＰＥ宣言」というものを記述し
＜＞で囲われている箇所が「タグ」と呼ばれるものです。　例えば、下記画像のように　＜＞で囲われている箇所が「タグ」と呼ばれるものです。

＜ｐ＞テキスト＜ｐ＞と書かれている場合、ブラウザでは「テキスト」と文字が表示されます。　

ＨＴＭＬ５から追加されたタグ

ＨＴＭＬ５になって追加されたタグを一覧でご紹介します。

タグ	役割
<article>	記事であることを示します。
<aside>	余談であることを示します。
<audio>	音声を再生します。
<canvas>	図形を描きます。
<command>	操作メニューの各コマンドを指定します。
<datalist>	入力候補となるデータリストを定義します。
<details>	備考や操作手段などの詳細情報を示します。
<embed>	プラグインデータを埋め込みます。
<figcaption>	図表のキャプションを示します。
<figure>	図表であることを示します。
<footer>	フッターであることを示します。
<header>	へッダーあることを示します。
<hgroup>	セクションの見出しを表します。
<keygen>	フォーム送信時にキーを発行します。
<mark>	文書内の該当テキストを目立たせます。
<menu>	操作メニューを作成します。
<meter>	規定範囲内の測定値を表します。
<nav>	ナビゲーションであることを示します。
<output>	計算結果を示します。
<progress>	タスク完了までの進行状況を示します。
<section>	1つのまとまったセクションであることを示します。
<source>	動画や音声などのURLや種類を指定します。
<summary>	<details>の内容の要約を示します。
<time>	日付や時刻を正確に示します。
<video>	動画を再生します。
<rp>	ルビ（ふりがな）を囲む記号を指定します。
<rt>	ルビ（ふりがな）のテキストを指定します。
<ruby>	ルビ（ふりがな）をふります。
<wbr>	改行しても良い位置を示します。

ＨＴＭＬ５から使えなくなったタグ

こちらは、ＨＴＭＬ５から使えなくなったタグです。

タグ	役割
<acronym>	略語（頭字語）であることを表します。
<applet>	Javaアプレットを埋め込みます。
<basefont>	テキストの基準サイズ・基準色・基準フォントを指定します。
<bgsound>	効果音・BGMを再生します。
<big>	テキストのサイズを大きく表示します。
<blink>	文字を点滅させます。
<center>	センタリングします。
<dir>	リストを表示します。
<font>	フォントの種類・大きさ・色を指定します。
<frame>	フレームに表示します。ファイルを指定します。
<frameset>	ウィンドウを分割します。
<isindex>	検索キーワードの入力欄を作ります。
<marquee>	文字をスクロールさせます。
<nobr>	改行されないようにします。
<noembed>	embedタグが利用できない場合の代用コンテンツを示します。
<noframes>	framesタグが表示できない場合の代用コンテンツを示します。
<strike>	打ち消し線を引きます。
<tt>	等幅フォントで表示します。