HTMLのタグと要素

トップ > HTMLリファレンス > HTML概要 > HTMLのタグと要素

目次

HTMLのタグ

<html> や <head> などを タグ(tag) と呼びます。

多くのタグは、<b>~</b> のように 開始タグ(start tag)終了タグ(end tag) で囲みます。開始タグのタグ名の前にスラッシュ(/)をつけたものが終了タグです。開始タグを記述するときはそれに対応する終了タグも記述するのが原則ですが、終了タグを省略できるもの(<li> や <dd>など)や、終了タグの無いもの(<br> や <img> など)があります。

タグ名は必ず半角文字で記述してください。大文字・小文字はどちらでも構いません。昔は大文字が一般的でしたが、HTML の次世代規格とも言われる XHTML では、タグはすべて小文字で記述することになっており、HTML も小文字で記述するのが最近の流行りのようです。タグ名の前にスペースをいれてはなりません。

○ <html>
○ <HTML>
○ <Html>
× <HTML> ← 全角文字は駄目
× 〈HTML〉← 半角のように見えるけど実は全角
× < HTML> ← < の後に空白を入れては駄目

HTMLの要素

要素(element) の概念は最初はちょっと難しいかもしれませんが、下の図のそれぞれの枠が要素だと思ってください。html要素の中に head要素と body要素があり、head要素のの中には title要素が、body要素の中には h1要素と p要素があります。p要素の中には span要素や strong要素があります。この要素の始まりや終わりを示すのがタグです。

<html>
<head>
<title>~</title>
</head>
<body>
<h1>~</h1>
<p>~<span>~</span><strong>~</strong>~</p>
</body>
</html>

要素の中には終了タグを省略できるものがあります。終了タグが省略された場合は、適切と思われる箇所でブラウザが補ってくれます。同様に、開始タグも省略可能なものがあり、開始タグが省略されても、その要素が必要とされているなら、適切と思われる箇所でブラウザが開始タグを補ってくれます。

要素の重なり合いは包含関係(どちらかがどちらかを完全に含む)でなくてはなりません。包含関係が崩れてしまわないようにしましょう。

○ <strong><big>~</big></strong>
× <strong><big>~</strong></big>

HTMLのインデント

開始タグと終了タグの関係を間違えないように、HTMLを記述する際にインデント(行の先頭のスペース)をつけることをお勧めします。下記の例では、2文字の空白をインデントとして使用しています。

<html>
  <head>
    <title>~</title>
  </head>
  <body>
    <h1>~</h1>
    <div>
      <p>~<span>~</span>~<strong>~</strong></p>
      <p>~<span>~</span>~<strong>~</strong></p>
    </div>
  </body>
</html>

ブロック要素とインライン要素

HTML4.01 では、多くの要素は、ブロック要素(block element)インライン要素(inline element) に大別されます。ブロック要素は <div><p> などで、多くのブラウザではブロック要素の前後に改行が入ります。インライン要素は <span><strong> などで、多くのブラウザで前後に改行が入りません。

ブロック要素には下記などがあります。

p / h1 / h2 / h3 / h4 / h5 / h6 / ul / ol / dir / menu / pre / dl / div / center / noscript / noframes / blockquote / form / isindex / hr / table / fieldset / address / multicol

インライン要素には下記などがあります。

文字列 / tt / i / b / u / s / strike / big / small / em / strong / dfn / code / samp / kbd / var / cite / abbr / acronym / a / img / applet / object / font / basefont / br / script / map / q / sub / sup / span / bdo / iframe / input / select / textarea / label / button / blink / embed / layer / ilayer / nolayer / nobr / wbr / ruby / rb / rp / rt / spacer

下記のものは特殊で、インライン要素のみを包含する場合はインライン要素として、ブロック要素を包含する場合はブロック要素として振る舞います。

ins / del

各要素の包含関係については「要素の包含関係」を参照してください。

HTML5 では、ブロック要素、インライン要素の概念は廃止され、代わりに カテゴリコンテンツモデル が導入されていますが、ブロック要素、インライン要素という概念は HTML5 で記述する際にも役立ちますので、概念として覚えておくとよいかと思います。


Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月24日
http://www.tohoho-web.com/html/memo/elem.htm