本文へスキップ
BecomeCoder

XMLコース · 第2章 属性とテキスト · レッスン5

テキストと空要素 ― 中身がないタグの書き方

ブラウザで完結

導入

要素の中身がテキストのときはそのまま書けますが、中身が何もない要素 もよくあります(区切り線、改行、属性だけで意味が完結するものなど)。空の要素には便利な短い書き方があります。

説明

中身が空の要素は、本来なら開始タグと終了タグを続けて書きます。

<line></line>

これを 1つのタグにまとめて 書けます。閉じ > の直前にスラッシュ / を置く形で、これを 空要素タグ(self-closing tag) と呼びます。

<line />

<line></line><line /> はまったく同じ意味です。属性を持つ空要素も、この形をよく使います。

<book id="b001" />
<img src="cat.png" alt="猫" />
<br />

HTMLとの違いに注意 HTML では <br><img src="..."> のように、閉じスラッシュなしで書くことが許されます。しかし XML では必ず閉じる 必要があり、<br> だけでは違反です。<br /> または <br></br> と書きましょう。「XMLではすべてのタグを閉じる」が鉄則です。

要素の中身についても補足します。要素はテキストと子要素を 混在 させることもできます(これを混在内容と呼びます)。

<p>これは<em>とても</em>重要です。</p>

ただしデータ交換用のXMLでは、混在させず「テキストだけ」か「子要素だけ」に分けたほうが扱いやすくなります。

やってみよう

<something /> という空要素の形を覚えましょう。そして「XMLではどんなタグも必ず閉じる(空要素は /> で閉じる)」を、この章の締めくくりとして頭に刻んでおきましょう。次章では、XML宣言・コメント・特殊文字といった「記法まわり」の細部を学びます。

実際に動かしてみよう

下のエディタに XML を書くと、右側にその場で「整形式(well-formed)かどうかの判定」と「木構造ツリー」が表示されます(ブラウザ標準のXMLパーサを使うので、タグの閉じ忘れ・大文字小文字違い・ルート要素が2つ・入れ子の交差などは本物どおりエラーになります)。下の XPath 欄に式(例 `//title`)を入れると、一致したノードを一覧できます。本文の例を打ち込んだり書き換えたりして確かめましょう。

XML — 整形式チェック & 木構造プレビュー

書いた XML をその場で解析し、整形式(well-formed)かどうかの判定・木構造ツリー・XPath検索を表示する学習用ウィジェットを読み込みます(ブラウザ標準のXMLパーサ/XPathを使うため外部依存なし・軽量です)。
スクロールして表示された時点でも自動で読み込まれます。