HTML5とは？メリットとHTML5から追加された新しいタグを紹介！
デザイン・コーディング

HTML5とは？メリットとHTML5から追加された新しいタグを紹介！

Share
このエントリーをはてなブックマークに追加

Webサイト制作に欠かせないHTML。現在W3Cが使用を勧告されたHTML5では、初期に勧告されたHTMLと比べると、使用できる機能が飛躍的に増えました。2014年に利用が勧告されたHTML5ですが、HTML5にバージョンアップするメリットを知らずに古いバージョンを使い続けていらっしゃるかもしれません。
今回は、HTML5の持つ便利な機能やタブについて紹介したいと思います。

HTML5

ハイブリッド型受講を可能に。医療団体に特化した研修管理システム。

https://manaable.com/

manaable（マナブル）は、利用ユーザー数25万人を突破した医療団体向け研修管理システムです。会員や研修から決済・受講・アンケートまで、研修管理に必要な機能を網羅。あらゆる業務の一元管理を可能にしたシステムだからこそ、お客様に合わせた革新的で最適な研修体制をご提供します。

目次

  1. HTML5とは？
    1. HTMLの歴史
  2. HTML5のメリット
    1. ①新しいタグで文章構造が分かりやすくなった
    2. ②インタラクティブなコンテンツが作成できる
    3. ③どんなデバイスでも動画や音声のデータを再生できる
    4. ④レスポンス対応が簡単にできる
    5. ⑤DOCTYPE宣言の記述が簡単にできる
  3. 主要な新規タグを紹介！
    1. headerタグ
    2. navタグ
    3. footerタグ
    4. articleタグ
    5. asideタグ
    6. sectionタグ
    7. figureタグとfigcaptionタグ
    8. hgroupタグ
    9. timeタグ
    10. canvasタグ
    11. audioタグとvideoタグ
  4. HTML5で廃止されたタグ
    1. CSSでも対処できるタグ
    2. 悪影響を持つタグ
    3. 使用頻度が少ないタグ
  5. 「Can I use...」で使用できるプロパティを確認
  6. HTML5に関する資格
  7. まとめ

HTML5とは？

そもそもHTML5とは、2014年に利用が勧告された最新の規格です。2017年に勧告されたHTML5.2が現在の最新バージョンとなっています。1999年にW3Cが勧告したHTML4から約20年の時を経て、様々な機能が追加されました。

HTMLの歴史

1999年にHTML4が開発された後、W3CはHTMLの開発を中止してXHTMLの開発を進めていましたが、厳密な基準化を進めるXHTMLはエンジニアたちには受け入れられませんでした。

XHTMLの開発を進めるW3Cに反対する形で、Opera、Mozilla、Appleなどが独自に「WHATWG」を設立し、次世代のHTML開発が始まりました。W3Cも後にWHATWGの開発方針を受け入れて、W3CのもとでHTML5が誕生したのです。

現在HTML5はWebサイト作成には必須の言語となっており、W3Techsの調査によると、WebサイトにおけるHTML5のシェアは全世界で現在83.8%です。（※2010/8/01時点のデータです。）

HTML5のメリット

ではHTML5のメリットを5つ紹介します。

①新しいタグで文章構造が分かりやすくなった

文書構造を伝える新しいタグ

HTML5以前では意味をブラウザに伝えることができなかったタグが、HTML5から新しく意味を持ったタグとして登場し、ブラウザにとって構造などが理解しやすくなりました。
たとえば、

  1. <div id="header">
  2.     <div id="navi">
  3.         <ul>
  4.             <li>デザイン・コーディング</li>
  5.             <li>セキュリティ</li>
  6.             <li>バックエンド</li>
  7.             <li>CMS</li>
  8.         </ul>
  9.   </div>
  10. </div>

と記述した場合、コードを理解できる人が見れば、これはWebページのヘッダー部分であり、中にはグローバルナビゲーションが含まれているとわかります。なぜならdivタグの要素にidで”header”と”navi”が入っているからです。HTML5以前ではこのような書き方が一般的でした。id属性を見ればどんな意味をもったdivタグなのかが一目で分かるようになっています。

しかし、Webページを表示するGoogleなどのブラウザはどうでしょうか。idは基本的にコードを打った人が任意に作れるものですので、ブラウザはコード上にidで何かが入っていたとしても、それがどんな意味なのかを理解することはできません。

ですので、上記の例では、人が見れば「ヘッダーとグローバルナビゲーションである」とすぐに分かりますが、ブラウザには「divタグがある」としか分からないということになります。

この従来の方法ではブラウザはWebページの構造を正確に理解することができず、Webページの検索結果表示順位を決めるSEOに関する評価付けにおいて、正しく評価できなくなってしまう場合が出てきてしまいます。

