マークアップ言語とは：HTML・XML・Markdownの違いとセマンティクス・アクセシビリティ・セキュリティ完全ガイド

2025年11月18日 最終更新日時 : 2025年11月18日 エバープレイ編集部

マークアップ言語とは

マークアップ言語（マークアップげんご）とは、文書の構造や意味、表示方法などを示すために、人間や機械が読める「タグ」や「注記」を文字列に埋め込むための言語です。単に見た目を指定するだけでなく、文書の論理的な構造（見出し、段落、リスト、表など）や意味（見出しである、引用である、著者名である、日付である等）を明示することができます。最も身近な例はHTMLで、ウェブブラウザが解釈して画面表示を行いますが、マークアップ言語はウェブ以外にも文書作成、データ交換、学術組版など幅広い用途で使われます。

歴史的背景と主要規格

  • SGML（Standard Generalized Markup Language） — 1980年代に標準化された汎用的なマークアップの規格で、多様な文書モデルを表現できる柔軟性を持ちます。HTMLやXMLはSGMLの影響を受けています。

  • HTML（HyperText Markup Language） — ウェブ用のマークアップ言語として誕生。現在はWHATWGによるHTML Living StandardとW3Cの勧告があり、HTML5以降はセマンティック要素（article, section, navなど）やAPIの拡張が進んでいます。

  • XML（eXtensible Markup Language） — 1998年にW3Cが標準化。データ交換や構造化文書に向く「拡張可能」なマークアップで、厳格な構文（閉じタグ、エスケープ、1ルート要素など）を持ちます。

  • 軽量マークアップ — Markdown、Textile、BBCodeなど。読みやすさ・書きやすさを重視し、プレーンテキストに近い記法でHTMLに変換されます。CommonMarkはMarkdownの互換性を整える仕様です。

  • 組版・学術向け — LaTeXは論文や書籍の組版に使われるマークアップ（マクロ）言語で、数式や目次、図表の自動処理に優れます。

構成要素 — タグ・要素・属性・エンティティ

代表的な構成要素は次の通りです。

  • タグ（Tag） — 要素の開始や終了を示す記法。例: <p>（開始タグ）と</p>（終了タグ）。

  • 要素（Element） — タグで括られた意味あるブロックやインライン構造。要素は子要素やテキストを含めることができます。

  • 属性（Attribute） — 要素に付帯する追加情報。例: <a href="https://example.com"> の href。

  • エンティティ — 特殊文字（<, >, & など）を表現するための記法。XML/HTMLでは&lt; 等で表す。

  • 名前空間（Namespace） — XML系で異なる語彙を衝突なく共存させるための仕組み。

解析（パース）とレンダリングの違い

マークアップ言語を扱う際、「パース（解析）」と「レンダリング（描画）」の役割が重要です。XMLは「厳格」で、正しくない構文（未閉鎖タグや複数ルート）はエラーになります。対してHTML（特にHTML5）は「寛容」で、ブラウザは欠落タグを補完しつつ独自の解析アルゴリズムでDOMを構築します。この違いは、エラー時の挙動やセキュリティ・互換性に影響します。

バリデーションとスキーマ

文書が規格に沿っているかを確認するためにバリデーションが使われます。代表的な手段は次の通りです。

  • DTD（Document Type Definition） — SGML/XMLの古典的なスキーマ定義。

  • XML Schema（XSD） — XML文書の型や構造を定義するW3C標準。

  • RELAX NG — XML向けの柔軟なスキーマ言語。

  • HTML Validator — W3Cや他のツールによるHTMLのチェック（構文やアクセシビリティ問題の検出に有用）。

セマンティック vs プレゼンテーション

マークアップは「見た目（presentation）」を直接指示することもできますが、近年は「意味（semantics）」を明確にすることが重視されています。意味的なマークアップ（例: <article>, <header>, <figure>）を使うことで、検索エンジン、スクリーンリーダー、機械処理が文書構造を理解しやすくなります。一方、見た目はCSSで分離すべきです。

アクセシビリティとセマンティクス

