HTMLの基本的な約束事

これまではタグを使うことで文字の装飾や画像の表示ができることを紹介しました。
タグのみに注目してきたため、はっきり言ってHTMLの文法のルールを完全に無視してきました。
ここで一度、HTMLの文法において基本的な約束事を確認しようと思います。

HTMLの基本タグ(最低限必要なタグ)

HTMLを記述する際に最低限必要なタグがあります。
それは以下の通りです。
<html> 〜 </html> HTML 文書であることを<html>〜</html>で囲んで指定
<head> 〜 </head> 文書に関する情報を<head>〜</head>で囲んで指定
<body> 〜 </body> 文書の本文を<body>〜</body>で囲まれた部分に記述
「最低限必要」なので、かならず記述しなければなりません。
とは言うものの、これまで<html>などを使わずにHTMLファイルをつくり、表示もできたのには理由があり、実は省略可能だったりします。
今までのように非常に規模の小さなファイルであればルールを無視しても問題ないのですが、そのまま本格的なページを作っていくと、ブラウザの処理が変わったり、レイアウトが崩れたり、 必ずどこかで予期せぬことが起きます。
それに、あとから変更しようとしても難しいので、くれぐれもHTMLのルールに従って、省略することなく記述するようにしましょう。
上の3つのタグは以下のように記述します。

Fig.1 HTMLの記述例

<html>
 <head>
  文書に関する情報
 </head>
 <body>
  文書の本文
 </body>
</html>
これまで紹介した文字装飾や画像表示などのタグは、文書の本文になるため<body>タグの中に記述します。
ページのタイトルなどは文書に関する情報なので、<head>タグの中に記述します。ちなみに、ページのタイトルは<title>と</title>の間に記述します。
「タグで遊ぶ」で紹介したタグをルールに従って記述すると、Fig.1のようになります。
タグに囲まれた部分を字下げすると見やすい文書になるため、できるだけクセにしましょう。

ページトップへ

使用する文字

ホームページを作成していくと、ページの数だけHTMLファイルが増え、ページの内容によってはそれ以上に画像ファイルが増えていきます。
ここで、ファイル名に関して注意する点があるので、以下にいくつかまとめておきます。
・できるだけ半角英数字を使用する
・大文字と小文字をごっちゃにしない(XHTMLを見越して小文字を使用する)
・記号を多用せず、ハイフン(-)かアンダースコア(_)程度にしておく
・スペースをファイル名に含めない
・長いファイル名は避ける
これらの注意事項はファイル名だけではなく、HTMLのタグなどにも気をつけるように心がけましょう。

ページトップへ

HTMLのバージョン宣言

HTMLにはバージョンがあります。
ここでHTMLの歴史に関することは詳しく書きませんが、歴史的な経緯があるため、HTML1.0に始まり、2.0→3.2→4.0→4.01と進み、HTMLを拡張した?XHTML1.0が登場し、現行バージョンはXHTML1.1です。(2009年3月現在)
バージョンによって何が違うのかというと、推奨するタグが違うということです。
例えば、「タグで遊ぶ」にあった<b>や<center>といった見栄えを決めるタグはXHTMLでは使用しません。ちなみに、XHTMLでは後述の「スタイルシート」で見栄えを決めます。(このサイトもXHTMLです)
HTMLを記述する際、HTMLのバージョンも明記し、そのバージョンに準拠したページを書く方が望ましいです。
まだ、ここでは詳しく説明しませんが、以下に宣言例をいくつか紹介します。

HTML4.01 Transitional の場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  :
  :
</html>

XHTML 1.0 Transitional の場合
<?xml version="1.0" encoding="文字エンコーディング"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  :
  :
</html>

以下のページに、「各HTMLバージョンのDOCTYPE宣言のサンプル集」があります。参考にしてください。
http://www.animegif.net/tips/html/doctype-html-public.html

ページトップへ

2009/03/02