HTML Markdown 変換ツール

HTML から Markdown への変換とは？

HTML in:

  <h2>Pricing</h2>
  <p>Plans start at <strong>$9/mo</strong>. See the <a href="https://example.com/pricing">details</a>.</p>
  <table>
    <thead><tr><th>Plan</th><th>Price</th></tr></thead>
    <tbody><tr><td>Pro</td><td>$9</td></tr></tbody>
  </table>

Markdown out:

  ## Pricing

  Plans start at **$9/mo**. See the [details](https://example.com/pricing).

  | Plan | Price |
  | ---- | ----- |
  | Pro  | $9    |

  <!-- <div>, classes, and inline styles in the source are dropped — Markdown can't represent them. -->

主な機能

使用例

<table>
  <thead><tr><th>Region</th><th>Sales</th></tr></thead>
  <tbody>
    <tr><td>EMEA</td><td>1,204</td></tr>
    <tr><td>APAC</td><td>980</td></tr>
  </tbody>
</table>

| Region | Sales |
| ------ | ----- |
| EMEA   | 1,204 |
| APAC   | 980   |

<p>Read the <a href="https://example.com/guide">setup guide</a> and the <a href="https://example.com/api">API reference</a>.</p>

Inline:
Read the [setup guide](https://example.com/guide) and the [API reference](https://example.com/api).

Reference:
Read the [setup guide][1] and the [API reference][2].

[1]: https://example.com/guide
[2]: https://example.com/api

<ul>
  <li>Build
    <ol>
      <li>Compile</li>
      <li>Bundle</li>
    </ol>
  </li>
  <li>Ship</li>
</ul>

- Build
  1. Compile
  2. Bundle
- Ship

<article>
  <h1>Changelog</h1>
  <p>We shipped <strong>dark mode</strong> and fixed <code>parseDate()</code>.</p>
  <blockquote><p>Thanks to everyone who reported it.</p></blockquote>
</article>

# Changelog

We shipped **dark mode** and fixed `parseDate()`.

> Thanks to everyone who reported it.

HTML を Markdown に変換する方法

1. 1

   HTML を貼り付ける

   コピーした Web ページ、CMS や WYSIWYG のエクスポート、スクレイプした HTML スニペットを入れます。DOM は貼り付けるそばからブラウザ内で解析されて Markdown にシリアライズされます — アップロードなし、ブラウザのメモリを超えるサイズ上限もなし。

2. 2

   見出しとリンクのスタイルを選ぶ

   ATX（#）か Setext（===）の見出しと、インラインか参照のリンクを選びます。Markdown はライブで再描画されるので、スタイルを即座に比較できます。出力は GitHub Flavored Markdown を対象とし、テーブル、タスクリスト、打ち消し線を含みます。

3. 3

   コピーまたはダウンロード

   コピーをクリックして Markdown を取得、またはダウンロードで .md ファイルとして保存します。逆方向に進むには、Markdown → HTML タブに切り替えて Markdown を貼り付け、描画された HTML を取り戻してください。

よくある落とし穴

<div class="callout warning"><span style="color:red">Heads up!</span></div>
<!-- expecting the callout box and red colour to survive -->

Heads up!
<!-- container and styles dropped; only the text remains in Markdown -->

Line one<br>Line two
<!-- if the break form is removed, these merge into one line -->

Line one  
Line two
<!-- two trailing spaces preserve the <br> as a hard break -->

<table><tr><td><table><tr><td>inner</td></tr></table></td></tr></table>
<!-- nested table can't become a flat pipe table -->

<!-- Flatten to a single-level table first: -->
<table><tr><td>inner</td></tr></table>
→ | inner |
  | ----- |

<style>.x{color:blue}</style>
<script>track()</script>
<p>Body</p>
<!-- expecting the style and script to come through -->

Body
<!-- only the content survives; <script>/<style> are dropped -->

一般的なユースケース

Web や CMS のコンテンツを Notion、Obsidian、静的サイトへ移行

CMS、WordPress エクスポート、古い HTML サイトからページを取り出し、Notion、Obsidian、Hugo、Jekyll にそのまま入る Markdown に変換します。冗長なマークアップを、Git リポジトリできれいに生き、レビューで素直に差分の取れる移植可能なテキストと交換できます。

WYSIWYG エディターからエクスポート

リッチテキストエディターは密で属性の多い HTML を出力します。その出力をここに貼り付けて、下にあるきれいな Markdown — 見出し、リスト、リンク、強調 — を取り戻せば、コンテンツがエディターに閉じ込められたままになるのではなく、ドキュメントパイプラインや Markdown ベースのナレッジベースに移れます。

HTML をきれいな Markdown にして LLM や RAG パイプラインに投入

生の HTML は、モデルが決して必要としないタグ、スクリプト、スタイルにトークンを焼きます。スクレイプしたページを Markdown に変換するとそのノイズが取り除かれ、LLM がよく読む構造は保たれるので、コンテキストウィンドウにより多くの実コンテンツを収め、検索用によりきれいな埋め込みを得られます。

リッチテキストの貼り付けを Markdown に変換

Web ページ、メール、ドキュメントから書式付きテキストをコピーすると、クリップボードに HTML として届きます。それをここに貼り付けて、コミットしたり、プルリクエストで送ったり、メモに書き込んだりできる Markdown に変えてください — 書式は保たれ、ごちゃごちゃは消えます。

ページを Markdown としてアーカイブ

Web ページの意味あるコンテンツを、スクリプトやトラッキングだらけの重い HTML スナップショットではなく、小さく将来も使える .md ファイルとして保存します。Markdown は数十年後でもどんなテキストエディターでも読めて、わずかな容量しか取りません。

レガシー HTML ドキュメントを Markdown に

手書き HTML として書かれた古いドキュメントはメンテナンスが苦痛です。それを Markdown に変換して、lint でき、プルリクエストでレビューでき、静的サイトジェネレーターで描画できる、現代の docs-as-code ワークフローに持ち込めます。

技術的な詳細

CommonMark と GitHub Flavored Markdown の出力

変換ツールは素の CommonMark か、デフォルトでは GitHub Flavored Markdown スーパーセットを対象にできます。CommonMark は見出し、強調、リスト、リンク、画像、コード、引用を正確に定義します。GFM は一般的な HTML から直接対応付く 4 つの構成要素を追加します：<table> → パイプテーブル、チェックボックスのリスト項目 → タスクリスト、<del>/<s> → 打ち消し線、素の URL → 自動リンク。ほとんどの Web コンテンツはテーブルなどを使うので、GFM 出力が実用的なデフォルトです。配信先のレンダラーが GFM 拡張を理解しない場合にのみ CommonMark を選んでください。その場合テーブルは生の HTML にフォールバックします。

ロッシーで不可逆な変換 — はっきり明言します

HTML は Markdown より厳密に表現力が高いので、変換はロスレスになり得ず、それを率直に伝える価値があります。Markdown には <div>、<span>、その他の汎用コンテナの構文がなく、クラス名、id、インライン style、colspan/rowspan、任意の data-* 属性を運ぶ手段がなく、ほとんどのセマンティックまたはレイアウト要素の表現もありません。それらは展開される（内容を保ちタグを落とす）か、捨てられる（属性）か、あるいは — 落とすと意味が失われるとき — 生のインライン HTML として保持されます。HTML → Markdown → HTML の往復は元を再現しません。これは意図的なトレードオフです：Markdown はきれいで差分が取れ、人間が編集できるために存在するのであって、HTML を映すためではありません。多くの競合はこれをぼかしますが、明言することで、Markdown が正しい対象かどうかを目を開けて判断できます。

スタイルのトレードオフ：ATX/Setext、インライン/参照、フェンス/インデント

3 つの出力選択には実際のトレードオフがあります。ATX 見出し（#）は 6 レベルすべてをカバーし、きれいに grep できます。Setext（下線付き）は H1/H2 にしか存在しないので、ツールは上位 2 レベルにそれを出力し、それ以下では ATX にフォールバックします。インラインリンクは URL をテキストの隣に保ち — リンクが疎なときに最適です。参照リンクは URL をドキュメント末尾に引き — リンクの密な本文やラベルによる再利用に最適です。コードでは、フェンス付きブロック（トリプルバッククォート）が言語インフォ文字列を運び、安全にネストするのに対し、インデント（4 スペース）のコードブロックは言語を表現できず、リスト内で壊れます — そのためこの変換ツールは <pre><code> から常にフェンス付きブロックを出力します。

ベストプラクティス

変換前に HTML を整形する

圧縮された、あるいは深く絡まった HTML — 特にネストしたレイアウトテーブルや散らばったインライン要素 — は、先に整っているとよりきれいに変換されます。乱雑なソースを HTMLフォーマッターに通してきれいに整形・正規化してから変換してください。きれいな入力は、生 HTML へのフォールバックの少ないきれいな Markdown を生みます。

ロッシーな脱落を予期してレビューする

変換を設計上ロッシーなものとして扱ってください。クラス、インラインスタイル、<div>/<span> ラッパー、特殊な属性は出力では消えており、移植可能な Markdown には通常それが望ましいのですが — 属性にしか存在しなかった意味的に重要なもの（aria-label、colspan で結合されたセル）がないか結果をざっと見て、重要なら手で追加してください。

ドキュメントの密度に合わせてリンクスタイルを選ぶ

リンクがあちこちにある程度の本文にはインラインリンクを使ってください — URL がテキストの隣に残り、ソースが自然に読めます。セクションがリンクだらけだったり同じ URL を再利用したりするときは参照リンクに切り替えてください：それらを末尾の番号付きリストに引くと段落が見渡しやすく保たれ、長い URL の繰り返しを避けられます。

ページを LLM に送る前に Markdown に変換する

Web コンテンツをモデルに投入するとき — プロンプト、埋め込み、RAG ストアのために — まず HTML を Markdown に変換してください。トークンを浪費しノイズを加えるタグ、スクリプト、スタイルを取り除き、モデルが実際に使う構造を保ち、コンテキストウィンドウに大幅に多くの実コンテンツを収められます。

変換後に複雑なテーブルを確認する

GFM パイプテーブルはフラットです — ネストしたテーブルなし、セル内のブロックコンテンツなし、結合セルなし。データの多いテーブルやレイアウトテーブルを変換したら、Markdown を確認してください：単純なグリッドは完璧に変換されますが、colspan やネストしたブロックを含むものは劣化し、生の HTML として現れることがあります。きれいなパイプテーブルが重要なら、先にソーステーブルを簡素化してください。

よくある質問