HTMLの記述方法（実用編）｜無料ホームページ教室

DOCTYPE宣言

では、実際にHTMLを打っていきましょう。まずは、「テキストエディタでWebページ編集」で説明したように、テキストエディタを開いて下さい。

HTMLにも、いろいろな仕様があります。ある仕様に従って書くと決めたら、それを宣言しないといけません。HTMLソースの、一番上にDOCTYPE宣言を入れて、HTMLの、どの仕様を使って書いているのかを、宣言することができます。

テキストエディタを開き、次の文をコピー＆ペーストして下さい。手入力してもかまいませんが、入力ミスがあるかもしれませんし、面倒ですのでコピーが、良いかと・・・＾＾

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

この宣言は、「HTML バージョン4.01 Transitionalの仕様で記述していきます！」という宣言で、HTML 4.01 Transitionalは、ごく一般的なHTMLの仕様です。今後は、HTML 4.01 Transitionalの仕様に基づいて、勉強していきたいと思います。

ちなみに、この宣言は、タグではございません。

基礎的な決まり文句

次にご紹介する４個のタグも、決まり文句と思って、何も考えないで打ち込んで下さい。HTMLでは、この４個のタグは、基本的に省略してはダメということになっています。

HTMLタグ

先ほど打ち込んだ続きですが、テキストエディタを開き、次のように打ち込んで下さい。簡単な文ですので、手入力で練習して下さい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">

</html>

このタグは、htmlタグです。「ここからhtmlが始まって、htmlがここで終わります。」という、おまじないです。

lang属性に「ja」を指定すると、「日本語ですよ！」という意味になります。つまり、htmlタグで囲まれているすべては、「日本語です。」という設定になりますので、htmlタグ内で出てくるタグのすべてに、lang属性を指定しなくても良くなります。ただし、タグの中がすべて英語の場合は、lang属性で「en」を設定する必要があります。

15.HTMLの記述方法（基礎編）でも申しましたが、html要素とlang属性の間に、半角スペースを入れ忘れしないようにして下さい！

また、htmlタグの後には、何も入れてはダメというルールがあります。たまに見かけるのですが、htmlタグの後に、改行が入っているとか、次の例のように、コメントが入っているWebページもあります。

● 間違った例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

</html>

htmlタグで、headタグとbodyタグを挟む

html開始タグと、html終了タグの間に、改行をいくつか入れて、隙間を作り、その中に、headタグとbodyタグを入れて下さい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>

</head>

<body>

</body>

</html>

htmlタグの中には、headタグとbodyタグを１個ずつしか入れてはダメです。また、その他のタグは、いくつでも入れて良いのですが、headタグか、bodyタグの中にしか、入れてはダメというルールになっています。

headタグの中に、Webページの設定が入り、bodyタグの中に、Webページの文書や絵などのコンテンツが入ります。

headタグで、titleタグを挟む

headタグの中に、titleタグを入れて下さい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>

<title></title>

</head>

<body>

</body>

</html>

titleタグの中に、Webページのタイトルが入ります。例えば、座布団のWebページでしたら、

<title>座布団について</title>

のように記述します。ちなみに、今ご覧になられている、このWebページのタイトルは、ソースを見て頂けたらわかるのですが、「HTMLの記述方法（実用編）：無料ホームページ教室」です。

titleタグは、とても重要なタグの一つですので、今後制作予定のHTMLリファレンスで、詳しくお勉強していきましょう。

この時点で、ソースを上書き保存し、上書き保存したHTMLファイルをブラウザで開いても、何も表示されない、真っ白な画面になったと思います。

コンテンツを入れる

では、実際に、コンテンツを入れてみましょう。テキストエディタに、次のように打ち込んで上書き保存し、ブラウザで開いて下さい。すでにブラウザを開いている人は、ブラウザの「更新」ボタンをクリックして下さい。どのように、表示されましたか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>

<title>HTMLの練習</title>

</head>

<body>

本日は、晴天なり。

</body>

</html>

ブラウザに、「本日は、晴天なり。」と黒字で表示されましたでしょうか？。

本日は、晴天なり。

また、ブラウザの上側の青い部分にタイトルとして、「HTMLの練習」と表示されたはずです。もし、titleタグに何も入れなければ、上の青い所に、ＵＲＬが表示されます。

コンテンツ更新後の表示確認

テキストエディタにて、ソースを変更してコンテンツを更新し、上書き保存が終了したら、ブラウザを開き直すか、ブラウザの「更新」ボタンをクリックして下さい。すると、更新した所が、反映されていることと思います。

分かりやすい階層構造

タグの階層構造

上の例で、titleタグを見たときに、titleタグは、headタグに挟まれています。また、headタグは、htmlタグに挟まれています。ということは、titleタグは、headタグにも、htmlタグにも挟まれていますので、「htmlの中のheadの中のtitleタグである！」ということになります。

このように、タグは幾重にも重なっていくことになります。つまり、階層構造になっています。

階層構造を分かりやすく記述するために

タグの階層構造を、パッと見た目で分かりやすくするために、階層の深さに応じて、左側に半角スペースを入れる場合があります。例えば、上の例を使いますと

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>

<title>HTMLの練習</title>

</head>

<body>

本日は、晴天なり。

</body>

</html>

ここで、htmlタグが階層の深さでは、一番浅いタグです。htmlに挟まれたheadタグとbodyタグが、第２階層ですので、左側に半角スペースを２個入れています。titleタグや、bodyタグ内のコメントは、第３階層ですので、左側に半角スペースを４個入れいています。

このように、階層の深さに応じて、左側に半角スペースを入れていくと、パット見た目が分かりやすくなります。

まとめ

これで、HTMLソースを作っていく上での、土台が完成しました。次に、代表的なHTMLタグのお勉強をしましょう。

← 前のページ「15.HTMLの記述方法（基礎編）」
「17.HTMLタグ簡単リファレンス」次のページ →