HTML5とは（入門編）

ここでは、HTML5の特徴などを入門編としてご紹介します。

中級者の方は復習として、初心者の方へ教える時などのために、参考にしていただけるといいかと思います。

HTML5とは
HTML5の特徴
HTML5とHTML4の基本的な構造の違い
HTML5とは（入門編）まとめ
1. HTMLでおすすめの本
2. Web系スクールについて

HTML5とは

HTMLとはHyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略で、Webページの内容を表示させるための言語になります。 HTML5はそのHTMLの5回目の改訂版になります。

HTML5では動画や音声データを扱えるようになり、これまでFlashなどのプラグイン、JavascriptやPHPのプログラムを介して表示させていたのに対し、HTML5のタグのみで簡単に表示させることができるようになりました。

HTML5の特徴

HTML5では、<header>、<footer>、<nav>などその要素が何のコンテンツかをわかりやすく示すタグが追加されHTML4より記述しやすく見た目もすっきりさせられるようになりました。

HTML5の記述で一番最初に違いがわかるのは下記かと思います。
HTML4ではW3のURLの記述までしていましたが、HTML5ではシンプルになりました。

HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5

<!DOCTYPE html>

また、<video>タグを使い、動画や音声データをhtml内で簡単に扱えるようになりました。
これによりデバイスを気にせずに動画や音声データを表示させることが可能になり、よりリッチなWebページを簡単に構築できるようになりコスト削減を可能にしています。

HTML5では、アプリケーションも作成でいるようになり、ハイブリッドアプリと呼ばれています。
メリットは、ユーザーがアプリをインストールすることなく使えることができ、運営側の更新を簡単に行うことができます。
また、iPhoneとAndroidとのプラットフォーム間の違いを意識せずアプリ開発を行うことができます。
デメリットは、ユーザーがネット環境に接続し、常にアクセスした状態でなければなりません。

HTML5とHTML4の基本的な構造の違い

HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<meta name="keywords" content="">
<meta name="description" content="" />
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/javascript.js"></script>
<title>ページタイトル</title>
</head>
<body>
 <div class="header"></div>
  <div class="wrapper"></div>
 <div class="footer"></div>
</body>
</html>

HTML5

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <link href="style/style.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="js/javascript.js"></script>
 <meta name="keywords" content="">
 <meta name="description" content="" />
 <title>ページタイトル</title>
</head>
<body>
 <header></header>
  <main></main>
 <footer></footer>
</body>
</html>

HTML5ではだいぶすっきりとした印象を受けますね。

また、追加されたタグと廃止されたタグは以下になります。

追加されたタグ

<article>
<aside>
<audio>
<bdi>
<canvas>
<command>
<datalist>
<details>
<embed>
<figcaption>
<figure>
<footer>
<header><hgroup>
<keygen>
<mark>
<meter>
<nav>
<output>
<progress>
<rp
<rt>
<ruby>
<section>
<source>
<summary>
<time>
<track>
<video>
<wbr>

廃止されたタグ

<acronym>
<applet>
<basefont>
<bgsound>
<big>
<blink>
<center>
<dir>
<font>
<frame>
<frameset>
<isindex>
<marquee>
<nobr>
<noembed>
<noframes>
<rb>
<strike>
<tt>

追加されたタグの中でもよく使うタグなどが出てくると思います、使い方を調べルールに従って使いましょう。