【初心者入門】HTML5ってそもそも何?HTML4と違う点は?徹底解説! | WEBCAMP NAVI
【2月の受講枠も残りわずか】

【初心者入門】HTML5ってそもそも何?HTML4と違う点は?徹底解説!

html href

「HTML5とHTML4では何が違うの?そもそもHTMLとは?」
「HTML5の特徴、使えるタグが知りたい!」

そんな風に考えていませんか?

今回の「WEBCAMP BAVI」では、プログラミング学習者のために「HTML5」について分かりやすくまとめました。
この記事では以下のことを取り扱っています。

  • HTML5の特徴、できることについて
  • HTML”4″との違いは?
  • HTML5で使えるタグ
  • HTML5を使用したサイト例

また、HTML5の前に「そもそも、HTMLってなに?」という方もいるかと思います。
そんな方はHTMLの基本的知識や役割についてまとまっている以下の記事を参考にしてみてください。


【初心者向け】HTMLとは?たった6つのステップで身につくプログラミング学習

そもそもHTML5とは?

HTML5とはwebアプリケーションに対応しやすいHTMLの規格のことです。
HTML4の次に発表されました。

HTML5の特徴は以下の通りです。

  • 音声や動画、画像のブラウザ上の描画ができるようになった
  • JavaScriptを用いるだけで位置情報などの機能が容易にできる
  • フォーム周りの機能が強化されている
  • タッチスクリーンに対応している

特に注目すべき点は、動画や音声などの要素が簡単にウェブページに組み込める点です。
そのほかアニメーションを表示させるためには、今までは主にAdobeの「Flash」といった外部ソフトを使っていましたが、HTML5にはアニメーションを作る機能も用意されています。

かつて「Flash」は、アニメーション機能やインタラクティブ性など動的コンテンツを提供する技術として絶大な人気を誇っていました。
しかしそのセキュリティの脆弱性や新しい規格(HTML5)の登場により、今現在その利用者は大幅に減少。
ついにFlashを開発提供していたAdobeはFlashの2020年末での終了を宣言しました。

自分のブラウザがHTML5に対応しているか心配になるかと思いますが、多くの場合は対応していると思われます。
Google Chrome・Safari・Microsoft Edge・Mozillaの各種ブラウザはFlashからHTML5への移行を完了させており、最新版にアップデートをしていれば、HTML5に対応したブラウザを使用しているのでご安心ください。


国内最大級のプログラミングスクール【DMM WEBCAMP】
手厚いキャリアサポートと高品質の学習カリキュラムで驚異の転職成功率98%!
あなたも、IT業界で輝くエンジニアになりませんか?
本気で人生を変えたい方は、ぜひ無料カウンセリングへ!

\参加者満足度99%
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

HTML5でできることは?

全章で紹介したHTML5の特徴をここではさらに具体的にみていきます。
ここでしっかりとHTML5の概要をを掴みましょう。

動画や音声を組み込むためのタグがある

HTML5では動画や音声を組み込むための専用の要素があります。
その要素を使うことで、これまではjavascriptやphpなど、さまざまなプログラムやアプリケーションを介して行われていた処理を簡単に使うことが可能です。

スマートフォンでも同じように使うことができるので、閲覧している機器ごとに対策をする必要もなく、シンプルかつ効率的な開発ができます。

アニメーションが制作できる

HTML5には、「HTML5 Canvas」というアニメーションを作成するための機能も用意されています。
これまではflashやjavaなどで行われていたアニメーションを、何のプラグインもインストールすることなく描画することが可能です。

まずはHTMLで「canvasタグ」を使い、図を描画するための場所を提供します。
その提供された場所に、JavaScriptを使用して図画やアニメーションを描くようにプログラムすればアニメーションを制作できます。

webアプリケーションと連携しやすい

HTML5ではwebアプリケーションとデータ連携しやすい仕組みが多く用意されています。
サーバサイドとデータのやり取りをしやすいため、システム開発を効率的に進めていくことが可能です。

ここでもJavaScriptなどのスクリプト言語を習得することで、webアプリケーションの実装ができるようになります。


プログラミング言語についてさらに知りたい方はこの記事が参考になるかと思います。

プログラミング言語一覧 プログラミング言語一覧紹介!難易度や人気ごとにランキングで解説

HTML4とはどう違う?

今ではほとんどのサイトで使われているHTML5。
それではHTML4との違いは一体何なのか、ざっくりとみていきましょう。

すっきりと見やすい構造

HTML5とHTML4でプログラムの構造を比較すると、必要とされる記述がHTML5の方が随分少なくなっており、記述がスッキリとしています。

例えばHTMLのdoctype宣言の場合、HTML4だとdoctypeの文字から始まって長々とURLなどの情報を記述する必要がありました。
それがHTML5の場合、<!DOCTYPE html>と記述するだけでおしまいです。

HTML5を用いることでプログラムの構造自体のまざまな冗長さを省き、記述しやすく・見やすい構造になっています。

javaScriptの併用だけで高度な機能がつくれる

