TopWebウェブスタンダード > 2007年5月
2007年5月17日

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

May 17,2007 12:10 AM
Tag:[, , ]
Permalink

先日公開した 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ではグレースケール表示になります)。

Comments [5] | Trackbacks [0]
2007年5月14日

XHTMLタグ一覧表示ツール

May 14,2007 1:50 AM
Tag:[, , ]
Permalink

XHTMLタグを書く時の参考用ドキュメントとして、シンプルなツールを作ってみました。

XHTMLタグ一覧表示ツール

XHTML 1.0 Transitional/XHTML 1.0 Strict/XHTML 1.1に対応しています。

1.使い方

ページに表示されている要素(タグ)をクリック(またはマウスオーバー)すると、その下にクリックした要素の子要素と親要素、および属性を表示します。

例えば、「XHTML 1.1」の「table」を選択すると次のように「Markup(マークアップ)」「Contents(要素内に記述可能な要素またはコンテンツ)」「Parents(記述可能な親要素)」がそれぞれ表示されます。

XHTMLタグ一覧表示ツール

クリックで表示するか、マウスオーバーで表示するかは次のラジオボタンで選択してください。

XHTMLタグ一覧表示ツール

ラジオボタン右にある「属性表示」をチェックすれば、記述可能な属性もあわせて表示します。

XHTMLタグ一覧表示ツール

2.注意事項

要素自体の意味や具体的な使い方については一切触れていないので、他のサイトや書籍などで調べてください。

ただし、XHTML初心者の方向けに、ページ一番下にXHTMLの規則については列挙していますので、参考になれば幸いです。

XHTMLタグ一覧表示ツール

なお、HTML5のルールはXHTMLとは異なるので注意してください。

2012.09.22
本文を見直しました。

Comments [2] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3