＞ ＞ ＞ XHTML の「タグ」と「要素」の違いと正しい使い方

XHTML の「タグ」と「要素」の違いと正しい使い方

Posted at May 17,2007 12:10 AM
Tag：[Element, Tag, XHTML]

先日公開した XHTML タグ一覧表示ツールの中の説明で、「<br /> は空タグではありません」というご指摘を頂きました。勉強不足だったことを反省して、改めて XHTML の「タグ」と「要素」の違いや使い方について調べてみました。

まず、W3C で公開されている「XHTML 1.0」の仕様は下記です。

上記の「4. Differences with HTML 4（HTML4との相違点）」に

Well-formedness is a new concept introduced by [XML]. Essentially this means that all elements must either have closing tags or be written in a special form?（整形式性は、[XML] によって導入された新しい概念である。本質的には、これは、すべての要素が終了タグを持つか(後述のとおり)特殊な形式で書かれるかしなければならず、?）

とあり、XML の仕様を参照するようになっています。「XML 1.0」の仕様は下記です。

和訳は「W3C勧告 1998年2月10日」版のものですが、以降で参照する部分に差分はないと思います。

XML 1.0 仕様の「3. Logical Structures（論理構造）」に解説がありますので、そこから理解した内容を記したいと思います。認識に誤りがありましたらご指摘ください。

要素（Element）

要素の論理構造 *1 は下記の通りです。

[39] element ::= EmptyElemTag 
                 | STag content ETag [WFC: Element Type Match] 
                                     [VC: Element Valid]

ここから「要素」という用語が示すのは「空要素タグ（EmptyElemTag）」、または「開始タグ（STag）＋要素の内容（content）＋終了タグ（ETag）」ということになります。
例えば「body 要素」と言えば「<body>～</body>」全体を指します。

開始タグ（Start-tag）

開始タグの論理構造は下記の通りです。

[40] STag      ::= '<' Name (S Attribute)* S? '>' [WFC: Unique Att Spec] 
[41] Attribute ::= Name Eq AttValue [VC: Attribute Value Type] 
                                    [WFC: No External Entity References] 
                                    [WFC: No < in Attribute Values]

Name（名前）、または0個以上の属性名と属性値の対を '<' と '>' で括ったものが「開始タグ」です。「body 要素の開始タグ」と言えば「<body class="hogehoge">」を指します。

終了タグ（End-tag）

終了タグの論理構造は下記の通りです。

[42] ETag ::= '</' Name S? '>'

Name（名前）を '</' と '>' で括ったものが「終了タグ」です。「body 要素の終了タグ」と言えば「</body>」を指します。

要素の内容（Content of Elements）

要素の内容の論理構造は下記の通りです。

[43] content ::= CharData? ((element | Reference | CDSect | PI | Comment) CharData?)* /* */

ある要素の、開始タグと終了タグの間にあるテキストを、その要素の「内容」と言います。「<body>～<body>」で例えると、 "?" の部分が「body 要素の内容」となります。

空要素のためのタグ（Tags for Empty Elements）

空要素のためのタグの論理構造は下記の通りです。

[44] EmptyElemTag ::= '<' Name (S Attribute)* S? '/>' [WFC: Unique Att Spec]

Name（名前）、または0個以上の属性名と属性値の対を '<' と '/>' で括ったものが「空要素タグ（Empty-element tags）」です。「空要素タグ」は内容をもたない要素に使用することができます。
先の「要素」の論理構造より、要素は空要素タグに等しいので、「br 要素」と言えば、「<br />」全体を指します。

その他

補足として、XHTML? 1.0 The Extensible HyperText Markup Language (Second Edition)の「C. HTML Compatibility Guidelines（HTML互換性ガイドライン）」より引用しておきます（「XHTML? 1.0: 拡張可能ハイパーテキストマークアップ言語」より引用）。

C.2 空要素

たとえば <br /> や <hr />, <img src="karen.jpg" alt="Karen" /> といったように、空要素の末尾の / と > との前にスペースを1個組み込むこと。また、たとえば <br /> といったように、空要素には最小化タグ文法を使うこと。これは、XMLで許容されている代わりの文法 <br></br> は、多くの既存のユーザエージェントでは与えられる結果が一定しないからである。

C.3 要素最小化と空要素内容

内容モデルが EMPTY ではない要素に空インスタンスが与えられる場合(たとえば空のタイトルや段落)には、最小化形式は使わないこと(たとえば <p /> は使わず <p> </p> を使う)。

まとめ

用語とマークアップ例の対応は下記の通りです。赤色（または強調文字）が対応部分です。*2

  • 要素：<body>～</body>
  • 開始タグ：<body>～</body>
  • 終了タグ：<body>～</body>
  • 内容：<body>～</body>
  • 空要素タグ：<br />

上記より、「タグ」という定義には3種類しか存在ないため、「body 要素の開始タグ」や「body 開始タグ」という用い方が適切で「body タグ」や「br タグ」という使い方は（仕様的に）適切でないように思われます。

しかし日本では「ウェブサイト」を「ホームページ」と呼ぶのが一般的である（あった？）ように、「要素」や「内容」の代わりに「タグ」を用いるのが定着した用法になってしまっています。
それは、google サジェストやキーワードアドバイスツールで「XHTML」を入力すると「タグ」が上位に表示されることからも明らかです。また「はてなダイアリー：キーワード：タグ」には「開始タグと終了タグをまとめて『タグ』と呼ぶ」と書かれています。たしかにそういう意味合いで使われているケースが多いのではないでしょうか。

このエントリーではそこに言及するつもりはありません。少なくとも私自身が過去の記事や初心者の方からの質問の回答で「タグ」を多用しています（「開始タグ・終了タグ」は最近使うようになりました）ので、まずは今回勉強した内容を記事に活かせるよう、気をつけたいと思います。

*1：論理構造の記法にはBNF（バッカス・ナウア記法）が使用されています。詳細は「BNF記法入門（1） ─XML関連仕様を読むために─」が参考になるでしょう。

*2：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。赤色部分が二重下線で表示されます（IEではグレースケール表示になります）。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


コメント

「終了タグ（End-tag）」の説明中、
「'/<' と '>' で括ったものが」は、「'</' と '>' で括ったものが」ではないかと思います。

[1] Posted by クリボウ : May 17, 2007 1:29 AM

＞クリボウさん
こんにちは。
ご指摘ありがとうございました！

[2] Posted by yujiro : May 17, 2007 9:21 AM

随分前の記事なのでどうしようかと思ったのですが。
空要素タグが空タグではない、と言うのは、SGMLには空タグと言うタグがあるからです。空開始タグと空終了タグがあります。
<:>:、<:/>:と書きます。
つまり、空タグと言うタグが別に存在するので、空要素タグを空タグと呼ぶのは不適切なんです。

[3] Posted by さとし : July 8, 2011 7:30 PM

すんません、打ち間違えました。
空タグは <> </> です。

[4] Posted by さとし : July 8, 2011 7:37 PM

＞さとしさん
こんばんは。
頂いたコメントについては以前も同様の主旨のコメントを頂いており、私もさとしさんと同じ認識（<></>が空タグ）なのですが、私が誤認識していると思わせてしまっている記載等がありましたら申し訳ありませんが具体的な修正箇所をお知らせ願えますでしょうか。
それではよろしくお願い致します。

[5] Posted by yujiro logo : July 8, 2011 11:51 PM
コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）