では、HTML5からどのようにアップデートされたかというと、新しくheaderタグやnavタグといった構造に関する要素ができました。上のコードの例をHTML5で登場したheaderタグやnavタグを用いると、

  1. <header>
  2.     <nav>
  3.          <ul>
  4.              <li>デザイン・コーディング</li>
  5.              <li>セキュリティ</li>
  6.              <li>バックエンド</li>
  7.              <li>CMS</li>
  8.          </ul>
  9.     </nav>
  10. </header>

このように書き換えることができます。このように新しく構造に関するタグが出てきたため、ブラウザに対して構造や意味をより伝えやすくなりました。

セクショニング要素

他にも「セクショニング要素」と呼ばれる新規のタグが追加されました。セクショニング要素とは、見出し・本文のように文章がまとまった章・節などセクショニング要素にあたります。セクショニング要素も同様に、HTML5登場以前まで伝えることができていなかったページの構成や意味をブラウザに伝えるというメリットがあります。

セクショニング要素で上げられる例としてsectionタグやarticleタグ、asideタグが挙げられます。これらのタグの意味などの詳細は記事の後半にご紹介します。

  1. <article>
  2.     <h2>メインタイトル<h2>
  3.     <h3>小見出し<h3>
  4.     <p>本文<p>
  5. </article>
  6. <article>
  7.     <h2>サイドバータイトル<h2>
  8. </article>

このようにHTMLのタグだけで、検索エンジンがWebサイトの構成をより深く理解できるようになりました。構造を理解しやすいWebサイトは正しく情報が整理されているので、従来の方式でコーディングをするよりも有効なSEO対策になります。

セクショニング要素

②インタラクティブなコンテンツが作成できる

HTML5からはインタラクティブコンテンツが作成できるようになりました。たとえば、後ほど紹介するcanvasタグを使うと、ユーザーのアクションに反応してWeb上に動きをつけることができます。

「クリックに応じて動きをつける」などの特徴を活用してゲームなども作成することができます。例えば下記のサイトでは、スーパーマリオをプレイすることができます。
https://supermarioemulator.com/mario.php

このようにHTML5では、ユーザーのアクションに対してリアクションを示すことができ、インタラクティブなコンテンツを可能にしました。

③どんなデバイスでも動画や音声のデータを再生できる

HTML5の登場以前は、Webサイト上で動画をリンクする際はFlashを埋め込んで利用していました。
この埋め込みコードは複雑なもので、Webサイトにアクセスした端末によってAdobe Flash Playerなどのプラグインが必要とされるなど、ユーザーがWebサイト上の動画を再生する際に手間をかけてしまうというデメリットが存在しました。

しかしHTML5の登場により、新しくvideoタグが導入されたことでより簡単に動画をWebサイトに載せることができるようになっています。

videoタグを使うと、ユーザーがFlashのプラグインを必要とすることなしに動画を再生することが可能です。画像と同じように動画をYouTubeなどからのリンクを挿入するなどして、自由に配置することが可能になりました。

なおこのAdobe Flash Playerは2020年末をもってサービスを終了します。Adobe Flash Playerの終了については別の記事で解説していますので気になる方は是非ご参照ください。

④レスポンス対応が簡単にできる

今日ではWebサイトに、PCではなくスマートフォンで訪れるユーザーが増えています。スマートフォンでの閲覧の割合は、PCでのWebサイトの閲覧と比べると年々増す傾向にあります。
そのため、Webサイトがスマートフォンやタブレット端末など、PC以外の機器に対応しているは重要です。

レスポンシブ対応が簡単にできるようになったHTML5では、PCやスマートフォンなどの様々な画面の大きさに関係なく、アクセスされた端末に最適化したサイズで表示する処理が可能になりました。

1つのHTMLに対して、デバイスごとにCSSを用意することで、どんなデバイスでも使いやすくしたWebサイトをレスポンシブWebデザインと言います。
さらに、GoogleはこのレスポンシブWebデザインを推奨しているので、HTML5の利用はSEO対策にもつながります。

⑤DOCTYPE宣言の記述が簡単にできる

HTML5からDOCTYPE宣言の書き方が大きく変わり、簡単になりました。DOCTYPE宣言とは文書がHTMLやXHTMLのどのバージョンで作成されたものだと宣言するためのものです。
HTML5以前、DOCTYPE宣言は以下のように公開識別子やDTDのURLを記述する必要がありました。

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

しかし、HTML5の登場によって、以下のようなシンプルな記述へと変更されました。

  1. <!DOCTYPE html>

このDOCTYPE宣言における大文字と小文字の区別はありません。

主要な新規タグを紹介！

HTML5では多くの新規タグが追加され、またいくつかの要素が廃止されました。
その中でもHTML5の特徴ともいえる代表的なタグを紹介していきます。

headerタグ

