【初心者入門】HTML5ってそもそも何？HTML4と違う点は？徹底解説！
「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に対応したブラウザを使用しているのでご安心ください。
「独学でのプログラミング学習に苦戦していませんか？」
独学でのプログラミング学習の挫折率は9割以上と言われています。
✔プログラミングを身につけて、年収をUPさせたい
✔ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない
と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします！
完全無料なので、悩む前に今すぐ下のバナーをクリックして資料を読んでみてください！
＼簡単30秒／
下のバナーからLINE友だち追加をして、無料で限定資料をGET！
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を使って簡単に実現できるようになったので、開発を効率的に進めることができます。
「プログラミング学習に苦戦しているあなたへ」
独学でのプログラミング学習の挫折率は9割以上と言われています。
✔プログラミングを身につけて、年収をUPさせたい
✔ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない
と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします！
完全無料なので、悩む前に今すぐ下のバナーをクリックして資料をGETしましょう！
＼簡単30秒／
下のバナーからLINE友だち追加をして、無料で限定資料をGET！
HTML5で使える主要な新規タグを紹介！
HTML4との大まかな違いをお話ししましたが、HTML5はさらに細かくアップデートされています。
ここでは実際にHTML5から使えるようになった新規のタグをみていきましょう。
今回紹介するHTML5の新規タグは以下の5種類です。
「タグとは何？」と思う方は以下の記事を参考にしてみてください。
今回紹介するタグ以外にも、HTML5で使える主要タグやその使い方まで丁寧に紹介されています。
【HTML タグ】タグの使い方を徹底解説 | コピペで動く実行例付き
1. headerタグ
サイト構造のヘッダー部分を表すタグです。
この後紹介するfooterタグもheaderタグと同様、サイト構造を明確にするのに役立っています。
HTML5以前は文章内における文章の構造に関する内容もdivタグに記述していたため、パッと見ではサイト構造が分かりにくいところがありました。
そこでheaderタグなどのサイト構造を示すタグの登場により、HTML5以後では明確なサイト構造のあるユーザビリティの高いサイトが増えました。
<header> <h1>DMM WEBCAMP MEDIA</h1> <nav> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </nav> </header>
headerタグは、headerやfooterタグ以外のフローコンテンツを子要素とします。
2. navタグ
リンクナビゲーションを表すタグです。
主にWebサイト全体のリンクに関わるグローバルナビゲーションや、コンテンツ内の移動を助けるサブナビゲーションに使用します。
<nav> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </nav>
セクショニングコンテンツやフローコンテンツとなる性質を持っています。
3. footerタグ
サイト構造における、フッター部分の表示を助けます。
先ほどのheaderタグ同様、サイト構造を明瞭にしています。
このfooterタグの部分には、会社概要などへのリンクやコピーライトを入れて使用することが多いです。
<footer> <p>copy; 2020 DMM WEBCAMP MEDIA All rights reserved.</p> </footer>
フローコンテンツで使用されて、headerやfooterタグ以外のフローコンテンツを子要素とします。
4. sectionタグ
sectionタグでくくることにより、ひとまとまりのセクションを形成します。
h1~h6までのいずれかの見出しと、それに付随する段落やリストなどを1つのセクションでまとめられます。
<article> <h1>サイト紹介</h1> <section> <p>DMM WEBCAMP MEDIAは、・・・</p> </section> </article>
5. canvasタグ
canvasタグでは、アニメーションの描画をすることができます。
HTML5の特徴の一つでもある、Flashなどのプラグインなしでの動作が可能です。
ただし、canvasタグのみではインタラクティブなコンテンツは作成することができないため、実際の図の描画はJavaScriptなどと組み合わせる必要があります。
cnavasタグはあくまでも図の描画をする場所を生成するので、使いたい方はJavaScriptなどスクリプト言語を学びましょう。
<canvas id="canvas" width="300" height="300"></canvas>
HTML5を使ったサイトの例
HTML5がどういったものかわかったところで、実際のサイトを見てみましょう。
普段使っているサイトでも、HTML5の知識を入れたことによってまた見え方が変わってくるかと思います。
また、各サイトを右クリックで「検証」や「ページソースの表示」をしてみるとソースを確認することができるので、これまでの記事の内容を踏まえてサイトの外側も内側も見てみてください。
無印良品
無印良品もHTML5で作られています。
すっきりとシンプルなデザインのサイトですが、サイトの構成もHTML5らしくすっきりとしています。
cssやjavascriptのコード量も少なく、全体として見やすいソースです。
nhk playart
http://www.nhn-playart.com/index.nhn
動きのあるサイトをHTML5でつくっています。
わかりやすいデザインと、動きの面白さがあるサイトです。
プラグインが必要ないので、ページを表示してすぐにインタラクティブな動きを楽しむことができるのがHTML5を使っているサイトの特徴です。
HTML学習は”HTML5″で間違いなし
いかがでしたか？HTML5についてご理解いただけましたか？
今回の「DMM WEBCAMP MEDIA」でのポイントを以下に整理しました。
- HTML5だけで動画や音声、画像をブラウザに表示できる
- サイト構造が見やすく変化
- JavaScriptと併用して効率的に開発できる
- HTML5以降で使える新しいタグが誕生
HTML5はwebアプリケーションや動画や音声などインタラクティブなコンテンツに対応した新しい規格のHTMLです。
HTML5はさまざまな機能をシンプルかつ効率的に実現することができるにもかかわらず、できることはHTML4よりも格段に多くなっています。
また、ほとんどのブラウザでHTML5は対応しており、HTML5のサイトが主流です。
これからHTMLの学習をする方は、ぜひHTML5を勉強してください！