正しいマークアップはアクセシビリティ向上に直結します。見出し構造（h1〜h6）、リスト、テーブルの適切な使用、画像に対するalt属性などはスクリーンリーダー利用者や検索エンジンに重要な情報を伝えます。さらに、ARIA（Accessible Rich Internet Applications）属性を用いることで、動的コンポーネントの意味付けができますが、ARIAは正しいHTML要素で代替できない場合に限定して使うのが推奨です。

セキュリティ上の注意点

  • XSS（クロスサイトスクリプティング） — ユーザー入力をそのままHTMLとして出力すると、スクリプトが実行される危険があります。必ずエスケープやサニタイズを行い、信頼できるサニタイザやホワイトリスト方式を使いましょう。

  • XXE（XML External Entity）攻撃 — 外部エンティティ参照を悪用して機密ファイルにアクセスされる可能性があります。XMLパーサで外部エンティティを無効化する設定が重要です。

  • コンテンツセキュリティポリシー（CSP） — ブラウザ側でスクリプト実行やメディア読み込みを制限するヘッダ設定はXSS緩和に有効です。

代表的なマークアップ言語の用途と特徴

  • HTML — ウェブ文書。レンダリング重視だが、HTML5でセマンティック性・APIが強化。

  • XML — データ交換、構造化文書、設定ファイル。厳格な構文と名前空間を持つ。

  • Markdown — シンプルな記法で文章を書くための軽量マークアップ。ブログやREADMEで多用。

  • LaTeX — 高品質な組版を目的としたマクロ言語。数式や刊行物向け。

  • RDFa / Microdata / JSON-LD — 構造化データ（Semantic Web）をHTMLに埋め込むための手法。検索結果のリッチ化に利用。

実務でのポイント（ベストプラクティス）

  • 意味のあるセマンティック要素を使い、見た目はCSSで分離する。

  • ユーザー入力は必ずエスケープまたはサニタイズする。ライブラリやフレームワークの機能を活用する。

  • 文字エンコーディングはUTF-8を推奨し、メタ情報とHTTPヘッダで統一する。

  • スキーマやバリデータを使って自動検査をCIに組み込む。

  • アクセシビリティを意識し、ARIAは必要最小限に留める。

  • 外部コンテンツやユーザーが提供するマークアップは信頼せず、サニタイズとContent Security Policyを併用する。

ツールとエコシステム

主要ブラウザのデベロッパーツール、W3C Validator、HTML Tidy、Lint系（HTMLHint、remarklint）、エディタのプラグイン（VSCodeのEmmetやXML/HTML拡張）、静的サイトジェネレータ（Jekyll、Hugo）やMarkdownパーサ（CommonMark実装）など、マークアップを書き、検証し、変換する豊富なツール群があります。

今後のトレンド

Web ComponentsやShadow DOMの普及でコンポーネント単位の再利用性が高まり、構造化データ（JSON-LD）を通じた意味づけや検索エンジン最適化がより重視されています。一方でAPIやデータ転送ではJSONが主流になりつつあり、マークアップは「最終的な表現」としての役割を強める傾向があります。しかし、アクセシビリティやSEOの観点からセマンティックマークアップの重要性は増しています。

簡単な例

<article>
  <header>
    <h1>マークアップ言語とは</h1>
    <time datetime="2025-11-17">2025-11-17</time>
  </header>
  <p>これは簡単なHTMLの例です。</p>
</article>

まとめ

マークアップ言語は文書の意味や構造を明示するための強力な手段であり、ウェブやデータ交換、組版など多くの場面で不可欠です。正しいセマンティックなタグ選択、厳密なバリデーション、セキュリティ対策、アクセシビリティ配慮といった実務上の配慮が、品質の高いコンテンツ作りには欠かせません。

参考文献

カテゴリー
IT
前の記事
スライ・アンド・ザ・ファミリー・ストーン完全ガイド：代表曲・名盤・革新の歴史と聴きどころNew!!
2025年11月18日
次の記事
Sly and the Family Stone完全ガイド｜名盤5作のおすすめレコードと聴きどころNew!!
2025年11月18日