マークアップ言語

マークアップ言語とは

私たちが普段見ているWebページには、見出し・本文・リンクなど、さまざまな要素が含まれています。これらの要素を「ここは見出し」「ここは段落」「ここはリンク」と区別するために使われるのがマークアップ言語です。

マークアップ言語とは、文書の構造や意味をタグと呼ばれる目印を使って表現する言語のことです。「マークアップ（markup）」とは、もともと原稿に赤字で指示を書き込む校正作業を意味しており、文書に「ここはこういう役割ですよ」という印をつけるイメージです。

マークアップ言語はプログラム言語とは異なり、計算や条件分岐などの処理を行うものではありません。あくまで「文書の構造を記述する」ためのものです。

タグの仕組み

マークアップ言語の基本的な仕組みがタグです。タグは < > で囲まれた目印で、文書中のテキストに意味や役割を与えます。

タグは通常、開始タグと終了タグのペアで使います。

<タグ名>内容</タグ名>

たとえば、「こんにちは」というテキストを見出しとして表現したい場合は、次のように書きます。

<h1>こんにちは</h1>

<h1> が開始タグ、</h1> が終了タグです。終了タグにはタグ名の前に /（スラッシュ）がつきます。この開始タグから終了タグまでのまとまりを要素と呼びます。

試験で出るポイント

タグは <タグ名> で始まり </タグ名> で終わるという基本形式を押さえておきましょう。マークアップ言語の最も基本的な仕組みです。

SGML ── マークアップ言語の元祖

SGML（Standard Generalized Markup Language）は、文書の構造を定義するために1986年に国際規格として策定されたマークアップ言語です。日本語では「標準汎用マークアップ言語」と訳されます。

SGMLは非常に高機能で柔軟性が高い反面、仕様が複雑で扱いが難しいという欠点がありました。そこで、SGMLをもとにして、目的を絞って使いやすくした言語が後に生まれました。それがHTMLとXMLです。

つまり、SGMLはHTMLやXMLの基盤（ルーツ）となった言語であり、マークアップ言語の「元祖」にあたる存在です。

HTML ── Webページを記述する言語

HTML（Hyper Text Markup Language）は、Webページの構造を記述するためのマークアップ言語です。私たちが日常的にブラウザで閲覧しているWebページは、ほぼすべてHTMLで書かれています。

「Hyper Text」とは、リンクによって別の文書に飛べるテキストのことです。HTMLは、文書同士をリンクでつなぎ合わせる仕組みを持っていることが大きな特徴です。

HTMLの代表的なタグ

HTMLには、あらかじめ用途が決められたタグが多数用意されています。代表的なものを見てみましょう。

タグ	役割	使用例
`<h1>` 〜 `<h6>`	見出し（h1が最も大きい）	`<h1>ページタイトル</h1>`
`<p>`	段落（パラグラフ）	`<p>本文のテキスト</p>`
`<a>`	ハイパーリンク	`<a href="URL">リンク文字</a>`
`<img>`	画像の表示	`<img src="画像ファイル名">`
`<ul>`, `<li>`	箇条書きリスト	`<ul><li>項目1</li></ul>`

HTMLの記述例

簡単なHTMLファイルの例を見てみましょう。

<html>
  <head>
    <title>自己紹介ページ</title>
  </head>
  <body>
    <h1>はじめまして</h1>
    <p>ITパスポートの勉強をしています。</p>
    <a href="https://example.com">参考サイトはこちら</a>
  </body>
</html>

<head> にはページのタイトルなどの情報を、<body> には実際に画面に表示される内容を記述します。HTMLでは、使えるタグの種類があらかじめ決まっており、独自のタグを作ることはできません。

XML ── データの構造を自由に定義できる言語

XML（Extensible Markup Language）は、データの構造や意味を記述するためのマークアップ言語です。「Extensible（拡張可能な）」という名前のとおり、HTMLと違って独自のタグを自由に定義できることが最大の特徴です。

XMLはWebページの見た目を表現するためのものではなく、データそのものの構造を表現するために使われます。異なるシステム間でデータをやり取りするときに、データの意味と構造を明確にする役割を果たします。

XMLの記述例

たとえば、書籍の情報をXMLで表現すると次のようになります。

<書籍リスト>
  <書籍>
    <タイトル>ITパスポート合格教本</タイトル>
    <著者>情報太郎</著者>
    <価格>1500</価格>
  </書籍>
  <書籍>
    <タイトル>基本情報技術者テキスト</タイトル>
    <著者>技術花子</著者>
    <価格>2000</価格>
  </書籍>
</書籍リスト>

<書籍> や <タイトル> といったタグはHTMLにはない独自のタグです。XMLでは、データの内容に合わせて自由にタグ名を決められるため、どのようなデータでも構造的に表現できます。

試験で出るポイント

XMLの最大の特徴は「独自のタグを定義できる」ことです。HTMLとの違いを問う問題では、この点が解答のカギになります。

HTMLとXMLの比較

HTMLとXMLはどちらもタグを使ったマークアップ言語ですが、目的や特徴が大きく異なります。

比較項目	HTML	XML
正式名称	Hyper Text Markup Language	Extensible Markup Language
主な目的	Webページの構造と表示	データの構造と意味の記述
タグの自由度	あらかじめ決められたタグのみ	独自のタグを自由に定義できる
主な用途	Webサイトの作成	異なるシステム間のデータ交換
ルーツ	SGMLを簡略化して策定	SGMLを簡略化して策定

CSVとXMLの違い

データを表現する形式には、XMLのほかにCSV（Comma Separated Values）もあります。CSVはデータをコンマ（,）で区切って並べるシンプルな形式です。

たとえば、同じ書籍データをCSVで表現すると次のようになります。

ITパスポート合格教本,情報太郎,1500
基本情報技術者テキスト,技術花子,2000

CSVは軽量で扱いやすい反面、データの意味（どの値がタイトルで、どの値が著者なのか）がファイルの中身だけではわかりにくいという欠点があります。一方、XMLではタグによってデータの意味が明示されるため、初めて見る人やシステムでも内容を理解しやすくなります。

試験で出るポイント

CSVは「コンマ区切りでデータを並べる形式」、XMLは「タグでデータの構造と意味を記述する形式」です。過去問（2022年問88）でも両者の違いが出題されています。データに意味を持たせられるかどうかが大きな違いです。

まとめ

マークアップ言語は、文書やデータの構造をタグで表現する言語です。SGMLを元祖として、Webページの記述に特化したHTMLと、データの構造を自由に定義できるXMLが生まれました。ITパスポート試験では、それぞれの特徴と違いを正確に理解しておくことが大切です。