HTML と XML はどのように異なりますか?


AWS アカウントを今すぐ無料で作成
AWS での無料のデベロッパーツールサービス
クラウドのデベロッパーツールサービスの無料オファーを見る
デベロッパーツールサービスを確認する
極めて包括的な一連のデベロッパーツールサービスでイノベーションを加速する
デベロッパーツールのトレーニングを閲覧する
AWS のエキスパートによって作成されたコンテンツを使用して、デベロッパーツールのトレーニングを開始する
デベロッパーツールのブログを読む
最新の AWS デベロッパーツール製品ニュースとベストプラクティスについて読む
HTML と XML はどのように異なりますか? HTML と XML にはどのような類似点がありますか? 主な構文の相違点: HTML とXML その他の主な相違点: HTML とXML HTML と XML を使用すべき場合 HTML と XML を一緒に使用する方法 主な相違点のまとめ: HTML とXML AWS はお客様の HTML と XML の要件をどのようにサポートできますか?

HTML と XML はどのように異なりますか?

HTML と XML は、アプリケーション開発とウェブ開発で広く使用されている 2 つのマークアップ言語です。名前は似ていますが、ユースケースは異なります。HTML は主にアプリケーションの UI の開発に使用されます。HTML は、ウェブサイトやアプリケーションで表示されるテキスト、画像、ボタン、チェックボックス、ドロップダウンボックスをレンダリングします。これとは異なり、XML の主な目的はデータの交換と転送です。XML は、機械と人間の両方が読み取れる形式でデータをエンコードします。XML はデータが何であるかを記述し、HTML はエンドユーザーに対するデータの表示方法を決定します。

XML について読む »

HTML と XML にはどのような類似点がありますか?

XML と HTML は両方とも、LaTeX、SVG、Markdown、SGML などの他の言語とともに、マークアップ言語と呼ばれるプログラミング言語のファミリーに属しています。

マークアップ言語は、人間と他のソフトウェアプログラムの両方が理解できるデータを記述するための体系です。データの構造、タイプ、属性、各部の間の関係、表示、意味を定義する読みやすい構文を使用します。 

マークアップ言語として、HTML と XML にはいくつかの類似点があります。

Syntax

通常、マークアップ言語の構文 (タグや属性を含む) は類似しています。

タグ

タグは、括弧、カンマ、ピリオドなどの記号によって示されます。データの要素に対して、構造やタイプを提供します。コンテンツの各要素の開始と終了を定義します。XML と HTML では、タグは山括弧で囲まれ、各要素は開始タグと終了タグという 2 つのタグの間にあります。

属性

属性は、画像 URL など、要素に関する詳細情報を提供します。HTML と XML では、開始タグ内で要素の属性を定義します。

明確に定義された構造

HTML ドキュメントと XML ドキュメントは両方とも、適切に処理されるためには、指定された言語の構文規則に従う必要があります。規則に従っているドキュメントは、整形式の文書と呼ばれます。整形式の文書は、次の要件を満たす必要があります。

  1. 単一のルート要素
  2. すべての要素のクロージング (またはセルフクロージング) タグ
  3. タグが他のタグ内で囲まれている状態での正しいネスティング
  4. 特殊文字の正しい記述 (& 記号を表すための & など)

デベロッパーは、テキストエディタアプリケーションまたは統合開発環境 (IDE) を使用して構文を記述および確認します。

IDE について読む »

使用状況

通常、デベロッパーは HTML や XML マークアップ言語を単独で使用することはありません。これらの言語をスクリプト言語と組み合わせて、動的なウェブページやアプリケーションを作成します。動的なアプリケーションは、新しい着信データによって変化します。

HTML の場合、アプリケーションページは、新たな HTML を生成するスクリプト言語を通じて動的となります。XML の場合、スクリプト言語は新しい情報を使用してパラメータを更新します。

プラットフォームの独立性

プラットフォームの独立性とは、言語を変更することなく、さまざまなオペレーティングシステムやプラットフォームで動作できることをいいます。XML と HTML は両方ともテキストベースで、シンプルな構文を使用します。これにより、さまざまなソフトウェアアプリケーションやオペレーティングシステムで XML や HTML を簡単に解釈できます。XML および HTML コードは、ブラウザやさまざまなモバイルプラットフォーム全体でそのまま機能します。

主な構文の相違点: HTML とXML

HTML と XML の主な相違点はタグにあります。HTML には、誰もが使用しなければならない事前定義済みのタグがあります。HTML を記述する際に、独自のタグを作ることはできません。これとは異なり、XML は、ドキュメントの作成者として定義できるカスタムタグを使用します。