HTML4ではphpなどのサーバサイドプログラムを使わないと実現できなかった機能も、HTML5ではJavaScriptとの併用だけで実現できるようになりました。

ドラッグアンドドロップでデータをコピーしたり、移動させたりといったことも、HTML5のタグとJavaScriptの処理だけで完結できます。
さらにデータをサーバサイドに送って何かしらの処理を行うことも可能です。

以前はプログラムを書かなくてはいけないかった処理も、HTML5ではタグとJavaScriptを使って簡単に実現できるようになったので、開発を効率的に進めることができます

HTML5で使える主要な新規タグを紹介!

HTML4との大まかな違いをお話ししましたが、HTML5はさらに細かくアップデートされています。
ここでは実際にHTML5から使えるようになった新規のタグをみていきましょう。

今回紹介するHTML5の新規タグは以下の5種類です。


「タグとは何?」と思う方は以下の記事を参考にしてみてください。
今回紹介するタグ以外にも、HTML5で使える主要タグやその使い方まで丁寧に紹介されています。

【HTML タグ】タグの使い方を徹底解説 | コピペで動く実行例付き

サイト構造のヘッダー部分を表すタグです。
この後紹介するfooterタグもheaderタグと同様、サイト構造を明確にするのに役立っています

HTML5以前は文章内における文章の構造に関する内容もdivタグに記述していたため、パッと見ではサイト構造が分かりにくいところがありました。
そこでheaderタグなどのサイト構造を示すタグの登場により、HTML5以後では明確なサイト構造のあるユーザビリティの高いサイトが増えました。

HTML
<header>
    <h1>WEBCAMP NAVI</h1>
    <nav>
        <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
        </ul>
    </nav>
</header>

headerタグは、headerやfooterタグ以外のフローコンテンツを子要素とします。

リンクナビゲーションを表すタグです。
主にWebサイト全体のリンクに関わるグローバルナビゲーションや、コンテンツ内の移動を助けるサブナビゲーションに使用します。

HTML
<nav>
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
    </ul>
</nav>

セクショニングコンテンツやフローコンテンツとなる性質を持っています。

サイト構造における、フッター部分の表示を助けます。
先ほどのheaderタグ同様、サイト構造を明瞭にしています。

このfooterタグの部分には、会社概要などへのリンクやコピーライトを入れて使用することが多いです。

HTML
<footer>
  <p>copy; 2020 WEBCAMP NAVI All rights reserved.</p>
</footer>

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

4. sectionタグ

sectionタグでくくることにより、ひとまとまりのセクションを形成します。

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

HTML
<article>
    <h1>サイト紹介</h1>
    <section>
        <p>WEBCAMP NAVIは、・・・</p>
    </section>
</article>

5. canvasタグ

canvasタグでは、アニメーションの描画をすることができます
HTML5の特徴の一つでもある、Flashなどのプラグインなしでの動作が可能です。

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

HTML
<canvas id="canvas" width="300" height="300"></canvas>

HTML5を使ったサイトの例

HTML5がどういったものかわかったところで、実際のサイトを見てみましょう。
普段使っているサイトでも、HTML5の知識を入れたことによってまた見え方が変わってくるかと思います。

また、各サイトを右クリックで「検証」や「ページソースの表示」をしてみるとソースを確認することができるので、これまでの記事の内容を踏まえてサイトの外側も内側も見てみてください。

無印良品

https://www.muji.net/store/

無印良品もHTML5で作られています。
すっきりとシンプルなデザインのサイトですが、サイトの構成もHTML5らしくすっきりとしています。
cssやjavascriptのコード量も少なく、全体として見やすいソースです。

nhk playart

http://www.nhn-playart.com/index.nhn

動きのあるサイトをHTML5でつくっています。
わかりやすいデザインと、動きの面白さがあるサイトです。
プラグインが必要ないので、ページを表示してすぐにインタラクティブな動きを楽しむことができるのがHTML5を使っているサイトの特徴です。


転職成功率98%の【DMM WEBCAMP】で需要の高まるITエンジニアに転職しよう!
フルタイムのコミット型学習と手厚いキャリアサポート!
万が一転職できない場合は、全額返金の転職保証付き!
条件を満たすことで最大56万円のキャッシュバックも受けられます。
まずはお気軽に無料カウンセリングへ!

\参加者満足度99%!/
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

HTML学習は”HTML5″で間違いなし

いかがでしたか?HTML5についてご理解いただけましたか?

今回の「WEBCAMP NAVI」でのポイントを以下に整理しました。

  • HTML5だけで動画や音声、画像をブラウザに表示できる
  • サイト構造が見やすく変化
  • JavaScriptと併用して効率的に開発できる
  • HTML5以降で使える新しいタグが誕生

HTML5はwebアプリケーションや動画や音声などインタラクティブなコンテンツに対応した新しい規格のHTMLです。
HTML5はさまざまな機能をシンプルかつ効率的に実現することができるにもかかわらず、できることはHTML4よりも格段に多くなっています。

また、ほとんどのブラウザでHTML5は対応しており、HTML5のサイトが主流です。
これからHTMLの学習をする方は、ぜひHTML5を勉強してください!

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点