ヘッダー部分を表すタグです。上の例でも書いた通り、HTML5以前は、文章そのものの構成に関する内容も、文書内における文章の構造に関する内容もdivタグに記述していましたが、HTML5以後はWebサイトの上部に表示されるロゴ画像やページタイトル、ナビゲーションメニューを記述するheaderタグの登場によって文書構造が明確になりました。
headerタグは、headerやfooterタグ以外のフローコンテンツを子要素とします。

  1. <header>
  2.     <h1>itracafe</h1>
  3.     <nav>
  4.         <ul>
  5.             <li>menu1</li>
  6.             <li>menu2</li>
  7.             <li>menu3</li>
  8.         </ul>
  9.     </nav>
  10. </header>

navタグ

リンクナビゲーションを表します。主にWebサイト全体のリンクに関わるグローバルナビゲーションや、コンテンツ内の移動を助けるサブナビゲーションに使用します。
セクショニングコンテンツやフローコンテンツとなる性質を持っています。

  1. <nav>
  2.     <ul>
  3.         <li>menu1</li>
  4.         <li>menu2</li>
  5.         <li>menu3</li>
  6.     </ul>
  7. </nav>

footerタグ

フッター部分の表示に使います。たとえば会社概要などへのリンクやコピーライトを入れて使用します。

フローコンテンツで使用されて、headerやfooterタグ以外のフローコンテンツを子要素とします。

  1. <footer>
  2.     <p>copy; 20XX ITRA CO.,LTD.</p>
  3. </footer>

articleタグ

ブログ記事のような、独立したコンテンツを表します。ページごとのメインコンテンツのセクションを表すために使用します。

単に文章の段落を明確にするために用いられるsectionタグと混合してしまうことも多いです。その範囲だけで独立したページを作れる部分にはarticleタグを使用して文章構造を分かりやすくするようにしましょう。

  1. <article>
  2.     <h1>会社概要</h1>
  3.     <section>
  4.         <p>itracafeは、・・・</p>
  5.     </section>
  6. </article>

asideタグ

メインコンテンツに関する補足情報を含んだセクションを表すタグです。

ページの中で、メインコンテンツとの関連性は低い補足を付け加える際に用います。たとえば記事の中に用いた専門用語の説明や広告などのバナー群を囲います。 

  1. <aside>
  2.     <h1>CSS3</h1>
  3.     <p>CSS3とは、・・・</p>
  4. </aside>

sectionタグ

ひとまとまりのセクションを形成します。h1~h6までのいずれかの見出しと、それに付随する段落やリストなどを1つのセクションでまとめます。

章・節・項を区切るために用いるタグで、上記のaside、article、navタグに該当しない箇所に用いられます。 

  1. <section>
  2.     <h1>itracafeの歴史</h1>
  3.     <p>itracafeは、・・・</p>
  4. </section>

figureタグとfigcaptionタグ

イメージやビデオなどの組み込みコンテンツと、それらに対するキャプションをグループ化するために使用します。

figureタグは、全要素の大部分を占めるフローコンテンツの性質を持ち、他のフローコンテンツや次に説明するfigcaptionタグなどを子要素とすることができます。

figcaptionタグは、figureタグの子要素となる性質を持ち、フローコンテンツを内包することができます。

  1. <figure>
  2.     <img src="icecoffee.jpg alt="アイスコーヒー">
  3.     <figcaption>アイスコーヒー</figcaption>
  4. </figure>

hgroupタグ

見出しをグループ化するために使用します。<hgroup>～</hgroup>の中に含まれるh1~h6までの見出しが、関係性のある見出しであると認識されます。

ヘディングコンテンツとなる性質を持っており、h1～h6をそれぞれ子要素とすることができます。

  1. <hgroup>
  2.     <h1>会社概要</h1>
  3.     <h2>itracafeの歴史</h2>
  4. </hgroup>

timeタグ

日付や時刻を指定する際に用います。24時間表記、新暦のグレゴリオ暦における正確な日付を表します。

日時を目に見えるように記述するdatetime属性はWebサイトの更新日時を表示します。
たとえば更新日時が信ぴょう性にかかわるニュースなどの記事の日にちや時間表示として使われることが多いです。

  1. <p>生年月日：<time datetime="1985-02-01">1985年2月1日</time></p>

canvasタグ

プラグインなしに、図の描画をする際に用います。ただし、実際の図の描画はJavaScriptなどと組み合わせる必要があるので、canvasタグのみではインタラクティブなコンテンツは作成することができません。cnavasタグはあくまでも図の描画をする場所を生成するので、興味がある方はJavaScriptなども学びましょう。

  1. <canvas id="canvas" width="300" height="300"></canvas>

audioタグとvideoタグ

