マークアップなんだぜ！！〜HTMLの書き方〜
書き方のキホン
HTMLは論理構造を定義する言語と述べましたが、具体的には下のように文書に対して意味づけをします。
<要素名>意味づけしたい文章</要素名>
次の例は文章に対して段落という意味づけをしたものです。
<p>段落を構成する文章</p>
ここで、<要素名>を開始タグ、</要素名>を終了タグといい、基本的にこの二つは対になっています。ただし例外的に開始タグのみのものもあり、img要素、meta要素、br要素などがあります。(＊註)
要素によっては属性を設定できるものがあります。書き方は以下のとおり。
<要素名 属性="属性値">意味づけしたい文章</要素名>
属性は複数のものを設定することができます。次に示すのはimg要素でsrc属性とalt属性を設定した例です。
<img src="test.png" alt="代替テキスト">
文章作成者の覚え書きなどを書くためにコメントというものがあります。まぁRPGツクールの注釈のようなものです。コメントは文書の表示には影響を与えません。書きかたは以下のとおり。
<!--コメント--> <!-- コメントは複数行にわたって書くこともできる。 たとえばこんな感じ。 -->
HTML文書内では改行や半角での連続スペースなどは反映されません。逆に言えばソースの読みやすさの向上のために改行や半角スペースのインデントを入れても表示には差し支えありません。こういう側面での利用は積極的に行うべきだと思います。
それから、HTMLの文法で使用されているために普通には記述できない文字があります。「<」や「>」、「&」がこれにあたります。これらの文字を表示するためにはそれぞれ「<」「>」「&」と記述する必要があります。このように文法上普通には記述できない文字を表示するためのキーワードをエスケープシーケンスといいます。
＊註：将来HTMLに代わり普及すると目されているXHTML(EXtensible Hyper Text Markup Language)ではすべての要素について開始タグと終了タグが対になっています。
また、XHTMLでは要素名及び属性はすべて小文字で書くことになっています。HTMLでは大文字でも小文字でも良いとされていますが、将来XHTMLへの移行を考慮すると小文字で書くことが望ましいです。
HTML文書の基本的な骨格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>文書のタイトル</title> </head> <body> </body> </html>
まず最初の
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
というのはDOCTYPE宣言というものです。これは文書で使用されているHTMLの文法のバージョンを示すものです。この例ではHTMLのバージョンは4.01で移行型の文法に従い標準準拠モードである、となっています。現在HTMLの最新バージョンは4.01です。HTML4.01には複数の種類のDOCTYPE宣言があります。厳密型(strict)のDOCTYPE宣言では、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
と表記します。厳密型はより文法が厳密です。この講座で述べることなら厳密型文法にも合致しますので、文法の違いを気にすることはないと思います。厳密型のDOCTYPE宣言をするのが理想ですが、サーバーが自動挿入するコードが厳密型文法に違反する場合もあるので移行型のDOCTYPE宣言をするのが現実的といえます。標準準拠モードか否かによってブラウザのCSSに対する解釈が変わることがあるのでサイト内の文書のDOCTYPE宣言は統一するのが望ましいです。
<html>〜</html>はHTML文書の全体を示すものです。html要素の中身はhead要素とbody要素の2つで構成されています。
<head>〜</head>はその文書についての情報を示しています。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
これは文書に使用されている文字コードを示しています。Windows上で書かれた文書の場合は普通Shift_JISが使われています。他にはutf-8やeuc-jpなどがあります。文字コードの指定をしないと文字化けのリスクを被ることになります。なので絶対指定してください。
<title>〜</title>は文書のタイトルを示すものです。HTMLにおいては数少ない必須要素です。なので絶対書いて下さい。書かないとURLが表示されるなんていうのはまやかしです。
head要素には他にも作者情報やコンテンツのキーワードなど検索ボットに対する情報提示や、CSSやJavaScriptなどの外部ファイルの読み込みなどについて記述できます。
<meta name="keywords" content="test,html learning,mackenzie"> <!--↑キーワードの設定。content属性にキーワードを設定する。--> <link rel="stylesheet" href="test.css" type="text/css"> <!--↑CSSの外部ファイルの読み込み。href属性に外部ファイルのパスを設定。-->
head要素内の各要素の記述する順序には特に規定はありませんが、文字コードの指定は最初に記述することを推奨します。title要素より後に文字コードの指定を記述した場合、title要素の中身が文字化けするおそれがあります。
<body>〜</body>に文書の本文が記述されます。今後紹介する要素は基本的にこの要素の中に記述します。
HTML文書の基本的な骨格は以上です。これからいよいよ個々の要素の説明･･･の前にもう一つ述べておくべきことがあります。次回はそのことを述べておきます。