[3] !DOCTYPE宣言をしよう

この記事下部の「HTML5の新要素をIE8以下で表示させる」を書き直しました(2017年2月記)

この記事は2010年9月にアップしたもので、当時は Google Code から html5shiv が提供されていました。
2016年1月に Google Code が終了したため、html5shiv の別の提供元の追加なども含めて書き直しました。

使用する記述 <!DOCTYPE 〜 >

HTMLの文書型宣言をしよう

<!DOCTYPE 〜 >で始まる記述による「文書型宣言(document type declaration)」は、
W3Cによって推奨されています。

W3C (World Wide Web Consortium) とは
WWW (World Wide Web) で利用される技術の標準化を促進する団体です。企業・学術団体・個人が集まって1994年に発足。
いろんなブラウザがありますが、各ブラウザのメーカーがそれぞれ独自に 表示のための「仕様」を決めたら、
「あのブラウザでは見れるのに、このブラウザじゃ見れない...」といったユーザの不利益が生まれますよね。
「そんなんじゃダメだからみんなで基準を作ろう!」と立ち上がったのがこの W3C。
ですのでHTMLを書く時は、W3C推奨の書き方をしていれば間違いない(はず...)なんです。

WHATWG (Web Hypertext Application Technology Working Group) もあります
同じくWeb上の技術の仕様を作る団体で2004年に発足。実際にブラウザを作る側(Apple、Mozilla、Opera)の有志が、W3Cの方向性等に憂慮して作ったんだそうです。
もともと HTML5 はこの WHATWG が2004年から検討してきたもので、W3Cがこれを採用し、共同作業で標準化したんだそうです。
というわけで、べつに敵対してるわけじゃない。だけど、W3C と WHATWG のダブルスタンダードになってるのは事実で、両者で異なる仕様ができたりちょっとややこしいこともありますw(ルビ関連の仕様とか)

<!DOCTYPE>によって、そのHTML文書が「HTMLのどのバージョンのルールで書かれているのか」
宣言され、ブラウザがそのルールに従った表示をします。
ですので <!DOCTYPE>は、HTMLファイルの最上部に書く必要があります。

「HTMLのバージョン」とは
HTML4 → XHTML1.0 → XHTML1.1 → HTML5 → 2016年11月に勧告された HTML5.1 が最新(2017年2月現在)
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>

これは html要素の lang属性といいます。
「ja」は日本語という意味。「このHTML文書で使用している言語は日本語」と宣言してあげる事で、ブラウザの表示・検索エンジン・音声読み上げソフト等の役に立ちます。(アクセシビリティが向上します)
ちなみに、英語はen、スペイン語はes、ドイツ語はde、韓国語はko、中国語はzhだそうです。

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

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>より先に記述します。
「サイトの本文はまともなのに、タイトルだけ文字化けしちゃうんだよねー」という時の原因は、ほぼコレです。

文字エンコーディングは「UTF-8」のほかに、「Shift_JIS」「ISO-8859-1」「US-ASCII」「ISO-2022-JP」「EUC-JP」など
があります。

上記まで出来たら、ファイルを保存しておいてください。
(今回のはプレビューしても前回と変わりません…。)

HTML5の新要素を IE8以下で表示させる

以下の部分は2017年2月に全面書き直しました。

HTML5は、それまでの HTML4 や XHTML1 で使ってきた要素(これらの要素については今後の記事で紹介していきます)に加えて、新しい要素が誕生しています(これも今後の記事で紹介します。まだ当分は登場しませんけどね♪)

この HTML5の新要素 IE8以下は未対応です。IE8のリリースは2009年だったからね。古。

ですが、html5shiv というオープンソースがあって、これは JavaScriptを使って IE8以下に HTML5の新要素(<article> とか <section> とかいろいろあるよ)を「これは要素だ」と認識させるソースです。(ということで、ユーザが JavaScriptをオフにしてたら何にもならないんですけどね..)

ただしこれは HTML5の新要素を認識させるだけで、プログレスバーとかの素敵な新機能を IE8以下 でも使えるようになるもんじゃありません。
要素として認識しなけりゃ、テキストや画像の表示が変になるので、単にそれを避けるための処置ですね。

この html5shiv 、以前は Google主催の Google Code という開発者向けの共同作業スペースで提供されていました。
下記のコードを <head>〜</head> 内に書いてるのを見たことがある方もいると思います。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

が、2016年1月に Google Code は終了しちゃって 上記のコードはもう使えません

終了の理由は、スパムなどの悪用が増えて、開発者が GitHub などの他のオープンソースコミュニティー流れていったことらしいです。Google自体も、かなりの数のオープンソースプロジェクトを GitHub に移行したらしい。

そして今は(2017年2月に書いてます)もう IE8以下の国内シェアはほとんど無いし、いらないっちゃいらないコードかもしれません。

そもそも HTML5を導入するということは、HTML5の新しい機能を使うということ。単に静的なレイアウトだけでなく、HTMLの要素だけでできるオモシロイことを提供するためだと思うんです。その新機能を使えない古い IE は切り捨てちゃうべきではないか、というのが私感です。

ですが、ど〜しても IE8 で HTML5を表示したいという場合には、
GitHub に上がっている html5shiv のソースをダウンロードして使う方法もあります。
ただ、エンジニアじゃないのに GitHub 使うのってなんだか敷居が高いですよね。

で、調べてみると jsDelivr というところで html5shiv をフリーオープンソースとして提供していました。自分のサーバに上げなくても html5shiv を利用できるのは嬉しいですね。
ここでゲットした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未満なら実行する」と解釈するんだそうです。

さて、本日書いてきたコードに このコードを加えるなら、HTMLソースは下記のようになります。
もしも IE8以下もターゲットにするときがあったら、このように書いてみてください。
(ただしこのオープンソースもいつ終了するかわからない...。でもその頃には HTML5未対応のブラウザは無くなってるだろなw)

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

今回の記事は理屈っぽくて読むのが大変だったかも、ですね。
次回から、いよいよ本文(body要素の中)で使うHTML要素の説明をしていきます。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

解決しました。

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

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

Re: 解決しました。

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

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

解決しました!

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

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

Re: 解決しました!

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

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

No title

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

Re: No title

モリゾウさん
コメントありがとうございます。お役に立てて何よりです!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.