[3] !DOCTYPE宣言をしよう

最終更新日:2017年09月12日  (初回投稿日: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ファイルの最上部に書く必要があります。

「HTMLのバージョン」とは
HTML4 → XHTML1.0 → XHTML1.1 → HTML5 → 最新は HTML5.1 です(2017年9月現在)
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要素の中)で使う要素の説明をしていきます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

解決しました。

すみません先ほど<meta charset="utf-8">だと文字化けすると書いたものですが、原因がわかり解決しました。

メモ帳を保存する際に文字コードを指定する部分があり、その部分が「ANSI」であったために文字化けが起凝っていたようです。
これからは保存する際に「UTF-8」に設定して保存します。

Re: 解決しました。

コメントありがとうございます!
解決して良かったです。

ファイル保存時のエンコードは基本中の基本です。
文字化けの原因は、ほぼ間違いなくエンコード。
私もいまだにハマるときがありますよ。
何度ソースを見直しても絶対に間違ってない、でも文字化けする。
何十分か間違い探しをしていて、単にエンコードがおかしかっただけだと気がついた時の「負けた感」はすごいです(笑)

解決しました!

何回も確認して、文字化けしてしまって絶望していたのですが、
保存するときに「UTF-8」に設定したらできました~!
嬉しすぎて小躍りしました♪

私は全くの初心者ですが、このサイトのおかげで楽しくHTMLのお勉強ができています!

Re: 解決しました!

マリーさん、コメントありがとうございます。
解決して良かったです!

> 嬉しすぎて小躍りしました♪
↑この気持ちわかる〜。
私もときどきバンザイとかしちゃいます(笑!)

No title

これから、htmlの勉強をしていくので、大変励みになります。
確実に、やっていきたいとおもいます。

Re: No title

モリゾウさん
コメントありがとうございます。お役に立てて何よりです!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.