HTMLの書き方とルールについて

まずは簡単な例を見てみよう

HTMLの基本<> で括られた暗号のようなものがHTMLであるという説明をしました。そして、ウェブページのソースコードから、<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>で囲われた領域をHTMLの箱とみなし、その中にどんな料理を並べていくのかを定義していく、というイメージです。

これを踏まえて、今見ているページのソースコードを改めて確認してみましょう。その中から、<head><body>を見つけることが出来ましたか?

見つかった方、おめでとうございます!

あなたはもうHTMLを解読し、ウェブドキュメントを形成する言語を読めているのです。この調子で先へ進みましょう。

これだけは覚えて!HTMLを書く時のルール

ここで一つ覚えておいて欲しいのが、開始タグと終了タグの間をまたぐ形で、別のタグを配置してはいけないというルールです。HTMLの特徴は、要素の中に別の要素をいくつも配置する「入れ子(ネスト)」の構造を持つことです。大きな要素の中には、必ず小さな要素が収まっていなければなりません。それが入れ子の法則だからです。

入れ子の最初に書かれたタグを「親要素」、その中に書かれたタグを「子要素」と呼びます。一つの親要素の中には、いくつもの子要素を配置し、ひとまとまりにすることができます。一つのウェブページは一つのHTMLファイルとして表示されるため、<html>の中には、全ての子要素が含まれています。

<html>は全ての子要素を含む親要素です。相対的に見ると<head><body>は、<html>の子要素となります。このように、段階を踏んで要素を配置していけば迷うことはないのですが、階層が重複していくにつれて複雑さが増します。

入れ子をまたぐ形でタグを配置すると、思わぬ不具合が生じます。次の例を見てみましょう。

HTML
<div>
	<p><strong>正しい例</stroug></p>
</div>

<div>
	<p><strong>正しくない例</p></strong>
</div>

タグを入れ子にする場合は、親要素の開始宣言と終了宣言の間に書かれた子要素は、全て親要素の中で完結しなければなりません。このルールを最初に覚えておくと、画面に正しく表示されないという不具合を回避できます。

ここまでの内容を覚える事が出来たら、あとは必要に応じてタグを覚えていくだけです。次は、「HTMLファイルの作り方」について具体例を見てみましょう。

HTMLリファレンス一覧