HTMLの骨組みを書いてみよう

ここからは、数あるHTMLの要素(タグ)を一つ一つ書いていきます。 まずは、HTML文書を書く上で最低限必要な要素からはじめます。

HTMLを書くためのエディタを起動してください。へてむるクリエイターが あるならそれを使うと楽です。

DOCTYPE宣言

HTMLにはいくつかのバージョンがあり、HTML文書の一行目で、一体どのバージョンを使うのか 書く必要があります。ですが実際によく使われているのは次の3通りです。

特別な意味がない限り、真ん中の「Transitional」を書けば問題ないでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
strict(厳格な)の文字通り、後に説明するhtmlの「文法」に最も忠実なタイプ文法に厳しいので、使ってはいけない要素が多く、 初心者向けではありません。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
上のstrictに比べれば文法がゆるく、書きやすいです。色んな要素が使えるのでおそらく一番使われているタイプなのではないでしょうか。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
HTML文書の中に「FRAME」要素を使っている場合のみ、使わなければいけないタイプです。それ以外は このタイプのものを書く必要はありません。というか書いてはいけません。

要素を書いていくとは書きましたが、これらは要素ではありません。どんなHTML文書にも必要な、 いわゆるおまじないのようなものです。省略しているサイトは非常に多いですが、これを省くと、 HTMLの文法上ではHTMLと認められなくなります。

HTML要素

先ほどのDOCTYPE宣言を除いたHTML全体を囲う要素です。

開始タグは<html>、終了タグは</html>です。

また、そのHTML文書の中で使われている言語を表すためのlangという属性があります。 日本語なら開始タグは、<html lang="ja">と書いておきましょう。

HEAD要素

HTMLの本文を書く前に、HEAD要素を書く必要があります。HEAD要素だけでは特に意味を持ちませんが、 その中にHTML文書のタイトルや、キーワードなどの情報を書くことができます。

開始タグは<head>、終了タグは</head>です。

ちなみにhead要素の中は、実際には表示されませんのでご安心を。

META要素

私たちの目に直接ではなく、サーバやブラウザ、GoogleやYahoo!などの検索エンジンのロボット に、HTML文書の情報を送るための要素です。HEAD要素のタグの中に書きます。

この要素と属性は非常にややこしいので、次の5つだけ覚えておいてください。

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
とにかく必要。これより前に日本語を書いてはいけません。一番頭に持ってきましょう。
<meta name="description" content="">
content=""の"と"の間に、HTML文書の紹介文を書くためのものです。 ソースを見れば分かりますが、このページでは「<meta name="description" content="html、meta、titleといったhtmlの骨組みに関する要素の説明。">」 と書いています。絶対必要ではありませんが、これを書いておくと、検索エンジンで表示してくれるかもしれません。
<meta name="keywords" content="">
使い方は上のものとほとんど同じですが、こちらはHTML文書のキーワードを書くためのものです。これも検索エンジンへの対策になります。 複数のキーワードを書くことができ、キーワードごとに,(半角のコンマ)で区切ります。 このページですと、「HTML,要素,タグ,meta,title」といったところです。
<meta http-equiv="content-style-type" content="text/css">
文書内にCSSというものを使っている場合は書かなければいけません。使っていなければ書く必要はありません。
<meta http-equiv="content-script-type" content="text/javascript">
こちらは、Javascriptというものを使っている場合に書かなければいけないものです。

ちなみに、meta要素には終了タグは存在しません。

TITLE要素

HTML文書のタイトルを書くための要素です。これもhead要素のタグの中に書きます。

開始タグは<title>、終了タグは</title>です。

HEAD要素の中なのでHTMLの本文には表示されませんが、このタグの間に書いた言葉が、ブラウザの上部や、お気に入りに入れたときのタイトルなどに表示されます。

TITLE要素はどんなHTML文書にも絶対必要です。お忘れなく。

BODY要素

HTMLの本文部分を入れるための要素です。これはHEAD要素の中に入れてはいけません。headの終了タグの後に書きます。

開始タグ<body>、終了タグ</body>に挟まれた部分が、HTML文書の本文となります。

つまり、私たちの目に見える部分はすべてこの中に書かなければいけないということです。

配色に関する属性

BODY要素には、背景色を変えるためのbgcolor属性、 背景画像のためのbackground属性、本文の色を変えるtext属性、 リンクしている部分の色を変えるlink属性などがあります。 例えば背景色を黒くして、本文の文字を白くしたいなら、下のように開始タグを書きます。

<body bgcolor="black" text="white">

link属性も同じようにして色を変えることができます。

もちろん、黒以外にもさまざまな色を設定することができます。 色について詳しくは、「文字のサイズや色を変える」の、「文字の色を変えてみよう」で説明します。

が、実はこれらの属性は、実際には使うべきではありません。 BODY要素のタグに限らず、htmlで色を設定するのはおすすめできる方法ではないのです。 後から説明するスタイルシート(CSS)というものを使うようにしましょう。

ここではあくまでも、「こういうやり方があるんだ」ということだけ覚えて下さればそれで構いません。

実際にエディタで要素を書いてみよう

それでは実際に、エディタを開いてこのページで説明した要素を次のように書いてみましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta name="description" content="">
<meta name="keywords" content="html,てーこく">
</head>
<body>
</body>
</html>

へてむるクリエイターの場合

へてむるクリエイターでは、わざわざ手打ちでなくても、簡単にタグを入力するための機能があります。

骨組みに関する要素のタグを入力するには、右クリックメニューの「タグの挿入」 にある「ページ設定」から「HTMLの骨組み」をクリックするか、 画面上部のタグパレットの「ページ」をクリックして、その上にあるアイコンのうち、一番左のものをクリックすれば、 ウィンドウが立ち上がるので、「ページの配色」、ソースにGENERATORを含めるのチェック を全てはずして、ページの情報をクリックして、「ページの説明」、「キーワード」に チェックを入れてそれぞれの欄に必要な言葉を入力してOKを押してください。 これで上の文を一つ一つ打つのと同じように、html、head、meta、body要素が一気に 挿入されます。

ちなみに「ページの配色」の欄は、BODY要素のbgcolor属性や、text属性などを指しています。

それぞれの要素のタグを個別に入力したい場合(例えばTITLE要素だけなど)は、同じように右クリックで表示されるメニューか、タグパレットから、 挿入したい要素を選択してクリックしてください。

これから色んな要素、タグを説明していきますが、全て同じような操作(右クリックメニューかタグパレット)で 簡単にタグを入力することができます。

保存して表示されるか確認してみよう

書き終えたら、「index.html」という名前で、「作業用フォルダの準備」で作成した「web」フォルダに保存してください。

保存が完了したら、「エディタの基本的な使い方 」で 説明した方法で、ちゃんと表示されるか確認してみましょう。

どうです?ブラウザになにか表示されましたか?もし表示されたら失敗です。 どこか間違っています。BODY要素の中は空っぽですので、 何も表示されるはずがありませんよね?真っ白なのが正解です。

さて、次からはいよいよBODY要素の中に書く、本文に関わる要素を説明していきます。

HOME