要素とタグ

２つの大きな要素

先ほど一応完成させた HTML 文書ですが、実はこれではまだ完成とは言えません。より完成品に近づけていきましょう。

文書に目印をつける際、<h1>～</h1>とか、<p>～</p>という文字列で挟みましたよね。これらの文字列＋文字列で挟まれた部分のことを「要素」と呼びます。そして<h1></h1>、<p></p>等の文字列を「タグ」と呼びます。h1要素を示すために、要素の開始位置に<h1>、要素の終了位置に</h1>というタグを挿入する、というわけです。

一応の完成を見たHTML文書の内容は、

  1. ファイルに関する情報をコンピュータへ伝える部分
  2. 実際にブラウザの窓に表示される部分

の２つに分けることができます。今回作成したファイル内容で言いますと、それぞれ

  1. <title>私のパソコン日記</title> の部分
  2. それ以外の部分

に当たります。１の部分はブラウザのいわゆる窓（Window）の中には表示されません（多くのブラウザの場合、title要素はタイトルバーにタイトルとして表示されます）。２の部分は窓の中に表示されます。

HTML文書では、上で述べた１の部分と２の部分を区別しなければなりません。区別するためにそれぞれを要素として示す必要があります。

１の部分をhead要素、２の部分をbody要素と呼びます。これらを示すためのタグはそれぞれ、<head>～</head>と<body>～</body>です。

そしてさらに、この文書がHTML文書であるということを示すために(html要素であることを示すために)、文書全体を<html>～</html>でマークアップします。

マークアップ後は下記のようになります。

<html>
<head>
<title>私のパソコン日記</title>
</head>
<body>
<h1>私のパソコン日記</h1>
<h2>平成１５年４月１３日</h2>
・・・(中略)・・・
<p>明日から二人でパソコンのお勉強だ～。がんばろ。イエッ～。(^O^)</p>
</body>
</html>

かなり完成に近づいてきました。さらに進みましょう。

lang属性とmeta要素

html要素の属性

HTML文書は「何語で書かれているのか」を示すべきであるとされています。どうやって示すのかというと、html要素のタグ内に言語情報を示すlang属性を追加します。

日本語の場合
<html lang="ja">
英語の場合
<html lang="en">

（他の言語コードについては仕様書の解説ページを参考にしてみてください。）

head要素内の要素

下に示すタグはどんな場合にも書いておくべきです。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

（改行する必要はありませんので…）

このタグはmeta要素を示すもので、内容を持たない空要素です。終了タグは必要ありません。大雑把に言いますと、「私はテキスト形式のHTML文書です。文字コードはシフトJISを使用しています。」ということをコンピュータに伝える役割をしています。(文字コードについてはここでは詳しく触れません。Windows添付のメモ帳でHTML文書を作成した場合は自動的に文字コードがシフトJISになっていますからご心配なく）

またタイトルに日本語を使用する場合は、上記meta要素をtitle要素よりも前に書いておかなければなりません。日本語の文字コードは外国語の文字コードとは全く異なるため、日本語が出現する前の段階で日本語の文字コード（ここではシフトJIS）を使っていることをパソコンに伝える必要があるからです。（こうすることでいわゆる「文字化け」を防ぐ効果があります）

以上の点をさらにタグとして追加します。暫定的完成形は以下のとおり。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>私のパソコン日記</title>
</head>
<body>
<h1>私のパソコン日記</h1>
<h2>平成１５年４月１３日</h2>
・・・(中略)・・・
<p>明日から二人でパソコンのお勉強だ～。がんばろ。イエッ～。(^O^)</p>
</body>
</html>

さあ、完成まであと一息です。

Information