＜初心者向け＞知っておきたいHTML5の基本【文書構造編】

2016.11.07

WEB

Webデザイン

レスポンシブWebデザインをはじめとするWebサイトのマルチデバイス対応の増加などに伴い、HTML5でのWebサイト構築が現在主流となっています。
今までHTML4やXHTML1.0で構築してきた人の中には「HTML5って難しそう」「今までのHTMLとはどう違うの？」と思っている方も多いのではないでしょうか？
変更された点は多々ありますが、基本をおさえていれば誰でもHTML5でWebサイトを構築することが可能です。
今回はHTML5の特徴や文書構造など、基本的なところを説明していきたいと思います。

INDEX

HTML5とは？
HTML5の基本的な文書構造
HTML5で追加、廃止された要素
さいごに

HTML5とは？

まずはHTML5とはどういうものなのか、簡単に説明いたします。

HTML5とは、2014年にHTMLのバージョン5として勧告されたものです。前のバージョンにあたる「HTML4.01」の勧告から15年ぶりに改定されました。
HTML5の大きな特徴は、HTML4やXHTML1.0に比べてかなりコードが簡略化され、全体的にスッキリとした構造になっています。そして、今まで難しかった動画・音声の使用やグラフィックの描画が、HTML5の新要素によって容易に実装できるようになり、Webの表現の幅が広がりました。

HTML5が発表された当時はHTML5に対応していないブラウザ（Internet Explorer 8）を使用していたユーザーがまだ多かったため、HTML5でWebサイトを構築するケースは多くありませんでしたが、最新版のIE11を除く旧バージョンのIEがサポート終了になったことや、GoogleChromeを使用するユーザーも増えてきたことによって、Webサイトを構築する際にHTML5を用いるケースが増えてきました。

HTML5の基本的な文書構造

それでは、HTML4、XHTML1.0とHTML5の基本的な文書構造を比較してみましょう。
まずは、HTML4とXHTML1.0の文書構造を例に挙げてみます。

▼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">
<title>ページタイトル</title>
</head>
<body>

コンテンツ

</body>
</html>

▼XHTML1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" 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" />
<title>ページタイトル</title>
</head>
<body>

コンテンツ

</body>
</html>

次にHTML5の文書構造を例に挙げてみます。

▼HTML5

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
</head>
<body>

コンテンツ

</body>
</html>

いかがでしょうか？HTML4やXHTML1.0と比べてだいぶスッキリとした印象になりました。
それでは、主な違いの説明をします。

DOCTYPE宣言

▼XHTML1.0

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

▼HTML5

<!DOCTYPE html>

HTML文書の冒頭部分に記述するのが「DOCTYPE宣言」です。この記述によってその文書がどのHTML、XHTMLで作成されたものかを宣言します。HTML5ではコードがシンプルに短くなりました。

HTML要素

▼XHTML1.0

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

▼HTML5

<html lang="ja">

＜html＞タグは、その文書がHTMLであることを示します。html要素には言語を指定することができ、日本語の場合は「lang=”jp”」、英語の場合は「lang=”en”」を指定します。XHTMLではxmlns属性が必要でしたが、HTML5では不要になりました。

文字エンコーディング指定

▼HTML4、XHTML1.0

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

▼HTML5

<meta charset="utf-8">

文書の文字コードを指定します。HTML5ではutf-8推奨になります。

スタイルシートとスクリプト言語の指定

▼HTML4、XHTML1.0

<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">

▼HTML5

HTML5ではデフォルトになりますので記述が不要になります。

HTML5で追加、廃止された要素

HTML５では、新しく追加された要素がありますが、逆に廃止された要素もあります。
構築の際には注意が必要です。

追加された要素

<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>