ウェブランサー

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ドキュメントであることを宣言します。<head>でドキュメントの情報を、<body>で内容を定義します。

HTML

HTMLタグは、文字列という「おかず」を入れるための「弁当箱」だと思って下さい。<html>から</html>で括られた領域をHTMLの箱として、その箱の中に何を入れるのかを定義していきます。

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

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

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

これだけは覚えて!HTMLを記述する際のルール

ここで一つ覚えておいて欲しいのが、開始タグと終了タグの間に、更に別の開始タグと終了タグが収納されているという特徴です。HTMLは、このようにいくつものタグを「入れ子(ネスト)」状にする事で作られます。

入れ子状の最初に書かれたタグを「親要素」、その中に書かれているタグを「子要素」と言います。一つの親要素の中にいくつも子要素を入れてひとまとまりにすることもできます。特に、<html>から</html>の中には、全ての子要素が入っています。それは、一つのウェブページは一つのHTMLファイルで出来ているため、一つのHTML要素に全ての要素が含まれているからです。

ただし、入れ子をまたいでタグを記述する事は出来ません。次の例を見てみましょう。

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

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

HTMLタグを入れ子状にする場合は、親要素の開始宣言と終了宣言の間に書かれた子要素は、親要素の終了宣言の前に閉じなければならない、というルールを覚えてください。この順番を間違えると、画面に正しく表示されません。

ここまでのルールを覚える事が出来たら、あとは必要に応じてタグを覚えていくだけです。次は、HTMLファイルを作って実際にタグを書いてみましょう。

HTMLリファレンス

HTMLって何? 初めての方でも分かる超基礎知識を解説します
HTMLの書き方 HTMLタグの書き方と基本的なルールについて
HTMLファイルの作り方 HTMLファイルを作成してから保存するまで
改行と半角スペース HTMLで改行や半角スペースを扱う際のルール
ハイパーリンクについて ドキュメントをリンクでつないでみましょう
ヘッダー情報について HTMLドキュメントのヘッダー情報について
ディレクトリの意味 「ディレクトリ」という言葉の意味
HTMLとXHTMLの違い XHTMLでWebサイトを作る際の特徴とルール