マークアップとは｜意味・言語の違いを4言語とChromiumで比較

「マークアップ」は、文章そのものではなく、文章に付ける目印のことです。目印を付けておくと、ブラウザは見出しを大きく描き、読み上げソフトは「見出し」と伝え、検索エンジンは内容のまとまりを読み取れます。

flowchart LR
    A[文章] --> B[目印を<br>付ける]
    B --> D[ブラウザ<br>画面に描く]
    B --> E[読み上げ<br>見出しを伝える]
    B --> F[検索エンジン<br>内容を読む]
    B --> G[変換ツール<br>PDFなどへ]

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.5 LTS の上で、同じお知らせ文を HTML・Markdown・XML・LaTeX の4つで書き、文字数を Python 3.13.18 で数えました。Markdown の変換は pandoc 3.1.3・Python-Markdown 3.11・marked 18.0.10、XML の検査は xmllint（libxml2 2.9.14）と Python の xml.etree、LaTeX は pdfTeX 3.141592653-2.6-1.40.25（TeX Live 2023）で PDF にしました。ブラウザの表示・アクセシビリティツリー・キーボード操作・構造化データの読み取りは、127.0.0.1 に立てた Python の http.server のページを Chromium 153.0.8010.12（Playwright 1.63.0）で開いて計測しています。HTML の要素の意味は WHATWG HTML Living Standard と MDN、構造化データは Google 検索セントラル、マークアップエンジニアの統計は厚生労働省の職業情報提供サイト（job tag）、値上げの意味は野村證券の証券用語解説集で確かめました。図は mermaid-cli 11.16.0 で描画を確かめています（確認日 2026年10月29日）。

マークアップとは（意味をひと言で）

この節では、マークアップという言葉の意味と、なぜ目印が要るのかが分かります。

マークアップ（markup）とは、文章に「ここは見出し」「ここは箇条書き」のような目印を埋め込み、文書の構造や意味をコンピューターが読める形にすることです。目印そのもの（HTML の <h1> や Markdown の #）を指して「マークアップ」と呼ぶこともあります。

人は、チラシを見れば大きな字が見出しで、小さな字が本文だと分かります。コンピューターには、ただの文字の並びにしか見えません。そこで、文章の中に決まった書き方で目印を入れ、「この部分は見出し」と教えます。これがマークアップです。

もとは印刷の世界の言葉で、編集者が原稿に「ここは太字」「ここは見出しの大きさ」と赤字で書き込む指示を指していました。コンピューターで文書を扱うようになり、その書き込みを決まった記号で表すようになったのが、今のマークアップ言語です。

IT用語辞典 e-Words も、マークアップを「文書の本文に構造や見た目を指定するデータを埋め込んで記述すること」と説明し、HTML・TeX・Markdown・Wiki 記法を例に挙げています。

「マークアップ」の3つの意味と見分け方

この節では、同じ「マークアップ」という言葉が使われる3つの場面と、どれを指しているかの見分け方が分かります。

検索で「マークアップとは」と出てくるのは、主に「文書の目印」「Web の仕事」「値上げ」の3つです。話している場面で意味が決まります。

• タグ・HTML・Web ページの話の中なら、文書の目印の意味です。この記事の中心はこの意味です。
• 価格・原価・利益の話の中なら、値上げ（上乗せ）の意味です。計算の仕方は「値上げのマークアップ」の節で扱います。

マークアップ言語とは（種類と生まれた順）

この節では、マークアップ言語とは何か、主な言語が何のために作られたのかが分かります。

マークアップ言語とは、目印の付け方（タグの名前・書き方・入れ子の決まり）を定めた言語です。決まりがあるので、ブラウザや変換ツールがその目印を読んで処理できます。

このほか、Wiki 記法、reStructuredText（Python のドキュメント）、AsciiDoc、ベクター画像の SVG（XML の書き方で図形を記述）、数式の MathML などもマークアップ言語です。HTML の <ruby> と <rt> で振り仮名を付けるのも、マークアップの一例です。

同じ文章をHTML・Markdown・XML・LaTeXで書いた実物

この節では、同じお知らせ文を4つのマークアップ言語で書いたときの違いと、記号の多さを実際に数えた結果が分かります。

内容は同じ「見出し・強調を含む1文・箇条書き3つ・リンク1つ」です。書き方が違うだけで、どれも「どこが見出しで、どこが箇条書きか」を表しています。

HTML

<!doctype html>
<html lang="ja">
<head><meta charset="utf-8"><title>勉強会のお知らせ</title></head>
<body>
<h1>勉強会のお知らせ</h1>
<p>11月の勉強会では<strong>HTMLの基本</strong>を扱います。</p>
<ul>
  <li>日時：11月5日 18時</li>
  <li>場所：会議室A</li>
  <li>持ち物：ノートPC</li>
</ul>
<p><a href="https://example.com/form">申し込みフォーム</a></p>
</body>
</html>

Markdown

# 勉強会のお知らせ

11月の勉強会では**HTMLの基本**を扱います。

- 日時：11月5日 18時
- 場所：会議室A
- 持ち物：ノートPC

[申し込みフォーム](https://example.com/form)

XML

XML はタグの名前を自分で決めます。ここでは「お知らせ」というデータとして、notice・item などの名前を付けました。日時・場所は属性 label で区別しています。

<?xml version="1.0" encoding="UTF-8"?>
<notice>
  <title>勉強会のお知らせ</title>
  <body>11月の勉強会では<em>HTMLの基本</em>を扱います。</body>
  <items>
    <item label="日時">11月5日 18時</item>
    <item label="場所">会議室A</item>
    <item label="持ち物">ノートPC</item>
  </items>
  <link href="https://example.com/form">申し込みフォーム</link>
</notice>

LaTeX

\documentclass{article}
\usepackage{hyperref}
\begin{document}
\section*{勉強会のお知らせ}
11月の勉強会では\textbf{HTMLの基本}を扱います。
\begin{itemize}
  \item 日時：11月5日 18時
  \item 場所：会議室A
  \item 持ち物：ノートPC
\end{itemize}
\href{https://example.com/form}{申し込みフォーム}
\end{document}

記号の多さを数えた結果

本文の文字（見出し・文・箇条書き・リンクの文字）は、どれも同じ66文字です。ファイル全体の文字数から、目印にあたる部分の割合を計算しました。

Markdown は目印が半分以下で、手で書く量がいちばん少なくなりました。HTML・XML・LaTeX は、ファイルの4分の3ほどが目印です。そのぶん、HTML は言語の指定（lang="ja"）や文字コード、XML はデータの名前と属性、LaTeX は文書の種類まで書けます。

変換して確かめた：4つは同じ構造を表している

Markdown を pandoc で HTML に変換すると、手で書いた HTML とほぼ同じ形になりました（pandoc は見出しに id を付けます）。

$ pandoc note.md -t html
<h1 id="勉強会のお知らせ">勉強会のお知らせ</h1>
<p>11月の勉強会では<strong>HTMLの基本</strong>を扱います。</p>
<ul>
<li>日時：11月5日 18時</li>
<li>場所：会議室A</li>
<li>持ち物：ノートPC</li>
</ul>
<p><a href="https://example.com/form">申し込みフォーム</a></p>

逆に LaTeX を pandoc で読み込んで HTML にしても、\section* は見出し、\textbf は <strong>、itemize は <ul> になりました。XML は xmllint で検査して「整形式（形の決まりを守っている）」と確かめ、XPath で場所だけを取り出せました。

$ xmllint --noout note.xml && echo wellformed
wellformed
$ xmllint --xpath '//item[@label="場所"]/text()' note.xml
会議室A

LaTeX は、英語に置き換えた版を pdflatex で PDF にでき（約1.0秒・1ページ）、日本語の版はそのままでは次の節のエラーで止まりました。日本語の PDF を作るには、LuaLaTeX と luatexja、upLaTeX など日本語に対応した処理系を使います。

マークアップとマークダウン（Markdown）の違い

この節では、似た名前の「マークアップ」と「マークダウン」の関係と、Markdown で起きやすいつまずきが分かります。

マークダウン（Markdown）は、マークアップ言語の一種です。「マークアップ」に対する反対語ではなく、HTML のタグを書かずに済むように、記号を減らした軽量マークアップ言語として2004年に John Gruber 氏が公開しました。名前は「マークアップ」をもじった言葉遊びです。

Markdown は書きやすい反面、変換するツールごとに細かい解釈が違います。日本語でよく起きる例を、3つのツールで変換して比べました。

これは**「重要」**です。

これは **「重要」** です。

CommonMark（GitHub などが使う Markdown の仕様）では、閉じる ** の直前が「」」などの記号で、直後が文字のとき、閉じる記号と見なされません。GitHub の README で太字にならないときは、** の外側に空白を入れるか、HTML の <strong> を直接書くと確実です。Markdown の記法の一覧と環境ごとの違いは、関連記事「Markdownの書き方一覧｜記法早見表と環境別の対応・変換結果つき」で扱っています。

マークアップとコーディング・プログラミングの違い

この節では、「マークアップ」「コーディング」「プログラミング」の違いと、マークアップ言語がプログラミング言語と呼ばれない理由が分かります。

マークアップは「文書に構造を付ける」こと、プログラミングは「コンピューターに処理の手順を書く」ことです。コーディングは、決まった仕様やデザインを見ながらコードを書く作業全体を指す言葉で、Web 制作ではマークアップとほぼ同じ意味で使われることがあります。

HTML には「もし〜なら」「〜を10回くり返す」を書く仕組みがありません。そのため一般に、HTML はプログラミング言語ではなくマークアップ言語と呼ばれます。ただし、どちらが簡単という話ではありません。正しい構造を選ぶには、次の節で見るような知識が要ります。

見た目を受け持つ CSS との分担は、関連記事「CSSとは｜HTMLとの違い・書き方・効かない原因を実例で解説」で扱っています。

見た目が同じでも違う：Chromiumのアクセシビリティツリー比較

この節では、見た目がまったく同じ2つのページで、ブラウザが受け取る「意味」がどれだけ違うかを、Chromium で計測した結果で分かります。

マークアップの良し悪しは、画面を見ただけでは分かりません。そこで、同じお知らせを2通りに書きました。1つは見出し・リスト・リンク・ボタンに合ったタグを使った版、もう1つは見た目だけを CSS で同じにした版です。

2つのページのソース

正しく付けた版（good.html の body）：

<h1>勉強会のお知らせ</h1>
<p>11月の勉強会では<strong>HTMLの基本</strong>を扱います。</p>
<ul>
<li>日時：11月5日 18時</li>
<li>場所：会議室A</li>
<li>持ち物：ノートPC</li>
</ul>
<p><a href="/form">申し込みフォーム</a></p>
<button type="button" onclick="document.title='押した'">申し込む</button>

見た目だけの版（bad.html の body）：

<p class="h1">勉強会のお知らせ</p>
<p>11月の勉強会では<span class="b">HTMLの基本</span>を扱います。</p>
<p class="li">日時：11月5日 18時</p>
<p class="li">場所：会議室A</p>
<p class="li end">持ち物：ノートPC</p>
<p><span class="link" onclick="location.href='/form'">申し込みフォーム</span></p>
<span class="btn" onclick="document.title='押した'">申し込む</span>

CSS（.h1 を28pxの太字、.li を display:list-item で黒丸付き、.btn を枠付きのボタン風など）を調整し、600×420px で撮ったスクリーンショットを Python の Pillow で1画素ずつ比べました。違う画素は 0 個で、画面は完全に同じでした。

アクセシビリティツリーの違い

アクセシビリティツリーとは、ブラウザが HTML から作る「このページには何があるか」の一覧です。読み上げソフト（スクリーンリーダー）や音声操作は、画面の絵ではなくこの一覧を読みます。Playwright の ariaSnapshot() で取り出した結果です。

# 正しく付けた版
- heading "勉強会のお知らせ" [level=1]
- paragraph:
  - text: 11月の勉強会では
  - strong: HTMLの基本
  - text: を扱います。
- list:
  - listitem: 日時：11月5日 18時
  - listitem: 場所：会議室A
  - listitem: 持ち物：ノートPC
- paragraph:
  - link "申し込みフォーム":
    - /url: /form
- button "申し込む"

# 見た目だけの版
- paragraph: 勉強会のお知らせ
- paragraph: 11月の勉強会ではHTMLの基本を扱います。
- paragraph: 日時：11月5日 18時
- paragraph: 場所：会議室A
- paragraph: 持ち物：ノートPC
- paragraph: 申し込みフォーム
- text: 申し込む

Chrome DevTools Protocol の Accessibility.getFullAXTree で、役割（role）ごとの数も数えました。

見た目だけの版は、マウスでクリックすれば動きますが、キーボードでは「申し込む」に移ることも押すこともできませんでした。読み上げソフトでは、見出しへのジャンプも「リスト、3項目」という案内も使えません。MDN も、<h1> と同じ見た目の span について「セマンティックな意義はありません」と説明しています。

同じ計測を手元で行うコード

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('http://127.0.0.1:18749/good.html');
  console.log(await page.locator('body').ariaSnapshot());
  for (const r of ['heading', 'list', 'listitem', 'link', 'button'])
    console.log(r, await page.getByRole(r).count());
  await browser.close();
})();

セマンティックなマークアップとは（タグの選び方）

この節では、「セマンティック（意味に合った）なマークアップ」の考え方と、タグを選ぶ順番が分かります。

セマンティックなマークアップとは、見た目ではなく「その部分が何か」でタグを選ぶことです。大きな字にしたいから <h1> を使うのではなく、ページの最上位の見出しだから <h1> を使い、大きさは CSS で決めます。

WHATWG の HTML の仕様では、<strong> は「強い重要性・深刻さ・緊急性」を、<b> は「特別な重要性は持たせずに注意を引く部分」を表すと定めています。どちらも太字に見えますが、意味が違います。

1. 1それは見出しか → h1〜h6レベルを飛ばさない。大きさは CSS で変える
2. 2並んだ項目か → ul・ol・li順番に意味があれば ol。用語と説明なら dl
3. 3別のページへ移るか → a（href 付き）移動ならリンク、その場の操作ならボタン
4. 4押して何かを実行するか → buttonTab・Enter・Space が最初から使える
5. 5ページの区画か → header・nav・main・footer・article・section読み上げソフトで区画ごとに移動できる
6. 6表の形のデータか → table・th・tdレイアウトのために表を使わない
7. 7どれにも当てはまらない → span（行の中）か div 要素（かたまり）意味を持たない入れ物。最後の選択肢

W3C の「Using ARIA」には、「HTML の要素で役割を表せるなら、ARIA の属性を足すより、その要素を使う」という最初の規則があります。span に role="button" と tabindex="0" を付け、キー操作の処理を自分で書くこともできますが、<button> なら最初からすべて付いています。

区画のタグ（header・main・section・article）の使い分けは関連記事「HTMLのheader・main・section・articleの違いと使い分け」、タグの全体像は関連記事「HTMLタグ一覧表｜基本タグから全要素まで表示例・コピペ用コード付き」で扱っています。

マークアップを間違えるとどうなる（HTMLとXMLのエラー原文）

この節では、閉じタグを忘れるなどの間違いをしたとき、HTML と XML で何が起きるかの違いが分かります。

HTML は間違いを自動で直して表示を続け、XML は最初の間違いで処理を止めます。同じ「閉じタグの書き忘れ」を両方で起こしました。

HTML：エラーは出ないが、意図しない形になる

<p>11月の勉強会では<strong>HTMLの基本</p>
<p>を扱います。

Chromium で開き、ブラウザが組み立て直した中身（document.body.innerHTML）を取り出すと次のとおりでした。

<p>11月の勉強会では<strong>HTMLの基本</strong></p><strong>
<p>を扱います。

</p></strong>

閉じ忘れた <strong> が次の段落まで続き、「を扱います。」まで太字（重要）になりました。画面にはエラーが一切出ないので、気づきにくい間違いです。HTML の検証ツール（W3C の Nu Html Checker など）で見つけられます。

XML：その場で止まり、場所を教えてくれる

$ xmllint --noout broken.xml
broken.xml:3: parser error : Opening and ending tag mismatch: em line 3 and body
  <body>11月の勉強会では<em>HTMLの基本</body>
                                                       ^
broken.xml:4: parser error : Opening and ending tag mismatch: body line 3 and notice
broken.xml:5: parser error : Premature end of data in tag notice line 2

Python の xml.etree.ElementTree は ParseError: mismatched tag: line 3, column 30、Chromium で XML を直接開くと「This page contains the following errors: error on line 3 at column 36: Opening and ending tag mismatch: em line 3 and body」と表示され、間違いの手前までしか描かれませんでした。XML ファイルを開くときのつまずきは、関連記事「XMLファイルの開き方｜中身の読み方・文字化けと開けない時の直し方」で扱っています。

LaTeX：日本語の文字で止まる

$ pdflatex -interaction=nonstopmode note.tex
! LaTeX Error: Unicode character 勉 (U+52C9)
               not set up for use with LaTeX.

pdflatex は日本語の文字を扱う設定を持たないため、1文字目でこのエラーになりました。LuaLaTeX と luatexja のように日本語に対応した組み合わせを選ぶのが近道です。

構造化データ（JSON-LD）とSEO

この節では、検索エンジンに向けた「構造化データ」もマークアップの一種であることと、その書き方の例が分かります。

構造化データは、ページの内容（イベント・商品・記事など）を、検索エンジンが読める決まった形で書き添える仕組みです。Google 検索セントラルは、JSON-LD・microdata・RDFa の3形式を扱えるとし、「一般的に、Google は実装と管理が最も容易な形式（ほとんどの場合は JSON-LD）を推奨します」と書いています。

<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Event",
 "name":"勉強会（HTMLの基本）",
 "startDate":"2026-11-05T18:00+09:00",
 "location":{"@type":"Place","name":"会議室A"}}
</script>

このブロックを正しく付けた版の head に入れ、Chromium でページから取り出すと、@type が Event、startDate が 2026-11-05T18:00+09:00 のデータとしてそのまま読めました。見た目だけの版からは何も取り出せません。

• 構造化データは、HTML のマークアップの代わりではありません。見出し・リストなどの本文の構造は HTML で、検索結果に出したい情報は JSON-LD で、と役割が分かれています。
• 書いた内容は、ページに見えている内容と一致させます。型ごとの書き方と検証手順は、関連記事「構造化データJSON-LDの書き方｜型別コピペ例と検証手順」で扱っています。

なお、マークアップを正しくすれば検索順位が必ず上がる、というわけではありません。検索エンジンが内容のまとまりを読み取りやすくなる、という効果として捉えるのが正確です。

マークアップエンジニアとは（仕事内容と求人の傾向）

この節では、マークアップエンジニアの仕事内容と、公開されている統計や求人の説明から分かる傾向が分かります。

マークアップエンジニアは、デザイナーが作った画面を HTML・CSS（必要に応じて JavaScript）で Web ページにする職種です。コーダー・フロントエンドエンジニアと呼ぶ会社もあり、名前の線引きは会社ごとに違います。

公開データで見る傾向（2026年10月29日時点）

厚生労働省の職業情報提供サイト（job tag）には「マークアップエンジニア」という独立した職業ページは無く、近いのは「Webデザイナー（Web制作会社）」です。仕事内容は、プログラミングに関わることもあるものの中心はデザイン、と説明されています。同じページの統計は次のとおりです。

job tag は、統計データで用いている職業分類は「必ずしもその職業のみの『統計データ』を表しているものではありません」と注記しています。就業者数・年収・年齢は広告デザイナーなどと同じ分類の値で、求人の数字はハローワークに出た求人だけの集計です。マークアップを専門にする人だけの年収や求人数を示す公的な統計は、確かめた範囲では見当たりませんでした。

民間の転職サービスの職種説明（マイナビエージェントの職種図鑑）では、仕事内容として「ユーザビリティ、アクセシビリティ、SEO に配慮したコーディング」、求められるスキルとして HTML・CSS・JavaScript・CMS・ユーザビリティ・アクセシビリティ・SEO が挙げられています。タグを書けることに加えて、「なぜそのタグか」を説明できる知識が求められている、というのが公開情報から読み取れる傾向です。

• 1見出し・リスト・ボタンを意味で選べる見た目だけの版と正しい版の差を説明できる
• 2CSS で同じ見た目を作れるレスポンシブ・ブラウザごとの差への対応
• 3キーボードと読み上げで確かめられるTab で移れるか、アクセシビリティツリーに出るか
• 4構造化データ・meta を書ける検索エンジン向けの情報を正しく添える
• 5CMS のテンプレートに組み込めるWordPress などで繰り返し使える形にする

値上げのマークアップ（マークアップ率と利益率の違い）

この節では、商売や会計で使う「マークアップ」の意味と、利益率（マージン）との計算の違いが分かります。

商売の「マークアップ」は、原価に上乗せする利益のことで、上乗せの割合をマークアップ率（値入率）と呼びます。野村證券の証券用語解説集では、マークアッププライシングを「仕入原価に一定率を上乗せ（マークアップ）して価格を決定する方法」と説明しています。

よく混同されるのが利益率（マージン）です。マークアップ率は「原価」を分母に、利益率は「売値」を分母に計算します。原価1,000円で計算した結果です。

for m in [10, 20, 25, 30, 50, 100]:
    cost = 1000
    price = cost * (1 + m / 100)
    print(m, int(price), round((price - cost) / price * 100, 1))

「25%乗せる」と「利益率25%」は別の売値になります（1,250円と約1,333円）。見積もりや価格表で「マークアップ」と出てきたら、分母がどちらかを確かめると食い違いを防げます。

よくあるつまずきと判断表

この節では、マークアップでよく起きるつまずきの原文と、どのマークアップ言語を使うかの判断が分かります。

よくあるエラー・つまずき

判断表：どのマークアップ言語を使うか

よくある質問

この節では、マークアップについてよく聞かれる質問の答えが分かります。

Q. マークアップを一言でいうと何ですか。
文章に「見出し」「強調」「リンク」などの目印を付けて、構造と意味をコンピューターに伝えることです。

Q. HTML はプログラミング言語ですか。
一般にはマークアップ言語に分類されます。条件分岐や繰り返しを書く仕組みが無く、処理の手順ではなく文書の構造を書くためです。

Q. マークアップとマークダウンは反対の意味ですか。
違います。Markdown はマークアップ言語の一種で、記号を減らした軽量マークアップ言語です。名前は言葉遊びです。

Q. マークアップとコーディングは同じですか。
厳密には、マークアップは構造を付ける作業、コーディングは見た目や動きを含めてコードを書く作業です。Web 制作の会社では、ほぼ同じ意味で使うことも多くあります。

Q. 見た目が同じなら、どのタグを使っても同じではありませんか。
同じではありません。手元の計測では、画面の違いが0画素でも、見出し・リスト・ボタンがアクセシビリティツリーから消え、キーボードで操作できなくなりました。

Q. マークアップは SEO に影響しますか。
見出しや区画を正しく付けると、検索エンジンがページのまとまりを読み取りやすくなります。ただし、タグを正しくすれば順位が必ず上がるわけではありません。検索結果に情報を出すには、構造化データ（JSON-LD）も使います。

Q. XML と HTML の違いは何ですか。
HTML はタグの名前と意味が決まっていて、間違いがあってもブラウザが直して表示します。XML はタグの名前を自分で決められる代わりに、形の決まりに厳しく、間違いがあると処理が止まります。

Q. マークアップを学ぶには何から始めればよいですか。
HTML の基本のタグ（h1〜h6・p・ul/li・a・button・img）を、見た目ではなく意味で選ぶ練習から始めるのが近道です。ブラウザの開発者ツールの「アクセシビリティ」の表示で、付けたタグがどう読まれているかを確かめられます。

Q. マークアップエンジニアの年収はどれくらいですか。
マークアップエンジニアだけを集計した公的な統計は見当たりませんでした。近い職業として、job tag の「Webデザイナー（Web制作会社）」には、令和7年賃金構造基本統計調査を加工した年収 539.6万円が載っています（デザイナーの分類全体の値）。

Q. ビジネスで「マークアップ」と言われたら何のことですか。
原価に上乗せする利益（値入れ）のことです。マークアップ率は原価に対する割合で、売値に対する利益率とは数字が違います。

まとめ

• マークアップとは、文章に目印を付けて構造と意味を伝えること。その書き方の決まりがマークアップ言語（HTML・XML・Markdown・LaTeX など）。
• 同じ文章でも、目印の量は Markdown が42.6%、HTML・XML・LaTeX は74〜79%。書きやすさと表せる情報の多さが逆になる。
• 見た目が同じでも、タグの選び方でブラウザが受け取る意味は変わる。Chromium で見出し1→0、リスト項目3→0、ボタン1→0、Tab で移れる先2→0 になった。
• HTML は間違いを黙って直し、XML は止まる。閉じタグの書き忘れで太字が次の段落まで広がった。
• 「マークアップ」は場面で意味が変わる。Web 制作ではコーディングに近い仕事、商売では原価への上乗せ（利益率とは分母が違う）。

参考・出典

いずれも 2026年10月29日に確認しました。

• WHATWG「HTML Living Standard」：https://html.spec.whatwg.org/multipage/
• WHATWG「HTML Living Standard」The strong element：https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong-element
• MDN「セマンティクス」：https://developer.mozilla.org/ja/docs/Glossary/Semantics
• W3C「Using ARIA」：https://www.w3.org/TR/using-aria/
• W3C「Extensible Markup Language (XML) 1.0」：https://www.w3.org/TR/xml/
• CommonMark「CommonMark Spec」：https://spec.commonmark.org/
• John Gruber「Markdown」：https://daringfireball.net/projects/markdown/
• Google 検索セントラル「構造化データの仕組みについて」：https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ja
• Playwright「Aria snapshots」：https://playwright.dev/docs/aria-snapshots
• Chrome DevTools Protocol「Accessibility domain」：https://chromedevtools.github.io/devtools-protocol/tot/Accessibility/
• 厚生労働省 職業情報提供サイト（job tag）「Webデザイナー（Web制作会社）」：https://shigoto.mhlw.go.jp/User/Occupation/Detail/326
• 厚生労働省 job tag「統計データの利用に当たっての留意点」：https://shigoto.mhlw.go.jp/User/topics/detail/584
• マイナビエージェント「マークアップエンジニア」職種図鑑：https://mynavi-agent.jp/creative/jobindex/10.html
• 野村證券「マークアッププライシング」証券用語解説集：https://www.nomura.co.jp/terms/japan/ma/A02809.html
• IT用語辞典 e-Words「マークアップ」：https://e-words.jp/w/マークアップ.html
• CTAN「luatexja」：https://ctan.org/pkg/luatexja

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。