次に、HTML と XML のタグの違いについて詳しく説明します。

事前定義済みのタグ

HTML には、事前定義済みのタグがあります。つまり、タグ自体は HTML 標準によって定義されたセットリストからのものです。現在の HTML 標準は HTML5 です。 

HTML5 の事前定義済みのタグの例は次のとおりです。

  • <header>: ドキュメントのヘッダーのタグ
  • <p>: 段落のタグ
  • <h1>～<h6>: 6 つのレベルの見出しのタグ
  • <a>: ハイパーリンクのタグ
  • <img>: 画像のタグ
  • <div>: 他の要素をグループ化するためのコンテナ要素のタグ
  • <body>: 主なコンテンツを定義するタグ

これとは異なり、XML のタグは拡張可能です。つまり、タグはドキュメントの目的に合わせてカスタムメイドされます。ドキュメントの作成者は、タグと属性を定義します。文字と数字を任意に組み合わせることができます。

通常、ドキュメントの作成者は、データを説明する平易な言葉を使用します。ドキュメントを検証し、共通の理解を持つために、タグと属性を定義する XML スキーマを記述する必要があります。

次の表に、HTML 構文と XML 構文の例をいくつか示します。

HTML

XML

<p class="body_paragraph">これは段落です</p>

class= は、スタイルを適用するために使用できるクラス属性 body_paragraph が要素に含まれていることを意味します。

<country language="English">カナダ</country>

country は国の要素を意味します。language は、要素に言語属性 (英語) があることを意味します。

<body>

<h1>これは見出しです</h1>

<p class="body_paragraph">これは段落です</p>

<div>

<h2>これは小見出しです</h2>

<p>これは別の段落です</p>

</div>

</body>

<continent name="Europe">

<country language="English">

英国

<currency>GBP</currency>

</country>

<country language="German">

ドイツ

<currency>EUR</currency>

</country>

</continent>

セルフクロージングタグ

HTML では、コンテンツが不足している場合、一部の要素ではセルフクロージングタグ (クロージングフォワードスラッシュで表されます) が用いられることがあります。セルフクロージングタグを使用できる HTML タグの数は限られています。

これとは異なり、XML のセルフクロージングタグは、コンテンツがない場所であればどこにでも存在できます。

HTML

XML

<img src="my_image.jpg" alt="My image" />

<country name="United Kingdom" currency="GBP" />

その他の主な相違点: HTML とXML

XML と HTML は類似していますが、いくつかの点で異なります。

目的

HTML は一般的にウェブの言語として知られています。HTML の主な目的は、テキストベースのドキュメントで指定されたコンテンツを、グラフィカルな形式でブラウザに表示することです。

これとは異なり、XML を使用すると、さまざまなアプリケーションで、広く理解されている方法を用いて、データとその構造を交換および保存できます。XML の主な目的は、データベースなどのさまざまなタイプのアプリケーションが、同じデータとその構造を理解して使用できるようにすることです。 

入力

HTML は動的入力を使用します。動的入力では、想定されるデータ型に照らして、属性タイプが実行時にチェックされます。例えば、属性が数値であることが想定されているにもかかわらず文字列として入力された場合、エラーやウェブページの想定外の動作が実行時に発生する可能性があります。動的入力により、新しい着信データを使用してウェブページに変更を加えることができます。

これとは異なり、XML は静的入力を使用します。静的入力では、属性タイプは XML スキーマで事前に定義され、コンパイルまたは処理の前にチェックされます。静的入力ではエラーが少なくなりますが、動的コンテンツも少なくなります。

スキーマ

文書型定義 (DTD) またはスキーマは、類似のドキュメント向けに、検証したり、繰り返したりできる構造を提供します。通常、次のような情報が含まれます。

  • 使用されている HTML または XML バージョン
  • 使用できる要素と属性
  • ドキュメントの構造と要素の関係に関する規則

HTML では、DTD は HTML ドキュメントの冒頭に含まれる宣言です。

XML では、DTD は別のファイルです。XML タグはドキュメントの作成者によって定義されるため、XML では DTD はより重要です。DTD は、データの送信者と受信者の間において、タグに関する共通の理解を持つのに役立ちます。

HTML と XML を使用すべき場合

HTML は、プレゼンテーション言語として知られるマークアップの一種です。プレゼンテーション言語という名前は、表示を目的としていることから来ています。HTML を使用してウェブページとクライアント側のウェブアプリケーションを作成します。通常、スタイルを設定する場合は Cascading Style Sheets (CSS) と組み合わせ、動的な動作を実現する場合は JavaScript プログラミング言語と組み合わせます。

