HTMLの書き方とルールについて
まずは簡単な例を見てみよう
HTMLの基本で < と > で括られた暗号のようなものがHTMLであるという説明をしました。そして、ウェブページのソースコードから、<html>という文字列を発見しました。これが、HTMLを書き始めるための第一歩になります。
HTMLの記述はとても簡単です。宣言を開始したら、内容を記述し、終了する。これだけです。まず簡単な例を見てみましょう。
<html> ← 開始タグ
これはHTMLです。
</html> ← 終了タグ
上記のように、「開始タグ」と「終了タグ」で内容を挟んだまとまりのことを「要素」と呼びます。上記の例では<html>が開始タグ、</html>が終了タグに該当します。このタグをブラウザが読み込むことによって、「このファイルはHTMLで書かれたものだ」ということを理解してくれます。そのために宣言を行うのです。
<html>は、「ここからHTMLを始めます」という宣言です。そしてもう一方の</html>は、「ここでHTMLを終えます」という宣言になります。これにより、その間に書かれた文字列は「HTMLドキュメントに書かれた要素」として扱われます。上記の例では、「これはHTMLです。」という文字情報を持ったHTML要素が存在していることになります。
HTMLを書くという行為は、この要素のまとまりを作っていく作業の積み重ねになります。このルールさえ覚えてしまえば、もはや序盤は突破したようなものです。難しく考えずに先へ進みましょう。
初めてのHTMLを書いてみよう
それでは、必要最低限のHTMLを実際に書いてみましょう。
<html>
<head>
<title>ここにタイトルを書きます</title>
</head>
<body>
ここが内容です。
</body>
</html>
これがHTMLの基本の形になります。世の中に公開されている全てのウェブページは、この土台を基に作られていると言っても過言ではありません。上記の例を参考にしながら、テキストファイルを開いて実際に書き始めてみましょう。
ここで重要かつ簡単なテクニックを紹介します。上の例をコピーして、そのままテキストファイルに貼り付けてみて下さい。それを上書き保存すれば、最初のHTMLは完成です。
実は、コーディングの世界ではコピー＆ペーストは重要なテクニックなのです。先人の書いたコードをコピーして、それを編集したりアレンジしていく方が効率的に学習できます。最終的に公開する内容がコピーではいけませんが、個人で学習したり、制作の途中で公開されているソースコードを参考にするのは一向に構いません。
もちろん、コピーした内容を学習材料にして解読していくことが目的となります。
HTMLの基本的な構造を理解しよう
HTMLの構造をイメージ化すると以下の図のようになります。まず<html>でHTMLドキュメントであることを宣言し、<head>でドキュメントに関する情報をまとめ、<body>で内容を定義します。
HTMLのタグは、文字列という「おかず」を入れるための「弁当箱」だと思って下さい。<html>から</html>で囲われた領域をHTMLの箱とみなし、その中にどんな料理を並べていくのかを定義していく、というイメージです。
これを踏まえて、今見ているページのソースコードを改めて確認してみましょう。その中から、<head>や<body>を見つけることが出来ましたか？
見つかった方、おめでとうございます！
あなたはもうHTMLを解読し、ウェブドキュメントを形成する言語を読めているのです。この調子で先へ進みましょう。
これだけは覚えて！HTMLを書く時のルール
ここで一つ覚えておいて欲しいのが、開始タグと終了タグの間をまたぐ形で、別のタグを配置してはいけないというルールです。HTMLの特徴は、要素の中に別の要素をいくつも配置する「入れ子（ネスト）」の構造を持つことです。大きな要素の中には、必ず小さな要素が収まっていなければなりません。それが入れ子の法則だからです。
入れ子の最初に書かれたタグを「親要素」、その中に書かれたタグを「子要素」と呼びます。一つの親要素の中には、いくつもの子要素を配置し、ひとまとまりにすることができます。一つのウェブページは一つのHTMLファイルとして表示されるため、<html>の中には、全ての子要素が含まれています。
<html>は全ての子要素を含む親要素です。相対的に見ると<head>や<body>は、<html>の子要素となります。このように、段階を踏んで要素を配置していけば迷うことはないのですが、階層が重複していくにつれて複雑さが増します。
入れ子をまたぐ形でタグを配置すると、思わぬ不具合が生じます。次の例を見てみましょう。
<div>
<p><strong>正しい例</stroug></p>
</div>
<div>
<p><strong>正しくない例</p></strong>
</div>
タグを入れ子にする場合は、親要素の開始宣言と終了宣言の間に書かれた子要素は、全て親要素の中で完結しなければなりません。このルールを最初に覚えておくと、画面に正しく表示されないという不具合を回避できます。
ここまでの内容を覚える事が出来たら、あとは必要に応じてタグを覚えていくだけです。次は、「HTMLファイルの作り方」について具体例を見てみましょう。