Web制作について勉強していると、HTML5という言葉を聞くことも多いでしょう。しかし、HTML5とは一体なんなのか疑問に思ったことはありませんか？
HTML5は、HTMLのバージョンの1つで、従来のHTMLにはなかった特徴がたくさんあります。
この記事では、HTML5とは何か、従来のHTMLと変わった点、学習方法などを解説しています。
※2021年1月28日にHTML5の名称は廃止され、現在の公式は「HTML Living Standard」に統一されています。ちなみに、公式サイトによると「HTML Living Standard」は「Is this HTML5？」という質問に対して「Yes」という回答をされています。
このように Living Standard は HTML5 とほぼ同じとされていますが、一部タグの扱い方などに違いがあるので、ご注意下さい。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
最終更新日：2021年8月10日
目次
HTML5とは、HTMLの5つ目のバージョンです。HTML5では、コードが整理され、よりシンプルですっきりと書けるようになりました。
コードがすっきりすると、ページが軽くなるためより速いコンテンツの表示が可能になります。また、人間にとって読みやすいコードになる点もメリットです。
さらに、ショッピングサイトで配送先情報を入力するようなフォームの設置や、Webページ上での動画再生などがHTML4より簡単にできるようになりました。
また、HTML5では、レスポンシブなページを作りやすくなりました。レスポンシブとは、PCやスマホ、タブレットなど異なる端末に対して、どの端末からページを閲覧しているのかを判断し、端末に合わせたページを表示する機能のこと。
端末によってURLを変える必要がないので、ユーザーの利便性も高まります。詳細については、次の項目で解説します。
HTML5と、それまで使われていたHTML4はバージョンが違うため、対応しているブラウザが違います。
現在では、Google Chrome、Mozilla Firefox、Microsoft Edge、Safarなどメジャーなブラウザの最新バージョンはほぼHTML5に対応しています。最新のブラウザ対応状況は、https://caniuse.com/から確認できます。
HTML5とHTML4の内容の違いについては次の通りです。
HTML5では、ファイルがHTMLファイルであることや、そのバージョンをブラウザに伝えるDoctype宣言と呼ばれる部分の記述がシンプルになりました。
シンプルになった理由は、文字のエンコードやリンクタイプを宣言する部分から、不要な指定の省略が行われたことです。
一例を挙げると、以下のように変わりました。
HTML4
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
HTML5
<meta charset="utf-8">
ここでは、ファイルタイプの宣言が不要になり、文字コードのみの指定となっています。
これだけでも、HTML5がいかにシンプルに変わったかが実感できるでしょう。
HTMLタグは、開始と終了のタグをセットで使う場合がほとんどですが、一部のタグでは次のタグを前のタグの終了と自動的に判定できるようになりました。
記述が減らせる分、コードがすっきり見えます。終了タグ不要なHTMLタグの種類は以下の13種類です。
| <li> | リスト項目を示す |
|---|---|
| <dt> | 定義する言葉を示す |
| <dd> | 定義の内容を示す |
| <p> | 段落を示す |
| <tr> | 表の行部分を示す |
| <td> | 表のセルを示す |
| <th> | 表の見出しやタイトルを示す |
| <rt> | ルビテキストを示す |
| <rp> | ルビ非対応の場合、ルビを囲む記号を示す |
| <optgroup> | 選択肢をグループ化する |
| <option> | メニューの選択肢を示す |
| <thread> | 表の行をヘッダとしてグループ化する |
| <tfoot> | 表の行をグループ化する |
HTML4までは、CSSに加えてHTMLでも見栄えを整えることがありました。
例えば、<font>タグを使って文字の大きさや色を指定したり、<center>タグを使って文字をセンタリングしたりといった事例がそれにあたります。
HTML5では、こうした見栄えに関する属性の使用が非推奨となりました。CSSとの棲み分けを行い、見栄えに関してままとめてCSSに記述するよう推奨されています。
HTML5から追加された要素として、構造化タグがあります。HTML4までは、<div>タグを利用して構造上のかたまりを示していました。
<div>タグでは、その構造が何を示すか指定できせんでしたが、HTML5では文章であることを示す<section>や補足情報であることを示す<aside>などのタグが使用可能になり、より細かく文章の構造をコンピューターに伝えることが可能になりました。
HTML5では、29件の新しいタグが追加され、フォームの入力補助やチェック機能の充実、動画や音声を簡単に扱えるなどの技術が実現されています。
一方で、24件のタグが廃止（使用非推奨）となりました。
詳細については、次の項目で説明します。
ここでは、HTMLで追加されたタグと廃止されたタグについて、それぞれ一覧で紹介します。
| <article> | 独立した記事であることを示す |
|---|---|
| <aside> | 補足情報であることを示す |
| <audio> | 音声情報であることを示す |
| <canvas> | 図形を描く |
| <command> | 操作コマンドを指定する |
| <datalist> | フォームの入力候補を表示する |
| <details> | 要素を折りたたむ |
| <embed> | 音声や動画などを埋め込む |
| <figcaption> | 図表のキャプションを示す |
| <figure> | 自己完結するコンテンツを示す |
| <footer> | フッタであることを示す |
| <header> | ヘッダであることを示す |
| <hgroup> | 見出し要素をまとめる |
| <keygen> | 暗号鍵を発行する |
| <mark> | 目立たせる場所を示す |
| <menu> | 操作メニューを示す |
| <meter> | 特定範囲内での割合や数量を示す |
| <nav> | ナビゲーションであることを示す |
| <output> | ユーザーによる操作の結果を示す |
| <progress> | プログレスバーで進捗状況を示す |
| <section> | 章や節などのセクションであることを示す |
| <source> | 埋め込む動画や音声ファイルを複数指定する |
| <summary> | 項目の要約や説明文であることを示す |
| <time> | 日付や時刻を示す |
| <video> | 動画ファイルを埋め込む |
| <rb> | 文字にルビを振る |
| <rt> | ルビテキストを示す |
| <ruby> | ルビを振る対象を示す |
| <wbr> | 改行しても良い場所を示す |
| <acronym> | 略語であることを示す |
|---|---|
| <applet> | Javaアプレットを挿入する |
| <basefont> | フォントの色や種類、大きさの基準を指定する |
| <bgsound> | ページを開いたときに音楽を自動再生する |
| <big> | 大きなサイズのテキストを表示する |
| <blink> | 文字を点滅させる |
| <center> | 中央揃えにする |
| <dir> | リストを表示する |
| <font> | 文字の大きさや色を指定する |
| <frame> | フレーム内のファイルと表示方法を指定する |
| <frameset> | ウィンドウをどのように分割するかを指定する |
| <isindex> | 検索用のボックスを表示する |
| <listing> | ソースコードを全てテキストで表示する |
| <marquee> | 文字をスクロールさせる |
| <nobr> | 改行させない |
| <noembed> | プラグイン利用不可時の代替テキストを指定する |
| <noframes> | フレーム表示不可時の代替テキストを指定する |
| <plaintext> | ソースコードを全てテキストで表示する |
| <rb> | ルビを振る文字を指定する |
| <spacer> | スペースを挿入する |
| <strike> | 打ち消し線を引く文字を指定する |
| <tt> | 等幅フォントで表示する |
| <u> | アンダーラインを表示する |
| <xmp> | ソースコードをそのまま表示する |
これからHTMLを学ぶのであれば、すっきりと書きやすく流行のレスポンシブにも対応しやすいHTML5がおすすめです。
これから、HTML5対応のブラウザはさらに増え、主流となっていくことが予想されます。HTMLに限らず、技術を学ぶときには、常に新しい知識から学習すると良いでしょう。
HTMLはマークアップ言語であり、正確にはプログラミング言語ではありません。プログラミング言語に比べると難易度は低く、習得しやすいでしょう。
初心者向けのプログラミング言語学習サービスであるドットインストールでは、「ウェブサイトを作れるようになろう」というコースの中でHTMLの解説をしている回が40回であるのに対して、「Rubyでウェブサービスを作れるようになろう」というコースは全部で90回の講座が用意されています。
1回あたりの動画の長さにそれほど差がないことを考えると、HTMLがプログラミング言語に比べて習得しやすいことがわかります。
さらに、HTML5は従来のHTMLと比べて簡単にレスポンシブなページを作成することができるようになりました。
従来、レスポンシブデザインを作成するのには比較的高いスキルが必要でしたが、その点もハードルが下がったと言えるでしょう。
HTML5は、学習サイトを利用すれば無料で学ぶことも可能です。ここでは、HTML5が無料で学習できるサイトをご紹介します。
■ Udemy
有料のオンライン学習講座を販売しているUdemyですが、一部の講座は無料で受講可能です。HTML5は『Webページを作成しよう！これから始める「HTML超入門」』で学習できます。
▸ Udemy
■ ドットインストール
HTML／CSSの基本が無料で学べるほか、無料公開されている動画の中に、いくつかHTML5の講座があります。基礎の基礎からHTMLについて学びたい人におすすめです。
▸ ドットインストール
■ CODEPREP
プログラムを書いて動かしながら学べる実践型のサイトです。「HTML入門 HTML5編」が無料公開されていて、ブログレイアウトの表現から、図表、フォーム、メディア再生までを実践できます。
▸ CODEPREP
HTML5をしっかり学習したいけれど、独学ではなかなか難しい、わからないところがあって行き詰まってしまったという方は、スクールを利用するのもおすすめです。
無料のプログラミングスクールである「プログラマカレッジ」では、HTMLを座学の講義でしっかり学ぶことができます。
さらに、独学より効率よく学べるのもスクールのメリット。
ITエンジニアを目指してHTMLを学習している方は、プログラマカレッジをのぞいてみてはいかがでしょうか。
■ Apple
AppleのWebサイトはHTML5で構築されています。
トップページでは、ブロック状に商品を紹介。各ブロックにHTML5で追加となった<section>タグや<figure>タグが使用されています。
■ ローソン
出典：https://www.lawson.co.jp/index.html
ローソンの公式サイトもHTML5で構築されています。ページの上下には<header><footer>のタグが使われるとともに、本文には独立した記事であることを示す<article>タグが使用されています。
■ コカ・コーラ
出典：https://www.cocacola.co.jp/
コカ・コーラのWebサイトでは、HTML5で追加された要素である<article>タグが使用されているほか、Doctype宣言部分には<meta charset="UTF-8">と記載されています。
HTML5のスキルを証明できる試験として、HTML5プロフェッショナル認定試験があります。レベル1とレベル2の2段階に分かれていて、レベル1ではHTMLやCSSを中心とした知識が、レベル2ではJavaScriptの知識が問われます。
HTMLを学習してスキルが付いてきたと感じたら、挑戦してみても良いでしょう。
以下の記事では、HTML5プロフェッショナル認定試験の勉強方法とおすすめ書籍について紹介しています。
HTML5は従来よりシンプルなコードでWebサイトを作成できる言語です。これからHTMLを学習するなら、HTML5がおすすめ。
HTMLで追加になったタグもあれば、廃止になったタグもあります。そうした新しい要素に注意しながら、学習を進めていきましょう。実力をチェックするには、資格試験を利用してみるのも良いのではないでしょうか。
INTERNOUS,inc. All rights reserved.
