各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

: All About ホームページ作成ガイド
西村文宏（ニシムラフミヒロ）; 2001年より、その道のプロ（専門家）が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。; http://allabout.co.jp/gm/gt/1053/

RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です！『にししふぁくとりー』
http://www.nishishi.com/

HTML5の書き方（第1回）～head要素について～

2013/03/14

こんにちは。All About ホームページ作成ガイドの西村文宏です。

前回は「HTML5」の概要を簡単にお話しましたので、今回はもう少し具体的な書き方をご紹介いたします。以下に記した12行のHTMLソースをご覧ください。

ブラウザの描画領域に表示される「本文」は1行しかありませんが、HTML5として成立するHTMLソースです。

<!DOCTYPE html>
<html lang=”ja”>
<head>
   <meta charset=”UTF-8″>
   <title>HTML5サンプル</title>
   <meta name=”description” content=”HTML5のサンプルページです。”>
   <meta name=”keywords”    content=”HTML5,サンプル”>
</head>
<body>
   <p>HTML5で記述しています。</p>
</body>
</html>

HTMLソースのhead要素内（<head>～</head>の中身）には、タイトルや文字コードなど、そのページに関する様々な情報を記述できます。

この部分に関して、従来のHTML・XHTMLと比較すると、HTML5ではいくつかの点が変更（改良）されています。

それらについて、簡単に解説いたします。

◆DOCTYPE宣言が簡単になった

これまでのHTMLやXHTMLでは、先頭に記述する「DOCTYPE宣言」は、以下のような長いものでした。バージョン番号などが含まれています。

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

上記は、HTML4.01 と XHTML1.1 でのDOCTYPE宣言の例です。HTML5では、もっと短くなり、

<!DOCTYPE html>

という、わずか15文字を書けば良いだけになりました。

◆文字コードの記述が簡単になった

meta要素を使うと、そのページで使われている文字コードを明示できます。

省略もできますが、文字化けを防ぐためには書いておく方が良いでしょう。

従来のHTMLでは、例えば下記のように書いていました。（UTF-8の場合）

しかし、HTML5では、もっと短く、

このように記述できるようになりました。
（従来の書き方をそのまま使い続けることもできます。）

もしSHIFT-JISを使う場合は、

大文字・小文字は区別しないので、Shift_JISでもshift-jisでも構いません。

◆スタイルシートやスクリプトで使われる言語名の指定は不要