本文へスキップ
BecomeCoder

XMLコース · 第1章 XMLをはじめる · レッスン2

要素とタグ ― `<開始>中身</終了>` が基本形

ブラウザで完結

導入

XML のいちばん小さな部品は 要素(element) です。要素は「開始タグ」「中身」「終了タグ」の3点セットでできています。この形さえ押さえれば、XML の半分は理解したようなものです。

説明

要素の基本形は次のとおりです。

<title>吾輩は猫である</title>

分解すると次の3つです。

部分説明
開始タグ<title>ここから要素が始まる
内容(テキスト)吾輩は猫である要素が持つ中身
終了タグ</title>ここで要素が終わる。名前の前に /

大事なルールは 「開始タグには必ず対応する終了タグが要る」 ことです。終了タグはスラッシュ / が付くだけで、名前は開始タグとまったく同じでなければなりません。

<price>500</price>     <!-- OK:開始と終了が対応している -->
<price>500             <!-- NG:終了タグ </price> がない -->
<price>500</Price>     <!-- NG:大文字小文字が違う(別のタグ扱い) -->

XML は 大文字と小文字を区別 します。<Price><price> は別物なので、開始と終了で綴りを揃えましょう。

タグ名の付け方にもいくつか約束があります。

  • 使えるのは英数字・ハイフン -・アンダースコア _・ピリオド . など。先頭は英字か _(数字や記号で始めない)。
  • 空白は使えない<user name> はダメ。<user-name><userName> にする)。
  • xml で始まる名前は予約されているので避けます。

やってみよう

<○○>中身</○○> という3点セットを、頭の中で何度か書いてみましょう。次のレッスンでは、この要素を 入れ子 にして、より複雑なデータを表す方法を学びます。

実際に動かしてみよう

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

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

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