HTML5とは？特徴から追加されたタグまでわかりやすく解説！

WEBに関わっていると、HTML5と言う単語をよく目にしたり耳にしたりします。
「あれ、そういえばよく聞くHTML5って何のことなんだろう？」
そんな方に向けて、今回はHTML5についてわかりやすく解説していきます。

HTMLとは

HTML5を解説する前に、まずはHTMLについて知っておく必要があります。
HTMLとは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略語で、
WEBサイトの基本となるマークアップ言語です。

マークアップ言語というのは、文章に役割を持たせてあげる言語です。
例えば、文章に「見出しタグ」を設定してあげることで、見出しとして役割を発揮するのです。

なぜマークアップが必要なのかというと、
コンピューターは人が指示したことを忠実に表現することしかできないからです。
マークアップを適切な方法で実装することで、コンピューターにタイトルや見出し、箇条書きなどの役割を伝えることができます。

HTMLは、1994年に設立されたW3C（World Wide Web Consortium）という非営利団体が技術の品質管理をし、標準化を行っています。

HTML5とは

HTML5とはHTMLのバージョン5のことです。
HTMLには様々なバージョンが存在し、
1993年に最初のHTMLが登場して以来、数十年の時を経てHTMLの進化した姿がHTML5です。

現在、W3CによりHTML5がWEBの標準となっています。
WEB開発をする際は、特別な理由がない限りはHTML5を使って開発を進めても問題はないでしょう。

HTML5の特徴

HTML5は以前のバージョンに比べ、
圧倒的に書きやすく、より詳細な役割を持たせることができるようになり、
ブラウザの互換性も向上しています。
さらに、Flashという技術に頼らなければならなかった動画や、グラフィックなどもHTML5を使うことで簡単に記述することができるようになっています。

また、HTML5になることでアプリケーションの開発もすることができるようになりました。
HTML5は、インターネット環境のない、オフラインの状態でも使用することができるのです。
さらに、スマートフォンやタブレットなどの端末に対応するためのレスポンシブ対応をHTML5を使うことで簡単に対応できるようになっています。

大きな特徴として「DOCTYPE宣言」も簡単に書くことができるようになっています。
HTMLでは、1行目に「この言語を記述します。」という趣旨の「DOCTYPE宣言」というものを記述しなければなりません。HTML5以前は、開発者が暗記することが出来ないほど長い記述でしたが、HTML5からは非常に簡単な書き方をすることができるようになりました。

WEBサイトのソースを開いたときにという記述があった場合、HTML5を使って開発されていることがわかります。

例：HTML4のDOCTYPE宣言

例：HTML5のDOCTYPE宣言

HTML5の使い方

HTML5を使うには、「タグ」というものを学ぶことが必要になります。

例えば、下記画像のように
<>で囲われている箇所が「タグ」と呼ばれるものです。 例えば、下記画像のように <>で囲われている箇所が「タグ」と呼ばれるものです。

それぞれのタグには意味とルールが存在します。
文章に最適なタグをルールに基づいて記述することで、HTML5を使うことができます。
昨今では、HTMLをタグの意味に基づいて記述されたHTMLのことを「セマンティックHTML」と呼ばれています。

html5から追加されたタグ

HTML5になって追加されたタグを一覧で紹介します。

タグ	役割
<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>	改行しても良い位置を示します。

html5から廃止されたタグ

HTML5になって削除されたタグを一覧で紹介します。

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

まとめ

HTML5は、文章に役割を持たせてあげるマークアップ言語で、
HTMLのバージョン5のことです。

動画やグラフィックなどFlashに頼っていたコンテンツも、
HTML5で表現することができるようになりました。

HTML5を書くには、「タグ」を学ぶことが必要です。
タグには意味とルールが存在し、
文章に最適なタグをルールに沿って記述することが重要です。

プログラミング言語に比べると、学習のハードルも低いため、
WEBに関わるために身に着けておくと良いでしょう。

また「対応方法が分からない」「自分でやるのは難しい」とお悩みの方には
実装も可能なジオコードのSEOがおすすめです！