マークアップ言語とは、文書やデータの構造と意味を、タグや記号で示すための記述ルールです。
Webページを組み立てるHTML、構造化したデータを表すXML、読みやすい記号で文書を書くMarkdownなどがあり、目的に応じて使い分けます。
ここでは、それぞれの役割と基本的な書き方を具体例で整理します。
マークアップ言語が表すもの
マークアップは、文章の一部に「これは見出し」「これは段落」「これはリンク」といった役割を与える操作です。
HTMLやXMLでは主に山括弧で囲んだタグを使い、Markdownでは見出しを表す # などの記号を使います。
見た目だけを変えるのではなく、情報同士の関係を明示する点がマークアップの役割です。
プログラミング言語との違い
マークアップ言語は文書やデータの構造を記述するのに対し、JavaScriptやPythonのようなプログラミング言語は処理の手順や動作を記述します。
たとえば、HTMLはボタンや文章をページ上に配置し、JavaScriptはボタンを押したときの動作を指定します。
Web制作では、HTMLが構造、CSSが見た目、JavaScriptが動作を担当するという整理から始めると、役割の違いを理解しやすくなります。
HTML、XML、Markdownの違い
| 種類 | 主な用途 | 記述の特徴 |
|---|---|---|
| HTML | Webページの構造 | 決められたタグで見出し、段落、リンクなどを表す |
| XML | 構造化したデータの保存や交換 | 用途に合わせてタグ名を定義できる |
| Markdown | ブログや技術文書の作成 | 少ない記号で見出し、箇条書き、強調などを表す |
HTMLはWebページの構造を作る
HTML（HyperText Markup Language）は、Webページの見出し、段落、リンク、画像、表などに役割を与えます。
<article>
<h2>マークアップ言語の基本</h2>
<p>HTMLはWebページの構造を表します。</p>
</article>この例では、<article> がひとまとまりの記事、<h2> が見出し、<p> が段落であることを示しています。
HTMLだけで見た目や動作のすべてを決めるのではなく、必要に応じてCSSやJavaScriptと組み合わせます。
XMLはデータの構造を表す
XML（eXtensible Markup Language）は、データを項目ごとに整理して保存したり、別のシステムへ渡したりするときに使います。
<book>
<title>XMLの基本</title>
<author>山田太郎</author>
<price>2500</price>
</book><title>、<author>、<price> というタグ名から、各データの意味を読み取れます。
HTMLとは異なり、XMLでは扱うデータに合わせてタグ名を定義できます。
Markdownは文章を簡潔に記述する
Markdownは、記号を使って見出しや箇条書き、強調を表す軽量マークアップ言語です。
# 見出し
- 箇条書き1
- 箇条書き2
**強調する語句**元のテキストをそのまま読んでも構造を把握しやすく、HTMLへ変換して公開することもできます。
見出し、リンク、画像、表を含む具体的な書き方は、アクセシブルなMarkdownの基本記法と実践例で確認できます。
目的に合う言語の選び方
用途を先に決めると、三つの言語を選び分けやすくなります。
- Webページを作る場合：HTMLでページの構造を記述します。
- 項目の意味を保ったままデータを保存、交換する場合：XMLでデータを構造化します。
- ブログ、README、技術文書を手早く書く場合：Markdownで読みやすい原稿を作ります。
同じ制作物の中で複数の言語を組み合わせることもあります。
たとえば、Markdownで書いた文書をHTMLへ変換し、Webページとして公開できます。
マークアップとWebアクセシビリティ
HTMLで内容の役割を正しく示すと、見た目だけではなく、文書の構造も伝えやすくなります。
たとえば、見出しを単に大きな文字として表示するのではなく、<h2> や <h3> で階層を示せば、見出しとして扱える構造になります。
<header> や <nav> など、内容の役割を表す要素はセマンティックHTMLと呼ばれます。
HTMLだけでは役割や状態を十分に表せない複雑なインターフェースでは、WAI-ARIAを補助的に使います。
セマンティックHTMLとWAI-ARIAの関係は、HTML、ARIA、テストで支えるWebアクセシビリティで詳しく整理しています。
構造を伝えるための確認項目
- 見出しを内容の階層に沿って並べる
- 箇条書きは
<ul>または<ol>で表す - リンクには移動先が分かる文言を付ける
- 表には見出しセルを設け、行や列との関係を示す
- MarkdownをHTMLへ変換した後も、見出しやリンクの構造を確認する
マークアップ言語の基本を振り返る
- マークアップ言語は、文書やデータの構造と意味をタグや記号で表します。
- HTMLはWebページ、XMLは構造化データ、Markdownは読みやすい文書の作成に向いています。
- 処理や動作を記述するプログラミング言語とは役割が異なります。
- HTMLでは見た目だけでなく、内容の役割が伝わる要素を選ぶことがアクセシビリティにつながります。
まずは用途を一つ選び、短い例を書いて構造がどのように表現されるかを確かめると、各言語の違いをつかみやすくなります。