FormatArc HTML 轉 Markdown 轉換器的轉換結果畫面FormatArc HTML 轉 Markdown 轉換器的轉換結果畫面
作者: FormatArc 編輯部發布日期: 2026-09-02更新日期: 2026-09-02

HTML 轉 Markdown 指南:網頁轉 MD 的對照表與工具比較

把 HTML 網頁內容轉成 Markdown,是部落格平台遷移、網頁剪藏、Notion 匯出資料整理等工作中反覆出現的需求。如果你正在搜尋「html 轉 markdown」或「網頁 轉 md」,這篇文章會把轉換規則、工具選擇和常見陷阱一次講清楚。

結論先講

把 HTML 貼到 HTML 轉 Markdown,按下執行按鈕,立刻得到 Markdown。不需要安裝任何軟體,所有處理在瀏覽器內完成,資料不會傳到外部伺服器。

輸出的 Markdown 以 CommonMark在新分頁中開啟 為基礎語法,表格、任務清單、刪除線、自動連結等擴充遵循 GitHub Flavored Markdown(GFM)規格在新分頁中開啟

什麼情況下需要把 HTML 轉 Markdown

WordPress 或 CMS 遷移到靜態站台

WordPress 的文章資料以 HTML 格式匯出。若要遷移到 Hugo、Astro、Jekyll 等靜態網站產生器,或 GitHub Pages、vHugo 等 Markdown 驅動的平台,就需要把每篇文章轉成 Markdown。文章數量少時可以手動複製,但要保留結構且一次處理大量文章,用轉換工具比較保險。各匯出格式的注意事項詳見 WordPress 匯出 Markdown 指南

Notion 匯出資料的整理

Notion 支援 HTML 格式的匯出功能。但它產出的 HTML 包含大量獨有的 class 屬性和多層巢狀 div,直接貼到其他編輯器或工具裡很棘手。轉成 Markdown 後,多餘的佈局標籤會被移除,只剩下乾淨的文字結構,可讀性高很多。

網頁剪藏與筆記

想把網頁內容引用到 Obsidian、Logseq 等筆記工具或技術文件時,直接複製 HTML 會把不需要的標籤和 inline style 一起帶進來。轉成 Markdown 後,只保留標題、列表、連結、程式碼區塊等結構。另外,把內容當作 prompt context 傳給 LLM 時,Markdown 比複雜的 HTML 佔用的 token 少得多。

HTML 郵件正文的再利用

收到 HTML 格式的業務郵件,想把正文轉入內部 wiki 或技術文件時,手動刪掉所有標籤非常耗時。用轉換工具可以在保留標題、列表、連結結構的情況下,把乾淨的 Markdown 文字萃取出來。

在 FormatArc 中轉換的操作步驟

HTML 轉 Markdown 的流程很簡單:貼上 HTML,按下按鈕,右側立刻顯示 Markdown。

步驟 1:開啟工具

開啟 HTML 轉 Markdown 頁面。

步驟 2:貼上 HTML

在左側輸入編輯器中貼上要轉換的 HTML 程式碼。<table><ul><ol><a><img><pre><code> 等主要 HTML 標籤都有對應。

步驟 3:按下執行按鈕

按下執行按鈕後,右側編輯器立刻輸出 Markdown。

FormatArc HTML 轉 Markdown 轉換結果FormatArc HTML 轉 Markdown 轉換結果

所有處理都在瀏覽器內本地完成。即便是公司機密文件或未公開的草稿,也不會傳到外部伺服器。

HTML 元素與 Markdown(GFM)的對照表

大多數 HTML 元素都可以轉為 Markdown。但 Markdown 的表達範圍比 HTML 小,沒有對應語法的屬性或視覺樣式標籤會在轉換過程中被移除。

下表整理 WHATWG HTML Living Standard在新分頁中開啟 中的主要元素如何對應到 CommonMark在新分頁中開啟GFM 規格在新分頁中開啟,以及轉換時會遺失哪些資訊。

