プログラミング初心者が、勉強をしはじめた時によく耳にするHTML。そのなかでも、「HTML5とは何か?」と疑問を持つ人も多いことでしょう。HTMLは長い歴史を重ね、ユーザーの期待と要望に応える形でHTML5にたどり着きました。この記事では、HTML5とは何か?について、プログラミング初心者にも分かりやすく解説します!

ウェブトレの人
htmlの使い方はジニオくん分かるよね??

ジニ男
もちろんです!セミナーも毎回参加させていただいてますからね!

ウェブトレの人
良かった良かった。
受けてるけどちゃんと理解できてるかなと思って。笑



 

HTML5とは何?

HTML5とは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、ウェブサイトを構築するためのマークアップ言語です。通常CSS(カスケーディング・スタイルシート)とともに使用されます。HTMLは、ウェブサイト全体の構造を構築するのに使用されますが、CSSは個々のページのレイアウトや文字の大きさなど指定します。

 

HTMLは、日進月歩で進化しており、つねにバージョンアップを繰り返してきました。HTML5とは、そのバージョン数を示しています。

 

HTMLについて、もっと詳しく知りたい方には、こちらの記事がおすすめです。

 

HTML5の歴史

HTMLは、1989年にスイスのジュネーブにある欧州原子核研究機構で開発されて以来、改良をかさねバージョンアップしてきました。

 

日本では欧州原子核研究機構といって、ヨーロッパの国々が出資して作り出した世界最大の素粒子物理学研究機関です。(引用:HTMLって何!?用途から歴史まで徹底解剖』|ウェブトレ+ https://webtre-plus.com/archives/1016

 

HTML5の前身であるHTML4は、199912月に開発されてから15年ものあいだ世界のウェブ制作を支えてきました。しかし、2014年にW3Cの勧告が発表され、次世代バージョンであるHTML5への移行が決まりました。

 

とはいえ、HTML5へ完全に移行するのには、まだ時間がかかると言われています。

 

HTML4との違いは?

HTML5は、以前のバージョンであるHTML4と比べると、いくつかの変更点があります。具体的には、幾つかの新しい要素が追加されました。さらには、それらの要素のおかげでよりシンプルなコーディングが可能になりました。以下では、バージョンアップ後の変更点を詳しくご紹介します。

 

必要なくなった要素が廃止された

廃止された要素は、以下のとおりです。(※アルファベット順)

 A

<acronym>

<applet>

B

<basefont>

<bgsound>

<big>

<blink>

C

<center>

D

<dir>

F

<font>

<frame>

<frameset>         

I

<isindex>

M

<marquee>

N

<nobr>

<noembed>

<noframes>

R

<rb>

S

<strike>

T

<tt>

 

新たに必要な要素が追加された

新たに追加された要素は、以下のとおりです。(※アルファベット順) 

A

<article>

<aside>

<audio>

B

<bdi>

C

<canvas>

<command>

D

<datalist>

<details>

E

<embed>

F

<figcaption>

<figure>

<footer>

H

<header>

<hgroup>

K

<keygen>

M

<mark>

<meter>

N

<nav>

O

<output>

P

<progress>

R

<rp>

<rt>

<ruby>

S

<section>

<source>

<summary>

T

<time>

<track>

V

<video>

W

<wbr>

 

これらの新しい要素の追加にともなって、新しい属性も追加されましたが、ここでは言及しません。

 

文書構造がより簡潔に

(参考:HTML 4との違い、HTML5で可能になること』|HTMLクイックリファレンス http://www.htmq.com/HTML5/002.shtml

今までは、<div>で示すことが多かった内容も、HTML5では新しい要素が追加されたおかげで、より簡潔に書けるようになりました。ユーザーが見やすく、ブラウザや検索エンジンにも分かりやすい文書構造に変化したようです。

 

動画や音声データが扱いやすくなった

 これまで、動画や音声データをHTMLに組み込む際には、Flashなどのプラグインを使用する必要がありました。Flashは扱いにくい問題点があり、画像のように<img>タグで組み込むことはできませんでした。HTML5では、新たに<video>や<audio>の要素が追加されたことで、画像のように簡単に動画や音声データを組み込めるようになっています。

 

CSSとスクリプト言語の記述がなくなった

 HTML4までは、メタタグで指定していたCSSとスクリプト言語の記述は、HTML5では不要になりました。これらは、HTML5ではデフォルト設定になりました。

 

ウェブアプリケーションの構築が楽になった

新たなAPIの追加によって、HTML5では高度な機能が使いやすくなっています。APIとは、Application Programming Interfaceの略で、アプリケーション開発をする際の、プログラミング上のルールの事です。

 

新たなAPIで定められた命令を実行したり関数を指定したりすれば、今までは不可能だったドラッグ&ドロップ機能を組み込むことも可能です。さらに、ウェブアプリケーションのオフライン使用やユーザー位置情報の取得も簡単にできるようになってしまいました。

 

プログラミング初心者は、HTML5を学ぼう!

今回は、プログラミング初心者にも分かりやすいように、HTML4からの主な変更点や、HTML5とは?について、シンプルにまとめました。これから、HTMLを勉強しようとする方は、是非HTML4からの変更点を把握したうえで、より便利で使いやすくなったHTML5をしっかりと学びましょう!

ウェブトレプラスでもHP制作体験セミナーと称して、htmlの基礎を学べるセミナーを開催しております。
ぜひ興味ある方は、こちらからご参加ください。

プログラミングスキル習得を目指す方必見!!

挫折者が多いプログラミング学習。
最適な環境、最適な手順、最適な学習方法で学ぶことで、
スキル習得まで最短で到達することが可能に!


LINE@追加キャンペーン

LINE@追加で、プログラミング学習の攻略本をプレゼント!

おすすめの記事