これとは異なり、2 つのアプリケーションまたはシステム間のデータ交換には XML を使用します。同じ形式を理解するために、アプリケーションは XML ファイルの内容を定義する共有 XML スキーマを備えています。

XML が今でも広く使用されている一方で、データ交換のためのもう 1 つの軽量なマークアップ言語である JSON は、その高速な解析機能により、現在人気を博しています。最適なデータ交換形式を選択できるよう、JSON と XML の比較をご参照ください。

HTML と XML を一緒に使用する方法

XML を HTML に埋め込み、JavaScript プログラミング言語で解析して、動的なウェブページを作成できます。同様に、必要に応じて、プレーンテキストの文字データ (CDATA) を使用して HTML を XML に埋め込むこともできます。以下の例をご覧ください。

HTML 形式の XML

XML 形式の HTML

<html>

  <head>

    <title>埋め込み XML ページ</title>

    <script type="text/xml">

      <data>

        <item>

          <name>リンゴ</name>

          <price>1.00</price>

        </item>

        <item>

          <name>パッションフルーツ</name>

          <price>2.00</price>

        </item>

      </data>

    </script>

  </head>

  <body>

    <h1>フルーツの動的な価格</h1>

    <div id="output"></div>

    <script>

      var xml = document.querySelector('script[type="text/xml"]').textContent;

      var parser = new DOMParser();

      var doc = parser.parseFromString(xml, "text/xml");

      var output = document.querySelector('#output');

      var items = doc.getElementsByTagName('item');

      for (var i = 0; i < items.length; i++) {

        var item = items[i];

        var name = item.getElementsByTagName('name')[0].textContent;

        var price = item.getElementsByTagName('price')[0].textContent;

        output.innerHTML += '<div><strong>' + name + '</strong>: ' + price + '</div>';

      }

    </script>

  </body>

</html>

<embeddedHTML>

    <title>XML 形式で埋め込まれた HTML コード</title>

    <description><![CDATA[

        <div>

            <h1>埋め込み HTML ヘッダー</h1>

            <p>埋め込み HTML 段落。</p>

        </div>

    ]]></description>

</embeddedHTML>

Extensible HyperText Markup Language (XHTML) は、構文で HTML と XML の両方を組み合わせたもう 1 つのマークアップ言語です。

主な相違点のまとめ: HTML とXML

 

HTML

XML

内容

主に構造化されたコンテンツをブラウザで表示するために使用されるマークアップ言語。

主にコンピュータシステム間で構造化データを交換するために使用されるマークアップ言語。

リリースされた年

1998 年

1993 年

目的

プレゼンテーション言語

データ交換言語

使用すべき場合

クライアント側のウェブページまたはウェブアプリの構築

2 つのシステム間におけるデータの交換 (ただし、JSON の方が適し他形式でないかどうかを確認してください)

タグ

事前定義済みのタグ

拡張可能なタグ

入力

動的

XML スキーマを使用する際に修正

AWS はお客様の HTML と XML の要件をどのようにサポートできますか?

Amazon Web Services (AWS) のすべてのデータ統合サービスは XML ファイルを処理できます。次に 2 つの例を示します。

  • AWS Glue はサーバーレスのデータ統合サービスです。これを利用することで、コードを記述することなく、ポイントアンドクリックのインタラクティブなビジュアルインターフェイスを使用してデータを準備できます。AWS Glue DataBrew は、XML を含むすべてのタイプのファイル形式を入力できます。
  • Amazon Simple Queue Service (Amazon SQS) は、その量を問わず、ソフトウェアコンポーネント間でメッセージを送信、保存、受信するために利用できるフルマネージドメッセージキューサービスです。Amazon SQS のメッセージには、XML、JSON、フォーマットされていないデータなど、最大 256 KB のテキストデータを含めることができます。

同様に、AWS は、アプリケーションを大規模に開発、デプロイ、運用するための幅広いツールやサービスを提供しています。例えば、次の 2 つのサービスを利用できます。

  • AWS Amplify Studio を利用すると、ピクセルパーフェクトな UI を視覚的に構築できます。数回クリックするだけで、フロントエンド UI をクラウドバックエンドに接続できます。
  • Amazon Lightsail を利用すると、事前設定された開発スタックを使用して、わずか数回クリックするだけで、カスタムアプリケーションやウェブサイトを作成できます。

今すぐアカウントを作成して、AWS でアプリケーション開発を開始しましょう。

AWS での次のステップ

HTML の使用を開始する方法 

XML の使用を開始する方法