HTML 元素GFM Markdown 對應語法轉換時被移除的資訊
標題 <h1><h6>#######(ATX)依標題層級決定 # 數量。<h1> 對應 #<h6> 對應 ######。CommonMark 與 HTML 一樣只定義 6 個層級。
無序列表 <ul>-*+ 符號巢狀結構以縮排保留。符號選擇取決於轉換工具的預設。
有序列表 <ol>1.2.、… 符號start 屬性(起始編號)和 type(如 ai)在 Markdown 中無對應語法,會被移除。
表格 <table>GFM 管線表格(`col
連結 <a href>[文字](url)href 與連結文字保留。targetrel 等屬性移除,title 屬性以選擇性形式 [文字](url "title") 保留。
圖片 <img src alt>![alt](src)src 路徑與 alt 替代文字保留。widthheightsrcsetloading 等屬性無對應語法,會被移除。
程式碼 <pre> / <code>圍欄程式碼區塊 / 行內 `code`<pre><code> 轉為圍欄程式碼區塊,單獨的 <code> 轉為行內程式碼。class="language-..." 可輸出為區塊的語言標註。
引用 <blockquote>> 前綴每行加上 > 前綴。巢狀引用遞加 >cite 屬性無對應,會被移除。
粗體 <strong> / <b>**文字**語意粗體(<strong>)與視覺粗體(<b>)合併為同一 ** 語法,語意區分不保留。
斜體 <em> / <i>*文字*強調(<em>)與斜體(<i>)合併為同一 * 語法,語意區分不保留。

表中沒列出的元素(styleclass、佈局用 <div>/<span> 包裝標籤、行內事件處理程式等)會被自動移除,只留下結構性的 Markdown。GFM 允許行內 HTML,因此部分轉換工具會把不支援的標籤以原始 HTML 片段的形式保留在 Markdown 中,而非直接刪除。

CLI 與程式函式庫的選擇

除了瀏覽器工具,有時候需要在終端機或程式碼中把 HTML 轉成 Markdown。依你使用的技術棧選擇即可。

Pandoc(通用文件轉換 CLI)

pandoc -f html -t markdown -o output.md input.html

Pandoc 不只處理 HTML,還能轉換 Word(docx)、EPUB、LaTeX 等格式。要使用 GFM 表格語法,加上 -t gfm 參數。適合大批量檔案轉換或結構複雜的文件。需要在本地環境安裝。

Turndown(JavaScript / Node.js)

import TurndownService from "turndown";

const turndown = new TurndownService();
const markdown = turndown.convert("<h1>Hello</h1><p>World</p>");
console.log(markdown);

Node.js 生態系中廣泛使用的標準函式庫。搭配 turndown-plugin-gfm 外掛可支援 GFM 表格、刪除線、任務清單。在瀏覽器環境也能執行,所以要把轉換功能內建到自己的網頁應用時很方便。搜尋「html to markdown javascript」時,Turndown 是最常出現的答案。

Python 與 Go 函式庫

如果建置管線或資料管線不是 Node.js,而是 Python 或 Go,各生態系有不同的主流函式庫。

markdownify(Python)

pip install markdownify
from markdownify import markdownify

html = "<h1>Title</h1><p>Hello <strong>world</strong></p>"
print(markdownify(html, heading_style="ATX"))

markdownify 以 BeautifulSoup 為基礎,因此爬蟲或抓取取得的、結構不太完整的 HTML 也能穩定處理。可用 heading_style="ATX"bullets="-*+"strip=["script", "style"] 等參數精細控制輸出。

html2text(Python)

pip install html2text
import html2text

h = html2text.HTML2Text()
print(h.handle("<h1>Title</h1><p>Hello world</p>"))

長期持續維護的函式庫,除了在 Python 程式中呼叫,也能當 CLI 工具使用(html2text input.html)。快速轉換已儲存的網頁內容時很方便。

html-to-markdown(Go – JohannesKaufmann)

go install github.com/JohannesKaufmann/html-to-markdown/cli/html2markdown@latest
html2markdown < input.html > output.md

Go 社群的事實上標準函式庫。同時提供函式庫和獨立 CLI 二進位檔案兩種形式,支援表格和自訂轉換規則。在 CI runner 或 Docker 容器環境中,以單一靜態二進位檔案執行非常輕量。

依用途選擇工具

工具是否需要安裝基礎語言適合場景
FormatArc不需要(瀏覽器)即時的單次轉換、機密資料
Pandoc需要(Homebrew / apt 等)CLI大批量轉換、多種文件格式
Turndownnpm 安裝JavaScriptNode.js 服務、網頁前端內建
markdownifypip 安裝Python網頁爬蟲與資料管線
html2textpip 安裝Python已儲存網頁的文字萃取與 CLI 操作
JohannesKaufmanngo installGoCI/CD 管線、Docker 用輕量靜態二進位

HTML 表格轉 Markdown 的注意事項

HTML 轉 Markdown 時最容易出錯或格式崩壞的地方,就是 <table> 標籤。

Markdown 的管線表格語法由 GFM 規格在新分頁中開啟 定義,表頭列、資料列、欄對齊(align)都能正常表達。但 HTML 表格提供的複雜佈局功能並非全部對應。

能乾淨轉換的標準表格結構

<thead><tbody> 結構化、儲存格為單純的 <td><th>、表頭使用 align="left|center|right" 對齊屬性的標準表格,可以無損轉為管線表格。

<table>
  <thead><tr><th>產品名稱</th><th align="right">價格</th></tr></thead>
  <tbody>
    <tr><td>蘋果</td><td align="right">120</td></tr>
    <tr><td>香蕉</td><td align="right">80</td></tr>
  </tbody>
</table>

轉換結果如下:

| 產品名稱 | 價格 |
|--------|------:|
| 蘋果     |   120 |
| 香蕉     |    80 |

無法直接轉換的三種結構

Markdown 表格規格中沒有直接對應語法、轉換時會產生損壞的代表性結構有三種:

  1. colspan / rowspan(儲存格合併) — 管線表格要求所有行列構成矩形網格。儲存格合併資訊不支援,轉換工具依各自邏輯將儲存格拆分或合併內容到單一儲存格中。
  2. 儲存格內的區塊元素<td> 內包含列表(<ul>/<ol>)、程式碼區塊(<pre>)、或另一層巢狀表格(<table>)時,管線表格結構會崩壞。行內元素(<strong><em><a><code>)則能正常轉換。
  3. 儲存格內的換行(<br> — 儲存格內出現換行時,依解析器不同,換行可能被忽略,也可能以 GFM 允許的行內 HTML 標籤 <br> 形式直接插入。

實務上的對策

遇到管線表格無法表達的複雜結構時,有兩種實際做法:

  • 整篇正文轉為 Markdown,但該複雜表格以原始 HTML(<table>...</table>)形式保留。GFM 和多數靜態網站產生器(GitHub、vHugo、Hugo 等)都能正常渲染 Markdown 中的行內 HTML。
  • 如果不是複雜佈局而是純粹的資料集,先把資料整理成行列,再用 CSV 轉 Markdown 產生 Markdown 表格,比較穩定。

管線表格的完整語法(對齊、儲存格內換行、轉義)詳見 Markdown 表格語法總整理

常見問題與對策

style 與 class 屬性被移除

HTML 標籤上的 style 行內 CSS 和 class 屬性在 Markdown 中沒有對應概念,轉換時自動移除。如果專案需要保留視覺樣式資訊,要在轉換前留一份原始 HTML 備份。

貼上來源如果是 Word、Google 文件、或一般網頁,常會混入多餘標籤(<o:p>mso-* 樣式、無意義的 span 等)。去除這些多餘標籤的完整步驟詳見 HTML 貼上後轉 Markdown 的清理方法Markdown 轉 HTML 後再套用 CSS Classes 重新渲染,是另一種保留樣式的工作流程。

圖片相對路徑問題

<img src="..."> 標籤會轉為 ![alt](src) Markdown 語法。但如果原始 HTML 中的圖片使用相對路徑(例如 ./images/photo.png),Markdown 檔案搬到其他平台或專案後,路徑可能對不上,導致圖片顯示不出來。

建議先用 HTML 轉 Markdown 轉換,確認圖片替代文字(alt)和連結結構無誤後,再將圖片檔案複製和路徑修正作為獨立步驟處理。

空白字元、&nbsp;、轉義反斜線(\

轉換後的 Markdown 中可能出現預想不到的字元。&nbsp; 實體依轉換器不同,會變成一般空格或不分行空格,連續空白會被壓縮為一個空格。

另外,正文中 *_#[ 等字元前可能自動加上反斜線(\)。這是轉換引擎為了防止這些字元被誤解為 Markdown 格式語法(粗體、標題、連結等)而自動加入的轉義。如果確認該字元不是列表或強調的起始點,可以手動移除。

常見問題

支援 GFM 表格嗎?

支援。HTML 的 <table> 元素會轉為 GFM 管線表格(| 列1 | 列2 |),<thead> 表頭列和基本的欄對齊(align)屬性也會保留。

轉換是在瀏覽器內處理嗎?

是的。HTML 解析和 Markdown 文字產生全部在瀏覽器的 JavaScript 中執行。公司內部文件或未公開的稿件貼上後,不會傳送到外部伺服器。

跟 Pandoc 或 Turndown 有什麼不同?

Pandoc 需要本地 CLI 環境安裝,Turndown 需要 Node.js 專案設定。FormatArc 的網頁轉換器不需要安裝,在瀏覽器中貼上就能立即取得結果,單次轉換最快。但大批量自動化或建置腳本的話,Pandoc 或 Turndown 函式庫更適合。

圖片和相對路徑會保留嗎?

<img src="..."> 會轉為 ![alt](src),圖片 URL 和替代文字保留。原始 HTML 的相對路徑原樣保留,所以遷移到其他平台時需要另外複製圖片檔案並視情況修正路徑。

class 和 style 屬性為什麼被移除?

Markdown 是表達文字結構的輕量標記語言,不是用來做樣式的。沒有對應行內 CSS 或 class 屬性的語法,因此轉換時移除這些屬性,產出跨環境相容且可移植性高的乾淨文字。

PDF 也能轉嗎?

這個轉換工具以 HTML 為輸入,PDF 無法直接處理。要將 PDF 轉為 Markdown,請使用 PDF 轉 Markdown。不過如果 PDF 中表格結構沒有保留,欄位可能會對不齊。表格崩壞的原因與對策詳見 PDF 轉 Markdown 表格格式崩壞的原因

總結

HTML 轉 Markdown 是部落格平台遷移、網頁剪藏、Notion 資料整理等各種工作中都需要的基本操作。

如果是單次轉換或需要安全的本地處理,直接到 HTML 轉 Markdown 貼上即可。搜尋「網頁 轉 markdown」或「html 轉 md」時,這個工具是最快的起點。如果後續需要把 Markdown 再轉回 HTML,或使用 CSV 資料產生表格,FormatArc 都有對應的工具可以搭配使用。CSV 資料產生表格的操作詳見 CSV 轉 Markdown 表格指南