初心者のHTML5自習室３
いよいよページ作成！
いよいよHTML5でソースを記述します。用意するものは、メモ帳機能と好奇心程度です。
まず、どのような言語でページを作ったかを宣言するDOCTYPE（ドキュメントタイプ）宣言を行います。次に文書がHTMLであることを示すドキュメント定義をします。HTML4.01以前では、次のように記述していました。
※サンプルは、フレームの使用ができないものの非推奨の要素など比較的甘いとされるHTML4.01 Transitionalの場合です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja-JP">
</HTML>
HTML5では、短くまとめられて一文になります。しかも、状況によっては、この一文すら省略できるそうです。
<!DOCTYPE HTML>
</HTML>
W3Cの仕様書を確認すると、lang要素は必須ではなく、記述してもしなくても影響がないようにしたいようです。さて、それでも前述のものでは、短すぎて認識できないツールがあるかもしれないという不安があれば、次のように表記します。
<!DOCTYPE HTML SYSTEM "about:legacy-compat">
</HTML>
引用符はシングル（'）でも問題なく、引用符の中身以外は、大文字・小文字は識別されません。また、既述したものを含め、改行はこのホームページの都合によるものです。改行を入れることや余計なタグを記述することにより、ファイルサイズが大きくなります。画像ファイル同様に、ファイルサイズが大きくなると、表示する際のパワーも必要とされるので、表示速度に差が生じるとされています。
さて、次に、ドキュメント情報を盛り込む<HEAD>を記述していきます。さらに<HEAD>で囲った部分の中に、メタ情報やCSS/Javascriptの情報を盛り込んでいきます。
meta要素を使って記述する内容には、文字エンコーディングがあります。今まで、<Content-Type>を指定し、このように記述していました。
※推奨されているのは、UFT-8のようです。管理人は、Shift_JISに慣れ親しんでいるので、こっそり変えています。
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
この一文も短い記述で同じ効力が発揮できるようになりました。
<meta charset="Shift_JIS">
どちらの記述でも問題はありませんが、欲張って二つとも入れるということはできません。
ほかは、SEO対策としてキーワードを盛り込むmeta情報を入れてもよし、検索よけを施してもよし、著作権情報やサイト情報を入れるも作る人の考え一つです。忘れてはいけないことは、HTML5から装飾など見た目を整えるのはCSSと明文化されたので、CSSの存在を明らかにする必要があります。
しかし、外部ファイルを読み込む場合は、以前のようにmeta内でCSSを指定した上で、リンク先を記述するという必要はありません。
<link rel="stylesheet" href="../main.css" type="text/css">
これで読み込みが問題なく行われます。
外部ファイルの読み込みではなく、HMTL文書の<HEAD>〜</HEAD>内に記述をする場合には、今までと同じく、下記ように記述しないと読み込んでくれませんでした。
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
CSSを記述します
-->
</style>
そして、忘れがちなファビコンのリンクを記述しておきます。さらに、タイトルバーにタイトルを表示させるのに、必要なtittleも記述します。
さて、前の章で述べた通り、IEへのご挨拶が必要です。この記述がないと、IEは読み込んでくれません。そこで、次のような記述を加えます。
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
もちろん、スクリプトのリンクではなく自分自身で内容を記述することもできます。ただ、要素の数だけ記述が必要になるので、ボリュームが大きくなりそうです。それでも、頑張る場合で、HTML文書内に記述するときは、CSSと同様にmetaを記述した上で、このように記述していきます。外部ファイルを読み込む場合は、<script></script>を入れずに、記述します。
<!--[if IE]>
<script>
<document.createElement("article");>
<document.createElement("footer");>
<document.createElement("navi");>
......
</script>
<![endif]-->
ここまでのHTML文書の内容を簡単に記述すると下のようになります。
<!DOCTYPE HTML SYSTEM "about:legacy-compat">
<HEAD>
<meta charset="shift-JIS">
<meta name="description" content="内容を記述します">
<link rel="shortcut icon" href="ファビコンの場所">
<link rel="stylesheet" href="CSSファイルの場所" type="text/css">
<title>ブラウザのタイトルバーに表示させる内容</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</HEAD>
<BODY>
</BODY>
</HTML>
そして、いち早く取り入れたモダンブラウザといえども、対応は完全とは言い切れません。これは、CSSに各要素のdisplayを指定することで、使えるようになります。こちらは、CSSファイル、もしくは、記述エリア内に記述してください。
[hidden], area, base, basefont, command, datalist, head,
input[type=hidden], link, menu[type=context], meta, noembed,
noframes,param, rp, script, source, style, track,
title{/* case-insensitive */display: none;}
address, article, aside, blockquote, body, center, dd,
dir, div, dl,dt, figure, figcaption, footer, form,
h1, h2, h3, h4, h5, h6, header,hgroup, hr, html,
legend, listing, menu, nav, ol, p, plaintext, pre,
section, summary, ul, xmp{display: block;}
table{display: table;}
caption{display:table-caption;}
colgroup{display:table-column-group;}
col{display:table-column;}
thead{display:table-header-group;}
tbody{display:table-row-group;}
tfoot{display:table-footer-group;}
tr{display:table-row;}
td, th{display: table-cell;}
li{display:list-item;}
ruby{display:ruby;}
rt{display: ruby-text;}
上記のほか、レンダリングについては、WATAWGのHTML5:Draftをチェックしてみてください。
このサイトのソースは、ファイルサイズを小さくしようと足掻いた結果、大手ポータルサイトのソース並みに見難くなっています。無駄なタグは省略しているはずでも、残っていたり、どうしても言うことを聞かなくて、増やしたタグもいます。パンドラの箱と同じだと考えて、そっと閉じたままにしておいてあげてください。
目が殉職しそうなほどの長い記事にお付き合いいただきまして、ありがとうございました。次回はBODY要素です。
初心者のHTML5自習室３へ進む？ ⇒ Coming Soon