XMLのイメージを掴む

# はじめに

聞いたことあるけど使ったことない、詳しく知らないでおなじみ XML について
HTMLとの比較を通してイメージを掴んでいこうと思います。

# 目的の違い

https://aws.amazon.com/jp/compare/the-difference-between-html-and-xml/

> |          | HTML                                     | XML                                                     |
> | -------- | ---------------------------------------- | ------------------------------------------------------- |
> | 内容       | 主に構造化されたコンテンツをブラウザで表示するために使用されるマークアップ言語。 | 主にコンピュータシステム間で構造化データを交換するために使用されるマークアップ言語。              |
> | リリースされた年 | 1993 年                                   | 1998 年                                                  |
> | 目的       | プレゼンテーション言語                              | データ交換言語                                                 |
> | 使用すべき場合  | クライアント側のウェブページまたはウェブアプリの構築               | 2 つのシステム間におけるデータの交換 (ただし、JSON の方が適し他形式でないかどうかを確認してください) |
> | タグ       | 事前定義済みのタグ                                | 拡張可能なタグ                                                 |
> | 入力       | 動的                                       | XML スキーマを使用する際に修正                                       |

※コメントにて年の間違いをご指摘いただきました。現在は修正済みです。
詳しくは以下の記事をご覧ください

https://qiita.com/juner/items/7fd009e350bbabf975f7?utm_campaign=email&utm_content=link&utm_medium=email&utm_source=public_mention

HTMLは「プレゼンテーション言語」
XMLは「データ交換言語」
正式な名称ではないですが、わかりやすい名称です。特にHTML。

HTMLはプレゼンテーション = 表示 が目的、
XMLはデータ交換 = データに意味をつけ整理・保存・受け渡しが目的のようです。

※使用法に寄った解釈です。HTMLは「ページの構造を定義する」「ハイパーテキスト = 文書同士を関連付ける」ことも目的と言えるでしょうし、XMLも同様に他の目的があると言えるでしょう。
# 構文の違い

XMLとHTMLは違うんだなあと実感することを目的に、違いをいくつかピックアップします。
## 大文字と小文字

| 言語   | 特徴            |
| ---- | ------------- |
| XML  | 大文字と小文字を区別する  |
| HTML | 大文字と小文字を区別しない |

https://docs.oracle.com/cd/E19957-01/820-4821/adcfp/index.html#:~:text=XML%20%E5%B1%9E%E6%80%A7%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB%E3%81%AF%E3%80%81HTML%20%E3%81%AE%E5%B1%9E%E6%80%A7%E3%83%AB%E3%83%BC%E3%83%AB%E3%81%AB%E4%BC%BC%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%E9%81%95%E3%81%84%E3%81%AF%E3%80%81XML%20%E3%81%AE%E5%B1%9E%E6%80%A7%E3%83%AB%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%AF%E5%A4%A7%E6%96%87%E5%AD%97%E3%81%A8%E5%B0%8F%E6%96%87%E5%AD%97%E3%81%8C%E5%8C%BA%E5%88%A5%E3%81%95%E3%82%8C%E3%80%81HTML%20%E3%81%AE%E5%B1%9E%E6%80%A7%E3%83%AB%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%AF%E5%8C%BA%E5%88%A5%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%81%A7%E3%81%99%E3%80%82%E3%81%93%E3%82%8C%E3%81%AF%E3%80%81XML%20%E3%81%A7%E3%81%AF%E5%A4%A7%E6%96%87%E5%AD%97%E3%81%A8%E5%B0%8F%E6%96%87%E5%AD%97%E3%81%8C%E5%8C%BA%E5%88%A5%E3%81%95%E3%82%8C%E3%80%81HTML%20%E3%81%A7%E3%81%AF%E5%8C%BA%E5%88%A5%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E3%81%9F%E3%82%81%E3%81%A7%E3%81%99%E3%80%82

### HTMLのタグが大文字・小文字を区別しない例
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PovqbyV" data-user="Kohki-Takatama" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Kohki-Takatama/pen/PovqbyV">
  Untitled</a> by Kohki_Takatama (<a href="https://codepen.io/Kohki-Takatama">@Kohki-Takatama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## タグ

| 言語   | 特徴                |
| ---- | ----------------- |
| XML  | カスタムタグを作成し記述する    |
| HTML | 事前定義されたタグを使用し記述する |
## HTML 事前定義されたタグの例

```html
<html>
  <body>
   <p>p tag</p>
 </body>
</html>
```

`<html>` / `<body>` / `<p>` など、どれも「事前定義」されており、タグを自作することはできません。
## XML カスタムタグの例

```xml
<bookstore>
  <book category="children">
    <title>Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="web">
    <title>Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>
```

これらのタグは、本のカタログに関する情報を構造化して記述するために作られています。
特別な宣言は必要なく、記述した段階でタグとして認識されるようです。

また、一定の規則に従って記述したい場合、「DTD」「XML Schema」を使用することで文書が定義に従っているかのチェックができるようです。

https://www.w3schools.com/xml/xml_dtd.asp


https://www.w3schools.com/xml/xml_schema.asp

## 空要素の終了タグ

空要素とは、子要素を持たない要素です。

https://developer.mozilla.org/ja/docs/Glossary/Void_element

HTMLの `<br>` `<img>` などが当てはまります。

| 言語   | 特徴                        |
| ---- | ------------------------- |
| XML  | `<br></br>`・`<br />`の記述が可能。`<br>`単体は不可 |
| HTML | `<br></br>`の記述は不可。`<br />`・`<br>`の記述は可能               |
# 共通点

最後に、重要な共通点である「マークアップ言語」について終わろうと思います。
## マークアップ言語

マークアップとは？

> データ単位ごとにデータをタグ付けしていくことをマークアップすると言います。マークアップすることで各データの「意味」を記載しておくことができます。

https://xtech.nikkei.com/it/article/COLUMN/20060929/249415/

HTMLの目的は「表示」、XMLの目的は「データの整理・保存・受け渡し」でした。
どちらも、データ（テキストなど）にタグ付けをして、その意味を記載しています。

```html
<!--
「よくわかるHTML」というテキストは、
h1 = 最も強調すべき見出し（= タイトル）であると「マークアップ」している
-->
<h1>よくわかるHTML</h1>
```

```xml
<!--
「Learning XML」はタイトルであると「マークアップ」している
また、これらのテキストは book に関するものであると「マークアップ」している
-->
<book>
  <title>Learning XML</title>
  <author>Erik T. Ray</author>
  <year>2003</year>
  <price>39.95</price>
</book>
```

# 参考

[Amazon.co.jp: できるポケット Web制作必携 HTML&CSS全事典 改訂3版 できるポケットシリーズ eBook : 加藤善規, できるシリーズ編集部: Kindleストア](https://amzn.asia/d/3iM1bup)