むっ、難しいですね・・・。
基本的に < と > で挟まれた物をHTMLタグ(tag)と呼んだりします(単にタグという場合が多いです)。そしてその中身全体を要素(element)といいます。ですから <html></html> などはタグと呼び、<title>ララの世界</title> を title要素 と読んだりします。ただし、基本的にと断ったように、<と>で挟まれた物が全てタグというわけではないのと同時に、すべてを要素と呼ぶ訳ではありません。
また、タグは多くの場合で開始タグと終了タグがワンセットで存在します。例えば<html>と</html>、<head>と</head>、<title>と</title>、<body>と</body>などで、開始タグに/を付けたものが終了タグとなっています。これも断ったように、例から外れる場合もあります。例えば<img src="" alt="">や<br>、<hr>などの空要素には終了タグは存在しません。(それぞれの意味は後ほど説明します)
タグとは荷札という意味です。簡単に言えば印ということでしょうか。例えば本屋さんで本棚に『あ行』『か行』・・・『ま行』等と、どこに何があるのかわかり易いように目印があったりしますよね。あんなような感じで、ここからが『あ行』ですよと教えてくれるのが<html>のような開始タグだということです。この例だと終了タグ</html>の説明がつかないのですが・・・。まあ、ある開始タグからある終了タグの間に記述されている事はこんな意味があって、別の開始タグから終了タグの間の記述にはあんな意味があって・・・と意味づけがされていて、それが別れているのだな思って頂ければ良いと思います。それから、タグ自体には特に命令の意味などはありません。あくまでも印です。
DTD宣言の『HTMLというもの』でも少し触れましたが、メモ帳に書かれた記述全体をを『HTMLソース(source)』と言います(単にソースという場合が多いです)。source を辞書で調べると源泉とか元、源、原因などと載っているので、HTMLファイルの源となる物というような捉え方で良いと思います。
開始タグはそこからある要素（この場合はhtml）が始まりますよという印で、終了タグはそこでその要素が終わりですという印です。つまり、<html>から html というものが始まって、</html>が登場するまでの中身はそれ自体も含めて全て html要素 ですよという意味です。つまり今のところは文書型宣言以外の記述は全て html要素の内容で、最初と最後にその印しとしてこのタグが登場しているという事です。
この二つに挟まれた部分はヘッダでありますという印です。ヘッダとはそのデータ(ファイル)自体に関する情報の事です。例えば書籍ならば、「この本は2004年に発売されました」とか「日本語の本です」とか「1200円です」とか「紙は上質紙を使用しています」などと、内容とはほぼ関係ない部分です。例えば前項で創ったファイルでは<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">という、このファイルはShift_JISという文字コードで書かれていますという、内容とは直接関係のない情報が記載されています。他にもそのファイルの作成日時や著作者情報などが記されたりします。<title></title>についてはこの例からは漏れるかもしれません。
この二つに挟まれた部分は題名(タイトル)でありますという印です。内容と関係あることなのですが、ファイル自体のタイトルと考え<head></head>間に記述します。Webサイトではここに記述された物がブラウザのタイトルバーに反映されます。唯一省略が許されない部分と言っても良いほど重要な要素なので必ず記述して下さい。そしてトップページのタイトルはそのままサイトのタイトルになる事が殆どです。
主にブラウザに表示させたい内容をこの間に記述します。
むっ、難しいですね・・・。
言葉で説明すると難しく感じるのです。簡単に言えば、ページを創る時にはDTD宣言をした後に<html>から始めて、次に<head></head>を書き、その中にどんな文字コードにするか(<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">)、どんなタイトルにするか(<title></title>)を書いて、後は書きたいことを<body></body>の間に書いて、最後は</html>で閉じましょうというだけの話です。
全然簡単じゃない気が・・そういう決まったルールがあるってことですよね？
そうです。何か申込用紙を書いた事がありますか？あっテストでもいいです。ここには氏名を書いて、そこには問一の回答を書いてなどと決まっていますよね。あんな感じです。書く場所を決めるのはテストを作った人ですよね。ホームページも同じです。貴方が製作者なわけですから<title></title>にはタイトルを書いて、<body></body>には内容を書いてと自分で書かなければならないのです。もちろんテストとは違って内容を書くのも自分ですが。
ここまで紹介した4種類のタグ(<html></html><head></head><title></title><body></body>)は、ほぼ全てのファイルに記述します。そして一つのHTMLファイルには一回ずつしか登場しません。例えば<body>や<head>が二つ以上登場する事はまずありません。書きたい中身が多数ある場合でも全て一つの開始タグから一つの終了タグの中に全てまとめます。
それではここで前項で作った index.html を説明と照らし合わせて見ましょう。
index.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> <p>ララの世界</p> </body> </html>
下手な図ですが、上のような抱合関係をイメージして頂ければと思います。
これまで出てきた<html></html><head></head><title></title><body></body>については出てくる順番がほぼ決まっています。一番外側を<html></html>で挟み、先に<head></head>が出てきます。そしてその間に<title></title>が入り、ヘッダが終わったら<body>が始まります。そして基本的には</body>で内容が終わったら直ぐに</html>で閉じられます。ですから<body></body>の間に<title></title>が入ったり、<head></head>よりも先に<body></body>がくる事はありません。もちろん<head></head>の中に<body></body>が入る事もなければ、その逆もありません。
それじゃあ上から順番に行くと、<html><head><title></title></head><body></body></html>は決まってるってこと？
はい。そう思ってくれて結構です。そして<html>の前にはDTD宣言などが入り、<head></head>間には文字コードの指定、そして</html>の後ろには何もこないと覚えておいてください。
わかりました。それじゃあこれからは他の所はいじらないで<body></body>間の『ララの世界』を色々と書き換えて行くのですね？
おっ。中々するどいですね。その通りです。外堀というか器は変わりませんので、後は中身をどのように書けば良いのかを進めて行くのです。それから新しいページになれば<title></title>の中身も書き換えます。
これくらい朝飯前です。
これまでの説明でなんとなく流してきた部分を補足的に説明します。「文字コードとは」で検索してもらえれば詳しい事が書いてあります。簡単に言えば文字や記号をパソコンなどのコンピュータで扱うために、それぞれの文字に数字を割り当てたその数字の事を言います。「51」ならば「な」で「15」ならば「お」というようなポケベル方式と言って伝わるかわかりませんが、そのようなイメージです。コンピュータはそれぞれの文字や記号を数字として扱っているのですが、文字コード(規格)の種類によっては同じ数字でも違う文字を表示したりします。これが文字化けになるのです。例えばShift_JISという文字コードでは『あ』という文字を表すのに「12354」という数字を割り当てたとしても、euc-jpという文字コードでは全く違う文字を割り当てているかもしれません。その他にも文字コードではたくさんあり、文字コードが違えば文字も変わってしまいます。これが文字化けの最大の原因なのです。
というわけでその文字化けを起こさないようにする為に、そのHTMLファイルがどんな文字コードで書かれているかを印しておけば、閲覧する方(ブラウザ)がそれを認識して、こちらの任意の文字コードで見せる事が出来るのです。その為の印が<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">なのです。これを書いておけば絶対に文字化けしないわけではなく気休め程度とも聞きますが、無いよりかはあったほうが良いです。
なぜ『 Shift_JIS 』なのかと言えば、メモ帳が Shift_JIS しか扱う事ができないからです。他のテキストエディタを用いれば他の文字コードも扱えますが、当サイトでは Shift_JIS で行きます。ちなみに他には『 ASCII 』『 ISO-2022-JP 』『 EUC-JP 』などの文字コードがあります。もし、これらの文字コードが必要になるようでしたら、その時は自分でお調べください。一応『 EUC-JP 』『 ISO-2022-JP 』の場合を載せて置きます。何らかの事情でこの二つの文字コードで進めたい方は<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">の部分を下記のどちらかに書き換えて進めてください。
<meta http-equiv="content-type" content="text/html; charset=euc-jp">
<meta http-equiv="content-type" content="text/html; charset=iso-2022-jp">
なんだか暗号みたいですねぇ。
それはおもしろい例えかもしれませんね。文字コードが暗号で、上の <meta〜 で始まる記述がその暗号を解く鍵(ヒント)みたいなものかもしれません。鍵が違えば内容を読み取ることができません(文字化け)。ですからその鍵を暗号文と一緒に書いておけば、簡単に暗号が解けて読めるようになる。そんなイメージかもしれません。
[ トップページ ]
[ 目次 ]
[ ページの先頭 ]
[ 前項目 ]
[ 次項目 ]