<body>〜</body>で使うHTMLタグはコレで十分

パソコンやインターネットというのは元々、学者や研究者といった人達に主に使われていました。 インターネットは、こういった人達が自分の論文や蓄積された知識をみんなで共有して役立てよう、 という考えの下で発展してきたわけです。

ネットで使われるHTMLのルールも、そういう人達が使いやすいように決められているので、 今のように「普通の一般人」が「普通のホームページ」を作る上ではあまり使う必要が無いタグも結構あります。 そこでこのページでは、 普通の人が普通のホームページを作るのによく使うHTMLタグに絞って説明をしてます。

bodyタグの中で使うHTMLタグは色々ありますが、 ここで説明するのは、
  • 見出しのh
  • 段落のp
  • 改行のbr
  • 罫線を引くhr
  • 太字のb
  • 強調を表すem
  • より強い強調を示すstrong
  • リンクに使うa
  • 画像を表示するimg
  • 箇条書きを表示するリスト
の全部で10種類です。

書店の分厚いHTMLタグ辞典などを見ると、こんなに覚えることあるのかとゲンナリしてやる気を失うという人も多いと思います。 困った時はソースを見ればタグの使い方を感覚的に掴めるように、 このホームページはシンプルで基本的なHTMLだけを使って作ってあるつもりです。

タグを使用する場合は、ブラウザが表示する文字の大きさやスタイルに惑わされて見た目に走るのではなく、 タグの意味を意識して適切なタグを選択するようにしてください。 ホームページを作り始めたばかりだとなかなか難しいとは思いますが、 適切なHTMLタグを使うことを覚えておくと、 後からスタイルシートを使ってホームページの見た目やデザインをする時に楽になります。

見出し<hn>〜</hn>

見出しの部分には、<hn>(nには1〜6の数字が入る)タグを使います。 文字の大きさは、h1が最も大きく、順に小さくなりh6が最も小さいです。 1から6まで全て使うことは少なくて、実際使うのは1〜3ぐらいまででしょうか。

見出しタグは、文字の大きさを調節することに使いがちですが、 このタグの本来の意味はあくまでも見出しを作成することです。 本来の意味から考えると1から順に段階的に使い分けないといけないのですが、 実際にこのタグを使う場合は順番が前後したり間を飛ばしても許容範囲かなと思います。

段落<p>〜<p>と改行<br>

段落として一つの塊を構成する部分にはpタグを使います。 段落内で改行する場合はbrタグを使います。 brタグは単体で使うので終了タグはありません。 HTMLのソース内でEnterを押して改行してもブラウザでは反映されません。

見出しのhタグを使うと太字で字が大きすぎるからという理由で、 ページの見た目を整えるのにpタグをhタグの代わりに使ってしまうことがありますが、 このタグ本来の意味は段落を作成することです。

また、brタグを2つ続けて使うと間隔が一行開くので、ページの見た目を整えるのに使うことがありますが、 brタグを連続して使うということは、タグ本来の意味から考えるとありえないことです。

罫線<hr>

hrタグを使うとブラウザの端から端まで水平な罫線を引くことが出来ます。 これは終了タグがありません。 長さや線のスタイル、太さなどの見た目はスタイルシートで指定するようにして下さい。

太字<b>〜</b>、強調<em>〜</em>、より強い強調<strong>〜</strong>

bとstrongを使って マークアップしたテキストをブラウザで見ると、見た目が同じように見えますが、 タグの意味はそれぞれ違います。

またemタグを使うとブラウザによっては斜体で表示されますが、 このタグはテキストを斜体で表示するために使うのではなく、 あくまで強調を表すタグだということを忘れないで下さい。

実際は、それほど厳密な使い分けがされているケースは少ないかもしれませんが、 文章の意味を考えて使い分けることにより、スタイルシートを適用させやすいというメリットがあります。

リンク<a>〜</a>

aタグを使うと他のページなどにリンクをはることができます。 開始タグの後ろにhrefというのをつけて、
<a href="リンク先へのパス">テキストor画像</a>と書きます。
リンクを使うにはパスというものを理解しなければいけません。
相対パス
パスには相対パスと絶対パスがありますが、まずは相対パスから。

1.htmlというファイルからフォルダAの2.htmlへリンクをはる場合、 1.htmlに書くソースは<a href="A/2.html">〜</a>となります。 逆に2から1へリンクをはる場合は、2に<a href="../1.html">〜</a>と書きます。

3と4のファイルは同じフォルダに入っていますから、 3から4へリンクをはる場合は3のソースに<a href="4.html">〜</a>と書き、 4から3へはる場合は4に<a href="3.html">〜</a>と書くわけです。

では1から3へリンクをはる場合はどうでしょう？1に書くソースは<a href="A/B/3.html">〜</a>となり、 3から1へはる場合は、3に<a href="../../1.html">〜</a>と書きます。

2から5へはる場合は、2に<a href="../C/5.html">〜</a>と書くわけです。 では最後に、6から4へリンクをはる場合は？そう、6のソースに<a href="../../A/B/4.html">〜</a>と書きます。

それに対し絶対パスというのは、 相互リンクなどで自分のホームページから他の人のホームページへリンクをはる場合に使うパスです。 ファイルのある場所を直接指定します。例えばYahooのホームページへリンクをはりたい場合は、 ソースに<a href="http://www.yahoo.co.jp">Yahooホームページ</a>と書くわけです。

画像<img>

HTMLファイルに画像を貼り付ける場合はimgタグを使います。終了タグはありません。 imgの後ろにsrcというのをつけて、
<img src="画像のある場所へのパス.gif" width="100" height="50" alt="代替テキスト">
となります。

パスは上記リンクの考え方と同じです。.gifと書いてある所は画像(イメージ)の種類です。 GIFイメージなら.gif、JPEGイメージなら.jpg、PNGイメージなら.pngと書きます。

数字の部分は画像の大きさを記入します。widthが幅でheightが高さです。 画像のアイコンを右クリックして、プロパティを選択するとイメージの大きさと種類が確認できます。

代替テキストというのは、何かの不都合で画像が表示されない場合に、「ここにはこんな画像がありますよ」 ということをテキストで書いておくのです。富士山の画像であれば、alt="富士山"などと書くわけです。

リスト

箇条書きを表示するリストタグには
  • 順不同(unorderd list)のリストul
  • 番号付き(orderd list)リストのol
  • 定義型のリストdl
があります。
リスト

これで一通りHTMLタグの説明は終了です。お疲れさまでした。 習うより慣れるのが一番の近道です。 テキストとタグを自分でガンガン書いて失敗を繰り返すうちに感覚が掴めるようになります。
HTML関連の本

<<HTMLの全体像
他のHTMLタグ>>