[3] !DOCTYPE宣言をしよう
最終更新日：2019年03月22日 （初回投稿日：2010年09月14日）
前回の [2] タイトル（title要素）を設定しよう では、<title> <head> <body> を追加して、だんだん HTML文書らしくなってきました。
今回はさらに「文書型宣言」を追加しましょう。
| 使用する記述 | <!DOCTYPE html> |
|---|
HTMLの文書型宣言をしよう
<!DOCTYPE 〜 >で始まる「文書型宣言（document type declaration）」は、W3Cによって推奨されています。
W3C (World Wide Web Consortium) とは
WWW (World Wide Web) で利用される技術の標準化を促進する団体。企業・学術団体・個人が集まって1994年に発足。
それ以前は各ブラウザのメーカーがそれぞれ独自に「仕様」を決めていたので「あのブラウザでは見れるのに、このブラウザじゃ見れない...」といったユーザの不利益が生まれました。そんな状態を打開するために設立されたのが W3C。
各ブラウザは W3Cの仕様に従っています。ですので 書く方も W3C推奨の書き方をするんです。
WHATWG (Web Hypertext Application Technology Working Group) もあります
同じくWeb上の技術の仕様を作る団体で、実際にブラウザを作る側（Apple、Mozilla、Opera）の有志が集まって2004年に発足。W3Cの仕様が現場に合ってないという憂慮があったからとか。
もともと HTML5 は WHATWG が2004年から検討してきたもので、W3Cがこれを採用し、双方の共同作業で標準化したんだそうです。
というわけで、べつに敵対してるわけじゃないけど、今は W3C と WHATWG のダブルスタンダードになっているのが現状。両者で異なる仕様ができたり、若干ややこしいこともあります（ルビ関連の仕様とか）
<!DOCTYPE>によって、そのHTML文書が「HTMLのどのバージョンのルールで書かれているのか」が宣言され、ブラウザがそのルールに従った表示をします。
ですので <!DOCTYPE>は、HTMLファイルの最上部に書く必要があります。
HTML4 → XHTML1.0 → XHTML1.1 → HTML5 → HTML5.1 → 最新は HTML5.2 です（2017年11月勧告）
HTML4、XHTML1.0、XHTML1.1は、SGMLの流れを継承していたので、DTD（Document Type Definition：W3Cによる HTML文書のマークアップ規則を定めた文書型定義）を書かなきゃいけなくて <!DOCTYPE> はすっごく長いコードでした。
HTML5からは、HTML文書の標準モードを有効にするためだけの役目になり、簡単になりました。
それでは前回保存したファイルを開いて、<!DOCTYPE>を書いてみましょう。
<!DOCTYPE html>と書きます。<html>より上、最上段に書きますよ。
<!DOCTYPE html>
<html>
<head>
<title>タイトルをつけてみた！</title>
</head>
<body>
本日は晴天なり〜！
</body>
</html>
これでこのHTML文書は「HTML5 のルールに従って記述されている」と宣言されました。
あと2つ必要な要素を
あと2つ、今のうちに書いておきたいものがあります。
「lang属性」で「言語コード」を
まず1つめ、html要素に「言語コード」を書きましょう。
<html> タグのhtmlのすぐ後に半角スペースをつけてから lang="ja" とタイプします。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトルをつけてみた！</title>
</head>
<body>
本日は晴天なり〜！
</body>
</html>
これは「lang属性」といいます。
「lang」は「language」の略。ランゲージ。言語のことね。
「属性」とは、HTML要素と一緒に使って機能をUPする指定のことです。
lang属性以外にもけっこういっぱいあります。興味のある方は [39] 全要素に使える「HTML5グローバル属性」を見てみよう もご覧ください。
「ja」は日本語という意味。「このHTML文書で使用している言語は日本語」と宣言する事で、ブラウザの表示・検索エンジン・音声読み上げソフト等の役に立ちます。（アクセシビリティが向上します）
ちなみに、英語はen、スペイン語はes、ドイツ語はde、韓国語はko、中国語はzhだそうです。
<meta>要素で「文字エンコーディング」の指定を
2つめは、head要素の中に「文字エンコーディングの指定」をします。
<head>と</head>の間の、<title>の上に <meta charset="UTF-8"> と書きましょう。
HTML5からは 文字エンコーディングに UTF-8を使用することが推奨されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトルをつけてみた！</title>
</head>
<body>
本日は晴天なり〜！
</body>
</html>
タイトルが文字化けしないように、<title>より先に記述します。
「サイトの本文はまともなのに、タイトルだけ文字化けしちゃうんだよねー」という時の原因は、ほぼコレ（ <title> の下に <meta charset="UTF-8"> を書いてる）です。
文字エンコーディングは「UTF-8」のほかに、「Shift_JIS」「ISO-8859-1」「US-ASCII」「ISO-2022-JP」「EUC-JP」などがあります。
<meta>要素ってのが出てきましたが、これは今はまだ深追いしないほうがいいです。話がややこしくなるから。どうしても知りたいというかたは、[45-1] metaで基本情報を指定しよう をチラ見してみてください。
上記まで出来たら、ファイルを保存しておいてください。
（今回のはプレビューしても前回と変わりません）
HTML5の新要素を IE8以下で表示させるオープンソース
以降は Microsoft のブラウザ「Internet Explorer 8」やそれ以下のバージョンにも HTML5 を表示させたい場合のネタです。
この古いブラウザを対象にしない場合は、以下は読み飛ばしてください。
HTML5では、それまで使ってきた要素（ HTML4 や XHTML1 のときからある要素）に加えて、新しい要素が誕生しています。
で、当然この新要素は、IE8以下では未対応です。IE8は2009年リリースだし。
ですが、html5shiv というオープンソースがあり、JavaScriptを使って IE8以下に HTML5の新要素（<article> とか <section> とか）を「これは要素だ」と認識させます。
（なので ユーザが JavaScriptをオフにしてたら何にもならないんですけどね..）
あと、これは HTML5の新要素を「要素として認識」させるだけで、プログレスバーとか HTML5 の新機能を IE8以下 でも使えるようにするもんじゃありません。
新要素を要素として認識しなけりゃレイアウトが崩れるので、単にそれを避けるための処置ですね。
この html5shiv 、以前は Google主催の Google Code で提供されていました。
下記のコードを見たことがある方もいると思います。
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
（注意★このコードはもう使えません）
が、2016年1月に Google Code は終了して 上記のコードはもう使えません。
終了の理由は、スパムなどの悪用が増えて、開発者が GitHub などの他のオープンソースコミュニティー流れていったことらしいです。Google自体も、かなりの数のオープンソースプロジェクトを GitHub に移行したらしい。
どうしても IE8 で HTML5の新要素を表示したい という場合には、 GitHub に上がっている html5shiv のソースをダウンロードして使う方法もあります。
または、jsDelivr というところで html5shiv をフリーオープンソースとして提供しているのでこちらを利用します。これなら自分のサーバに上げなくても URLを貼るだけなので便利です。
（このオープンソースもいつ終了するかわからないけど。まあその頃には HTML5未対応のブラウザは無くなってるかもね）
ここのURLを使うと、下記のコードになります。
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<!--[if lt IE 9]> と <![endif]--> は、IE独自の仕様で、コレで囲むことによって IEだけが「もしIE9未満なら実行する」と解釈するんだそうです。
本日書いてきたコードに これを加えると下記のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトルをつけてみた！</title>
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
本日は晴天なり〜！
</body>
</html>
今はもう IE8の国内シェアはほとんど無いので、上記コードもあまり使うことはないと思います。
HTML5 が標準になって何年も経っており、ブラウザもその仕様に合わせて変更されていますし、古い IE のサポートも順次終了していますから。
次回予告
今回の記事は理屈っぽくて読むのが大変だったかも、ですね。
今回で、最低限必要な土台の要素が揃い「文書型宣言」もできたので、あとは中身を作っていくだけです。
次回から、いよいよ本文（body要素の中）で使う要素の説明をしていきます。
- 関連記事
-
- [11-3] 同じページ内でリンクしよう
- [11-2] リンクの文字の色を変えよう（CSS使用）
- [11-1] 他のページにリンクしよう
- （ちょっとメモ）index.html という名のファイル
- [10] 絶対URL と 相対URL（絶対パス と 相対パス）
- [9-2] 画像にテキストを回り込ませよう（CSS使用）
- [9-1] 画像を表示しよう img要素
- [8]コメントを入れよう
- [7] ＜div＞や＜span＞で特定の範囲を指定しよう
- [6] 段落に＜p＞要素を使おう（ついでにCSSで整えてみよう）
- [5] テキストを改行（＜br＞）してみよう
- [4] テキストに見出し（＜h1＞から＜h6＞）をつけてみよう
- [3] !DOCTYPE宣言をしよう
- [2] タイトル（title要素）を設定しよう
- [1] テキストエディタで書いてみよう
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
解決しました。
メモ帳を保存する際に文字コードを指定する部分があり、その部分が「ANSI」であったために文字化けが起凝っていたようです。
これからは保存する際に「UTF-8」に設定して保存します。
Re: 解決しました。
解決して良かったです。
ファイル保存時のエンコードは基本中の基本です。
文字化けの原因は、ほぼ間違いなくエンコード。
私もいまだにハマるときがありますよ。
何度ソースを見直しても絶対に間違ってない、でも文字化けする。
何十分か間違い探しをしていて、単にエンコードがおかしかっただけだと気がついた時の「負けた感」はすごいです（笑）
解決しました！
保存するときに「UTF-8」に設定したらできました～！
嬉しすぎて小躍りしました♪
私は全くの初心者ですが、このサイトのおかげで楽しくHTMLのお勉強ができています！
Re: 解決しました！
解決して良かったです！
> 嬉しすぎて小躍りしました♪
↑この気持ちわかる〜。
私もときどきバンザイとかしちゃいます（笑！）
No title
確実に、やっていきたいとおもいます。
Re: No title
コメントありがとうございます。お役に立てて何よりです！