プラグインなしでオーディオファイルやビデオファイルを再生するために使用します。コンテンツを操作するためのAPIも用意されています。APIとは、何かの機能に特化したプログラムで、共有可能なものやソフトウェアの機能を共有する仕組みです。

再生に使うファイルをしていするsourceタグや、動画の字幕やキャプションを指定するtrackタグを子要素とすることができます。

audioタグ

  1. <audio src=”message.aac” controls=”controls”>
  2.   <p>ご利用のブラウザでは再生できません。</p>
  3. </audio>

videoタグ

  1. <video src=”message.mp4” controls=”controls”>
  2.   <p>ご利用のブラウザでは再生できません。</p>
  3. </video>

HTML5で廃止されたタグ

HTML5ではいくつかのタグが廃止されました。廃止された理由は以下の3パターンに分けられます。

CSSでも対処できるタグ

HTMLでありながら、見た目を表すタグもあります。その中でも見た目しか表さないタグはCSSでも包括できる機能であるとされ、廃止の対象となりました。

廃止となったタグは以下の7つです。

basefront, big, center, font, strike, tt, u

悪影響を持つタグ

悪影響を持つタグだとわかったフレームは、ユーザビリティやアクセシビリティに悪影響を及ぼすとみなされました。そのために、フレームに関連するタグが廃止となりました。

廃止となったタグは以下の3つです。

frame, frameset, noframes

使用頻度が少ないタグ

これまでHTMLの使用に含まれてはいたものの、実際のWeb制作の現場であまり使われないタグもありました。HTML5ではあまり使用されていなかったタグも廃止対象となりました。

廃止となったタグは以下の4つです。

acronym, applet, isindex,dir

「Can I use...」で使用できるプロパティを確認

HTML5は常に進化をしていて新たなタグがどんどん加わってきています。しかし、ブラウザによって新しいタグは非対応になっている場合があり、使用する際には注意が必要です。

これから使用するタグが指定のブラウザに対応しているかどうかは、「Can I use...」で確認することができます。

確認方法

では実際に「Can I use...」で使用したいタグが指定のブラウザに対応しているかどうか確認しましょう。下記画像は「Can I use...」でHTMLのvideoタグについて検索した画面にです。

スクリーンショット 2020-08-06 13.02.25 (1)_1600x638

また、CSSのプロパティである「Gradients」(グラデーション)で検索した結果が下記画像のようになります。

スクリーンショット 2020-08-06 10.39.46 (1)_1600x845

検索結果の画面中央部に対応するブラウザの一覧が表示され、どのブラウザのどのバージョンに対応しているかが一目でわかります。またバージョンが対応しているかどうかの有無は色によって表記されています。

スクリーンショット 2020-08-03 13.29.13_422x400

  • 緑色＝サポート
  • 赤色＝非対応
  • 黄緑＝一部サポート
  • 灰色＝不明

HTML5に関する資格

HTML5プロフェッショナル認定

HTML5プロフェッショナル認定とは特定非営利活動法人エルピーアイジャパン（LPI-Japan）が運営する認定制度です。HTML5プロフェッショナル認定ではHTML5だけでなくCSS3、JavaScriptなど最新のマークアップに関する技術力と知識を試すことができます。この認定試験は前提として知識がメインの試験ではなく、技術がベースとなっています。そのため実際の現場で必要とされる能力を証明できるため、転職をする際に企業側に即戦力として活躍できることをアピールできます。

HTML5プロフェッショナル認定には2つのレベルがあります。Level.1の出題分野ははマルチデバイスに対応したWebコンテンツ制作の基礎、Level.2の出題分野はシステム間連携や最新のマルチメディア技術に対応したWebアプリケーションや動的Webコンテンツの開発・設計となっています。試験概要は以下の表にありますのでご確認ください。

Level1 Level2
所要時間 90分 90分
問題数 60問 40~45問
受験料 15000円 15000円
出題範囲 Level1 Level2
有効期限 5年 5年

試験概要｜Web資格なら「HTML5プロフェッショナル認定試験」公式サイト

まとめ

今回はHTMLの最新規格であるHTML5のメリットや新しく追加されたタグについて紹介しました。HTML5にバージョンアップすれば、Webサイト制作の作業が簡単になるだけでなくSEO対策にもなり、またコーディングもわかりやすくシンプルになります。
HTML5で新しく出てきたタグを使いこなせていない方は挑戦してみてはいかがでしょうか。

WebmediaではHTML5に関する記事の他にも、プログラミングの疑問にお応えする情報を発信しています。ぜひ他の記事もご覧ください。

Webサイトの制作にあたり、知識や時間、人手不足で困ったことはありませんか？
Webmediaを運営するITRAはシステム設計からプログラミング、デザインに至るまで、高品質なWebサイトを制作しています。フォームからのご相談も承っております。ぜひお気軽にお問い合わせください。

Share
このエントリーをはてなブックマークに追加

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。