【保存版】プログラミング初心者でも分る!HTML5とは?

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

目次

HTML5とは何?

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

 

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

 

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

https://webtre-plus.com/archives/1933

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の基礎を学べるセミナーを開催しております。
ぜひ興味ある方は、こちらからご参加ください。

「プログラミング未経験から
収益化までの7ステップ」
無料配布中!

こんなお悩みありませんか?

  • プログラミング似興味があるけど何からやったらい良いのか分からない
  • 未経験から収益化出来るのかが不安だ
  • 本業以外にも収入の柱を構築したい
  • パソコンを使った副業がしたい
  • プログラミングに挫折したけどもう1回チャレンジしたい
  • プログラミングの勉強をしているけど収益化が出来ていない

挫折率の高いプログラミング学習において、挫折することなく収益化を目指すなら、
挫折してしまう原因や、収益化のためのポイントを押さえて学習を進めていく必要があります。
そのポイントを7つのステップとして具体的に動画で解説!

動画トピックス
  • IT業界の現状
  • プログラミングに挫折する3つの壁
    (◯◯の壁 / ◯◯の壁 / ◯◯の壁)
  • 未経験から収益化までの7ステップ
    (準備編 / 学習編 / 収益化編)
よかったらシェアしてね!

この記事を書いた人

目次
閉じる