ウェブログ

5.HTMLで使う主要なタグを知ろう


HTML5のタグの数は煩悩と同じ108個。全部覚えるのは大変です。もちろんHTMLタグを全部覚える必要はなく、主要なタグを抑えておけばまずはOK!
そこでここでは主要なタグをご紹介します。

body内に使えるタグ

見出しを書くときはh1〜h6タグ

見出しに使うタグ。こんな感じで使います。

h1から6まであり、数字が小さい方が重要度が高くなります。大体そのページで一番伝えたい見出しをh1に使うことが多く、その下にh2, h3…と続きます。
ページ内で複数使ったりと、見出しはひとつとは限りません。
ちなみにこのページだとタイトルにh1を使い、各見出しがそれぞれh2,h3,h4…と設定されています。

h1_01_100513_010315_PM

本文を書くには<p>

本文(パラグラフ:paragraph)を書くときに使うタグ。かなり使用頻度は高いです。
例えば、先ほどの見出しタグと併用して使うことが多くなります。

一例:

見出しの中に本文をpタグを使って構成されているのがわかるかと思います。

改行するときは<br>

改行するタグです。brakeの先頭2文字と考えると覚えやすいです。
よく<p>の中で使用するケースが多いです。間違われやすいのですが、<br>で要素と要素の間の余白を作ると閲覧する環境により余白の高さが違うので、意図せぬ崩れや見た目の違いを生むため、お勧めしません。

例:

実際の表示例:

明日は明日の風が吹く。明日は明日の
風が吹く。

画像を表示させる<img>

画像を表示させたいときにつかうタグです。これはタグ単体では使わず、必ずセットでsrcというのがついてきます。
今までは<h1>とか<p>とかタグ単体で動いていたHTMLタグでしたが、<img>タグは単体では意味を成しません。ここで新たに出てくるのは「属性」です。

5_01

この図で説明すると、

タグというのはimg
そこに属性であるsrc(ソースと読みます)があり、属性srcの値はapple.jpgという画像ファイル
属性はタグによって有効にならないケースもあります。例えばh1タグにsrc属性は使えません。
値のapple.jpgのスペルが違っていても、ダブルクオーテーションがなかったりしてもダメ。
よく「終わりのダブルクオーテーションを付け忘れた」とか「srcのスペルを間違えた」とかいうケースがあるので、意図した表示になっていないときはもう一度きちんと打てているか確認しましょう。

リストを表示する<ul>, <li>

次はリストを表示させるためのタグ、<ul>と<li>です。このタグは2つでセットです。
リスト、というと想像しずらいですが要は箇条書きにする一覧を表示したいときに使うという感覚です。
サイトのヘッダーにあるメニュー(グローバルメニュー)にもよく使われます。

例:

ul(ユーエル)ってなによと思う方、正しいです。英語でUnordered Listの略で、日本語で言うと「未定義リスト」と言います。定義されてないリスト、定まってないリストです。
<ul>に非常によく似た、<ol>というのがあるのですが、これは英語で「Orderd List」、つまり「定義されたリスト」です。

以下のように使います。

ulとolの違い、わかりますか?

ulは定義されていなくて、olは定義されている。この「定義」の意味ですが、順番になっているかどうかというのがキーになっています。
ulの方はただ果物が羅列されているだけですが、olの方はランキング数が上から順番になっています。

試しにこれをHTMLで書いてみると、こんな風になります。

ul

  • いちご
  • スイカ
  • メロン

ol

  1. YouTube
  2. Facebook
  3. Amazon
  4. 楽天

ulは中丸、olの方は連番になっていますね。これは「olが定義されたリストなので、連番として表示する」という仕様です。
連番のリストはol、そうじゃない他のリストはliとおぼえておきましょう。

要素を囲うのに使う、<div>

次はdivタグです。英語のdivisionの略で、読み方はディブっていうことが多いですね。
こいつはタグや文章や画像など、まとまったものを囲うときに使います。

画像例:
div_01

ピンク色がメインエリアのdivで、各タイトルや文章などを囲っている大きなdiv。青い方がサイドバー全体を囲っているdiv
もちろんそれぞれのdivの中はいろんなタグが入っているので、かなり省略して書きますが以下の様なHTML構成になります。

ここでなんか変だな、とおもった方は鋭い。今まででてきたタグと、このdivタグ、大きな違いがあるんですが気づきましたか?

ちょっと考えてみてください。

わかりましたか?
答えは、「今までのタグにはちゃんと意味があったのに、divタグには特定の意味が与えられていない」ということなんです。
例えばh1は見出し、pは文章、imgは画像、ul&liはリスト…などなど、明確な意味がありました。imgタグで見出しは作れません。pタグで画像は出ません。

これらに対し、divは意味を持っていないタグなんです。なので、divの中にh1やimgがはいっても、文章がはいってもOK。
レイアウトやブロック要素として仕切りたい場合に使うことが多いです。ブロック要素に関してはまた別の機会に。

divの代わりに行内で使う場合の<span>

今度はspanタグです。スパンと呼びます。これはdivと同じように要素を囲うときに使うケースが多いです。例えば以下。

span_01

こういったように、文章内で特定の部分だけ変化させたいときなどに使います。変化させるのはCSSなことが多いので、今は使うケースがイメージできないかもですが、そのうち多様するようになります。
上記の画像はHTMLにするとこんなかんじ。

このspanになった部分に後々CSSを適用させていくわけです。
行内ならspan、いろいろな要素をいれるならdivと今は大雑把に覚えておきましょう。

タグではないけど、良くHTMLで使うコメントアウト

タグではありませんが、良く使うもので覚えておいて損はないのでご紹介。
コメントアウトと言って、忘れないようにメモを残したり、後々見返した時に「これは書いておいた方がいいんじゃないの」「他の人が見るときにこれは知っておいた方がいい情報だ」というテキスト情報をメモ的に残しておけます。実際には表示されません。

例:

上記は1行目だけしかコメントアウトにならず、2-4行は表示されるので注意。
はじめのうちは後で見返した時に自分でちゃんとわかるように、コメントアウトを多用してhtmlファイルのなかにどんどんメモしていきましょう。
っていってもパスワードとか第三者に見られて困るものは残してはいけませんよ。

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり