LLM Markdown vs HTML：Token 省約 70% 與瀏覽器內轉換

把網頁複製後直接貼到 ChatGPT、Claude 或 Gemini，幾乎每次都要付出兩代價：Token 浪費與回答品質下降。複製下來的 HTML 充滿了 div 包裹標籤、class 屬性、行內腳本、追蹤用像素等模型理解正文完全不需要的雜訊。轉成 Markdown 後，這些多餘內容被移除，只留下結構與正文送給模型。

這篇文章以 LLM Markdown vs HTML 的視角比較兩種格式，引用 OpenAI tiktoken 的實測數據與公開基準，說明具體差距。同時整理 HTML 仍適合的例外情境，以及機密 HTML 不外傳、在瀏覽器內完成轉換的操作流程。

結論先講

LLM 輸入請優先選擇 Markdown。同等內容的 HTML 相比，Token 數量約為其 1/3 到 1/10，外部驗證數據也顯示表格、列表、程式碼區塊的資訊萃取精確度更高。

操作流程很簡單：把 HTML 貼到 HTML 轉 Markdown，按下執行，將結果複製到 prompt 即可。轉換處理 entirely 在瀏覽器內完成，貼上的 HTML 不會傳到 FormatArc 或任何第三方服務。

LLM 如何讀取格式

LLM 不會像瀏覽器那樣「看到」渲染後的網頁畫面。它是把原始文字來源當 Token 串流來處理。每一個尖括號、類別名稱、行內樣式，都在佔用你真正想放內容的 context window 容量。

由此產生兩個後果：

• 包裹元素多的 HTML 傳入後，指示文、範例（few-shot）、模型回答的可用空間就變少了
• class="text-base text-gray-700" 或 data-* 屬性、解析標籤等雜訊，會讓模型忽略真正需要萃取或改寫的內容

Markdown 用一兩個符號就能表達與 HTML 相同的結構（標題、列表、連結、程式碼），結果不僅更短，也更接近 LLM 訓練數據中常見的パターン。GitHub 的 README、技術文件站、Stack Overflow 文章、開發者論壇的帖子，絕大多數都是 Markdown 寫的。

Markdown 在結構上輕量的根本原因是標籤模型本身。從網頁實際複製下來的 HTML（序列化後的 DOM 或 CMS 輸出）中，絕大多數容器元素都是以開閉標籤成對的形式出現（<p>...</p>、<li>...</li>、<td>...</td>、<div>...</div>），排版代價每個元素要付兩次：開一次、閉一次。（HTML 規範上部分閉標籤可省略，但渲染後的 DOM 序列化或模板引擎最終都會輸出，所以貼上來的就是成對形式。）巢狀結構會讓這個代價加倍：表格儲存格內的列表項目，進入時疊加開標籤、離開時疊加閉標籤，每個標籤還可以帶 class、id、style、data-* 屬性，只是增加了模型不需要的字元數。

Markdown 則用單一非配對標記表達相同結構。標題是 #，列表項目是 -，表格欄位分隔是 |，段落間隔是一個空行。沒有重複的閉記號，也沒有需要填入的屬性欄位，每個元素的額外開銷是固定小常數，不會隨屬性數量或巢狀深度增長。下方實測數據量化的正是這個差距，根源在於沒有開閉標籤重複。

這些結構本身由公開規格定義。核心語法（標題、列表、連結、code span 與 fenced code、段落）由 CommonMark Specification在新分頁中開啟 標準化；表格、工作清單、刪除線、自動連結的擴充由 GitHub Flavored Markdown Spec在新分頁中開啟 定義。兩份規格都是穩定版控的文件，這也是 Markdown 在各模型訓練使用的公開語料中保持一致的原因之一。

各模型精確的訓練數據配比未公開，所以這裡不做斷定。可驗證的事實是：Markdown 在公開技術文本中佔主導地位，且主要模型供應商在其 prompt 設計指南中明確推薦 Markdown 式結構。Anthropic 的 Claude prompt 設計指南與 Google 的 Gemini prompt 指南，都建議用標題和項目符號來分隔章節。

Token 效率實測比較

為了公平比較，我們新寫了一篇解釋 JSON 是什麼的短技術文件。文件包含 1 個 h2 標題、2〜3 個段落、3 項目清單、JSON 程式碼區塊、3 欄表格。同一內容以三種格式寫出：HTML 版（使用 CMS 頁面常見的包裹模式，Tailwind 風類名加 aria 屬性）、Markdown 版（CommonMark 加 GFM在新分頁中開啟 表格擴充）、Plain text 版（去除標籤、表格以 Tab 分隔行表示）。三份原始檔案與再現腳本已 commit 至倉庫 scripts/benchmarks/markdown-vs-html-for-llms/，本節末尾也完整公開全文。

Token 數以 OpenAI 官方 tiktoken在新分頁中開啟 0.13.0 實測。cl100k_base 是 GPT-3.5 / GPT-4 系列的 tokenizer，o200k_base 是 GPT-4o 系列使用的 tokenizer。

相比 HTML，Markdown 的 Token 數減少 -70.8%（cl100k_base）/ -70.4%（o200k_base），Plain text 減少 -74.4% / -74.0%。字元數方面 Markdown 減少 -63.2%，Plain text 減少 -66.1%。每 Token 對應字元數：HTML 為 3.50，Markdown 為 4.41，Plain text 為 4.63。HTML 的符號（<、>、=、"、屬性名）拉低了 tokenizer 效率，從數字上可直接看出。Claude 與 Gemini 的 tokenizer 實作不同，絕對值會有差異，但 HTML 包裹代價導致 Token 增加的方向在所有 BPE 系 tokenizer 中一致。

以上是特定合成樣板文件的實測值。真實網頁比這個樣板複雜得多，外部驗證數據報告了更大的差距：

• Web2MD 基準在新分頁中開啟：6 種代表頁型平均 Token 減少 87.5%；3,000 詞文章 HTML 約 8,000 Token → Markdown 約 2,800 Token（-67%）
• Beam.ai 2026 年報告在新分頁中開啟：乾淨內容減少 68%，真實 DOM 結構的網頁最高減少 87%
• ReleasePad 分析在新分頁中開啟：單純項目清單減少 10〜20%，包裹元素密度越高差距越大

不管信哪個基準，方向一致：HTML 在付包裹稅，context window 需要塞多份文件的場景中，這個代價會持續累積。

使用的樣板文件（全文）

<section class="prose prose-lg max-w-none">
  <h2 class="text-2xl font-semibold mt-8 mb-4" id="what-is-json">What is JSON?</h2>
  <p class="text-base text-gray-700 leading-relaxed mb-4">JSON (JavaScript Object Notation) is a lightweight, text-based data format used to exchange structured data between systems. It originated in JavaScript but is now language-independent and supported by virtually every modern programming language.</p>
  <p class="text-base text-gray-700 leading-relaxed mb-4">A JSON document is built from a small set of building blocks:</p>
  <ul class="list-disc pl-6 mb-4 space-y-1">
    <li class="text-base text-gray-700">Objects: unordered collections of key-value pairs wrapped in <code class="bg-gray-100 px-1 rounded">{}</code></li>
    <li class="text-base text-gray-700">Arrays: ordered lists of values wrapped in <code class="bg-gray-100 px-1 rounded">[]</code></li>
    <li class="text-base text-gray-700">Primitives: strings, numbers, booleans, and <code class="bg-gray-100 px-1 rounded">null</code></li>
  </ul>
  <p class="text-base text-gray-700 leading-relaxed mb-4">Here is a minimal example representing a single user record:</p>
  <pre class="bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto mb-4"><code class="language-json">{
  "id": 42,
  "name": "Ada Lovelace",
  "active": true
}</code></pre>
  <p class="text-base text-gray-700 leading-relaxed mb-4">The core value types and their typical use cases are summarized below.</p>
  <table class="w-full border-collapse mb-4" aria-label="JSON value types">
    <thead>
      <tr class="border-b border-gray-300">
        <th class="text-left p-2 font-semibold">Type</th>
        <th class="text-left p-2 font-semibold">Example</th>
        <th class="text-left p-2 font-semibold">Typical use</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-gray-200">
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">string</code></td>
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">"hello"</code></td>
        <td class="p-2">Names, labels, free text</td>
      </tr>
      <tr class="border-b border-gray-200">
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">number</code></td>
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">3.14</code></td>
        <td class="p-2">IDs, counts, measurements</td>
      </tr>
      <tr class="border-b border-gray-200">
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">boolean</code></td>
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">true</code></td>
        <td class="p-2">Flags, feature toggles</td>
      </tr>
    </tbody>
  </table>
  <p class="text-base text-gray-700 leading-relaxed mb-4">JSON is widely used for REST API payloads, configuration files, and persisting application state because it is easy to read, easy to parse, and supported everywhere.</p>
</section>

## What is JSON?

JSON (JavaScript Object Notation) is a lightweight, text-based data format used to exchange structured data between systems. It originated in JavaScript but is now language-independent and supported by virtually every modern programming language.

A JSON document is built from a small set of building blocks:

- Objects: unordered collections of key-value pairs wrapped in `{}`
- Arrays: ordered lists of values wrapped in `[]`
- Primitives: strings, numbers, booleans, and `null`

Here is a minimal example representing a single user record:

```json
{
  "id": 42,
  "name": "Ada Lovelace",
  "active": true
}
```

The core value types and their typical use cases are summarized below.

| Type | Example | Typical use |
| --- | --- | --- |
| string | `"hello"` | Names, labels, free text |
| number | `3.14` | IDs, counts, measurements |
| boolean | `true` | Flags, feature toggles |

JSON is widely used for REST API payloads, configuration files, and persisting application state because it is easy to read, easy to parse, and supported everywhere.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight, text-based data format used to exchange structured data between systems. It originated in JavaScript but is now language-independent and supported by virtually every modern programming language.

A JSON document is built from a small set of building blocks:

Objects: unordered collections of key-value pairs wrapped in {}
Arrays: ordered lists of values wrapped in []
Primitives: strings, numbers, booleans, and null

Here is a minimal example representing a single user record:

{
  "id": 42,
  "name": "Ada Lovelace",
  "active": true
}

The core value types and their typical use cases are summarized below.

Type	Example	Typical use
string	"hello"	Names, labels, free text
number	3.14	IDs, counts, measurements
boolean	true	Flags, feature toggles

JSON is widely used for REST API payloads, configuration files, and persisting application state because it is easy to read, easy to parse, and supported everywhere.

三份原始檔案、OpenAI tiktoken 的再現腳本（measure.py）與實測結果 JSON 已 commit 在倉庫的 scripts/benchmarks/markdown-vs-html-for-llms/。執行 python3 -m venv venv && ./venv/bin/pip install tiktoken==0.13.0 && ./venv/bin/python measure.py 即可重現上方表格的數字。

機密 HTML 不外傳的轉換

Token 效率與萃取精確度在其他文章中也常被討論。但多數文章跳過的論點是：轉換步驟中，原始 HTML 經過了哪些地方。

市面上許多線上「HTML 轉 Markdown」工具是在後端伺服器上處理轉換。貼上 HTML 後頁面 POST 到 API，伺服器回傳轉換結果。公開的 Wikipedia 內容這樣做沒問題，但以下情境不適合：

• 從 Confluence 或 Notion 匯出的內部文件
• 包含客戶名稱的管理畫面 HTML dump
• 行銷文案核准前的 staging 環境回應 body
• 包含個人資訊的 HTML 郵件正文

FormatArc 的 HTML 轉 Markdown 是靜態頁面。Markdown 轉換由頁面內嵌的 JavaScript 函式庫 Turndown在新分頁中開啟 在瀏覽器端直接執行。貼上的 HTML 在瀏覽器內解析，不會產生任何攜帶原始數據到外部伺服器的網路請求。想親自確認的話，打開瀏覽器 DevTools 的 Network 分頁，在 HTML 輸入框放入一段獨特字串，按執行，確認沒有包含該字串的外發請求即可。

「瀏覽器內轉換」的意思是：被轉換的文件正文不被上傳。頁面本身仍從 CDN 經 HTTPS 提供，首次訪問可能載入標準的訪問統計腳本，但你輸入的文件數據不會外洩。

資訊萃取精確度：表格、程式碼、列表

Token 數是容易量化的指標，但最終決定 prompt 是否有效的，是資訊萃取精確度。

公開基準在以下任務中傾向 Markdown 優於 HTML：

• 表格萃取：ReleasePad 分析在新分頁中開啟 引用的 GPT 系評估中，Markdown 表格萃取精確度 60.7%，同等內容的 HTML 表格 53.6%，同數據下差距約 7 個百分點
• 程式碼區塊：Markdown fenced code 加語言提示（```python）可清晰保留語言訊號；HTML 中語言資訊藏在 class="language-python" 屬性內，模型必須從排版中解析出來
• 巢狀列表：Markdown 的縮排以極少 Token 提供強結構訊號；HTML 的 <ul><li><ul><li> 鏈式結構不僅消耗 Token，模型有時還會誤判子項目屬於哪一層列表

這不表示 Markdown 萬能（下一節整理 HTML 勝出的場景）。但在「帮我摘要這篇文章」「萃取這些欄位」「改寫這段」等日常 prompt 中，精確度數據與 Token 數據指向同一方向。

HTML 仍適合的例外

Markdown 不是永遠正確的答案。有三種情境直接貼 HTML 更合適：

語義資訊在屬性中時

aria-label、role、itemprop、microdata、Open Graph 標籤等資訊在 Markdown 中沒有對應語法。如果要模型做無障礙稽核、商品 metadata 萃取、schema.org 排版驗證，HTML 屬性本身就是分析對象。用 Markdown 轉換器把屬性刪掉，任務前提就壞了。

需要視覺佈局或圖形分析時

SVG 圖表、嵌入式圖表、<iframe> widget、互動元件的自訂 data-* 屬性，這些在 HTML 中保留、在 Markdown 中消失。2026 年 5 月 Anthropic 的 Thariq Shihipar 發表的 Using Claude Code: The Unreasonable Effectiveness of HTML在新分頁中開啟 指出，對產出豐富人類介面輸出的 AI agent 而言，HTML 的表達力（帶樣式佈局、互動元素、嵌入 SVG）值得付出較高的 Token 代價。這個邏輯對輸入也對稱適用：模型需要分析的「視覺」如果包含在輸入中，就該傳 HTML。

輸出結果要在瀏覽器直接渲染時

模型產出的結果需要直接渲染到瀏覽器畫面時，跳過 Markdown 中間層、全程走 HTML 管線，工具鏈会更簡單。但這更像是管線設計取捨，Markdown 與 HTML 的往返轉換足夠成熟，通常不會成為決定性因素。

實務工作流程：從網頁到 LLM 可用的 Markdown

以下是日常情境的操作流程——你有一個網頁或 HTML 郵件，想把內容送給 LLM 但不想付排版稅。整個流程以資料留在本機為前提。

步驟 1：取得 HTML

在 Chrome 或 Firefox 中右鍵目標頁面選「檢視頁面原始碼」，或從 DevTools 的 Elements 面板複製 <article> 或 <main> 元素的 outerHTML。HTML 郵件則從郵件客戶端的「檢視原始碼」取得。

只需要正文的話，只複製那棵子樹。在這個階段就把導覽列、側邊欄、頁尾剔除，比後端任何自動化都能省更多 Token 預算。

步驟 2：在瀏覽器中轉換

把 HTML 貼到 HTML 轉 Markdown，按下執行，右側面板立刻顯示 Markdown。

表格、圖片路徑、儲存格合併等細節轉換規則在此工具中已處理。反向需求——LLM 以 Markdown 回答後要轉回 HTML——同樣可以在瀏覽器內完成。兩方向的操作細節分別整理在 HTML 轉 Markdown 指南 與 Markdown 轉 HTML 完整指南。

步驟 3：貼上前清理

轉換後的 Markdown 快速瀏覽一遍，手動移除殘留雜訊：

• 頂端轉成項目符號的導覽連結
• 以段落形式殘留的 cookie 同意橫幅
• 頁尾版權或免責聲明

大約 1〜2 分鐘的手動修剪，比任何後續自動化步驟都能搶回更多 context 空間。

步驟 4：用清理後的 Markdown 寫 prompt

以下是一個對萃取類任務好用的模板：

以下是文件頁面的 Markdown。

任務：<一句話說清楚>
限制：<輸出格式、篇幅等指定>

---

<貼入清理後的 Markdown 內容>

Markdown 標題（#、##）讓模型在回答中可以引用具體位置（如「在 Syntax 節中…」），提高回答的具體性。

轉換時常見的 5 個陷阱

轉換過程中容易出錯的五點：

1. 程式碼區塊語言提示遺失：<pre><code class="language-python"> 應轉為 ```python。部分轉換器會丟掉語言提示，迫使模型猜測語言
2. colspan / rowspan 表格崩塌：GFM pipe 表格只支援矩形網格結構，合併儲存格會被壓平。結構化資料表格可考慮先轉 CSV 再轉 Markdown 的路徑，轉換步驟詳見 CSV 轉 Markdown 表格，對齊、儲存格內換行與轉義記法則整理在 Markdown 表格語法 與 GFM 表格快速參照
3. 行內 HTML 殘留：CommonMark 與 GFM 都允許行內 HTML。轉換結果中若殘留 <span class="text-red">重要</span> 這類標籤，就等於又回到包裹稅的桶子裡。選擇能產出純 Markdown 的轉換器
4. 相對路徑圖片與連結：<img src="/images/foo.png"> 會轉成 ![](/images/foo.png)，但 LLM 無法存取該本機路徑。改為絕對 URL，或在 prompt 中註明圖片不可用
5. CommonMark 與 GFM 規格差異：表格、工作清單、刪除線、自動連結是 GFM 擴充語法。下游工具若只支援嚴格 CommonMark，這些功能可能無法正確渲染。兩者的具體邊界與實測差異見 CommonMark 與 GFM 的差異

格式選擇速覽表

「摘要這篇文章」「萃取這些欄位」「用白話文改寫」這類日常 prompt，以 Markdown 為預設值即可。

常見問題

ChatGPT 的 context 用 Markdown 好還是 Plain text 好？

只要來源有任何結構（標題、列表、表格、程式碼），就選 Markdown。完全扁平的散文才考慮 Plain text。Plain text 最省 Token，但同時也丟掉了模型長 context 中導航所需的結構訊號。

Claude 對 Markdown 的理解是否優於 HTML？

Claude 兩種都能處理。Anthropic 官方 prompt 指南建議用 Markdown 式標題與列表分隔章節，同時推薦 XML 標籤（<instructions>、<context>）作為 prompt 各部分邊界。正文的 Token 效率 Markdown 領先，在正文外層用 XML 作為結構骨架是實際可行的搭配。

結構化資料不是用 JSON 或 XML 比較好嗎？

數據本身是表格型或記錄型（API 回應、設定檔）時，JSON 更合適。想明確分隔 prompt 各章節時，XML 更合適（Anthropic 文件就採用這個風格）。但對一般文件或文章類散文，兩者都無法在 Token 成本上勝過 Markdown。

能直接把 URL 轉成 LLM 用的 Markdown 嗎？

靜態頁面無法純客戶端取得任意外部 URL（CORS 阻擋）。先在瀏覽器中儲存頁面（Cmd/Ctrl+S）或從 DevTools 複製原始碼，再貼到 HTML 轉 Markdown 轉換器。轉換本身在瀏覽器內安全完成。

FormatArc 的轉換真的只在瀏覽器內執行嗎？

是的，轉換步驟 100% 在瀏覽器內執行。貼上的 HTML 由頁面內嵌的 Turndown在新分頁中開啟 JavaScript 函式庫本地解析，不會產生任何包含輸入數據的外發請求。頁面本身從 CDN 經 HTTPS 載入，首次訪問可能有標準統計請求，但你的輸入文字不包含在這些請求中。

總結

• LLM 輸入選擇 Markdown 優於 HTML。Token 大幅節省，模型可以專注於內容而非結構雜訊
• 本站實測同等內容 Token 減少約 71%（cl100k_base），外部基準報告 68〜87% 的減幅
• 內部文件、客戶資料、未公開草稿等機密 HTML 的處理，轉換工具的安全性至關重要。FormatArc 的 HTML 轉 Markdown 在瀏覽器內本地運作，原始 HTML 不會傳到外部伺服器
• LLM 的 Markdown 回答要轉回 HTML 時，可反向使用 Markdown 轉 HTML 工具，同樣在瀏覽器內完成