FIRST CH TOOLS / テキスト / 57 HTML → Markdown
HTML → Markdown 変換
WebページのHTMLを左に貼ると、Markdownになって右に出ます。見出し・リスト・表・リンク・画像・コードブロックに対応し、script ・style ・装飾のための div や span は自動で落とします。既存サイトの原稿をMarkdown管理へ移すとき、AIが取得したページを読みやすく整えるときに使ってください。
貼り付けるとその場で変換されます
貼り付けたHTMLがブラウザの外へ出ることはありません(解釈も組み立てもこのページの中だけで動いています)。ファイルの読み込みも端末内で読むだけで、アップロードは行いません。URLパラメータで直接呼び出せます: /html-md/?html=%3Ch1%3EA%3C%2Fh1%3E / /html-md/?main=1&base=https://example.com/
HTMLからMarkdownへ移すと落ちるもの
セルの結合(colspan / rowspan)は書けない
<td colspan="2">合計</td> | 合計 | | ← 空セルで埋めるしかない
Markdownの表にセルの結合はありません。このツールは colspan を空セルで埋め、rowspan は先頭の行にだけ値を置いて、いくつ潰れたかを「読み取りの結果」に出します。結合が意味を持つ表(見出しが2段ある集計表など)は、表をHTMLのまま残すを選ぶか、表を作り直してください。
セルの中にリストやコードブロックは入らない
<td><ul><li>A</li><li>B</li></ul></td>
Markdownの表の1行は1行で書き切る決まりなので、セルの中に入れられるのはインライン要素(強調・リンク・コードスパン)だけです。リスト・表・コードブロック・引用が入ったセルを見つけたら、このツールはその表だけHTMLのまま残します(途中で壊れたMarkdownを出すより安全なため)。セル内の <br> は表の中だけ <br> のまま書きます。
表・タスクリスト・取り消し線は CommonMark には無い
| a | b | ← GFM(GitHub)の拡張 - [x] 済み ← GFMの拡張 ~~取り消し~~ ← GFMの拡張
Markdownの標準仕様(CommonMark)に表はありません。表・タスクリスト・取り消し線・自動リンクはGitHub Flavored Markdown(GFM)の拡張で、GitHub・GitLab・Slack・Notion・Obsidian・多くの静的サイトジェネレーターが対応しています。貼り先がCommonMarkしか読まない場合はGFMのチェックを外してください(表はHTMLのまま、取り消し線は <del> のまま残します)。
定義リスト(dl / dt / dd)に対応する記法が無い
**HTML** : HyperText Markup Language
このツールは <dl> を「太字の語+コロンの行」で書き出します。これはMarkdown Extra の定義リスト記法で、CommonMark にも GFM にも含まれません。対応していない表示側ではコロンがそのまま文字として出ます。気になる場合は箇条書きに直してください。
sup / sub / mark はHTMLのまま残る(消される先もある)
m<sup>2</sup> / <mark>強調</mark>
上付き・下付き・ハイライトはMarkdownに記法が無いため、既定ではHTMLタグのまま残します。ただしGitHubのREADMEやnpmの説明文は、表示のときに一部のタグを削除します(サニタイズ)。貼り先で消えて困る場合は「Markdownに無い要素」を文字だけ残すにしてください。<iframe> ・<video> ・<svg> も同じ扱いです。
相対URLは貼った先で必ず壊れる
<a href="/about/"> → [会社概要](/about/) ← 別サイトでは404 ベースURLを入れると → [会社概要](https://example.com/about/)
取得したページのHTMLには /about/ や ../img/a.png のような相対パスが入っています。そのままMarkdownにして別の場所へ貼るとリンク切れ・画像切れになります。ベースURLに元ページのアドレスを入れると、リンクと画像を絶対URLへ直します。相対パスが残っている件数は「読み取りの結果」に出ます。
<br> は「行末の半角スペース2つ」になる(目に見えない)
1行目·· ← 「··」が半角スペース2つ=改行 2行目
Markdownで段落内改行を表すのは行末の半角スペース2つです。見えないうえに、エディタの「保存時に行末の空白を削除」設定で黙って消えます。消えると2行が1行につながります。確実に残したいときは<br> の書き方をバックスラッシュ(CommonMark準拠)か <br> のままに変えてください。
class・style・id は落ちる(見た目は再現されない)
<p class="lead" style="color:#c8501f">本文</p> → 本文
Markdownは文書の構造だけを書く記法で、見た目を指定する手段がありません。クラス・インラインスタイル・色・文字サイズ・中央寄せはすべて落ちます(表の列の配置だけは align 属性と text-align を読んで :---: に残します)。レイアウトのための <div> ・<span> も印だけ外して中身を流します。
本文以外(ヘッダー・ナビ・フッター)も一緒に付いてくる
ページ全体のHTML → メニュー・パンくず・フッターの文字も本文に混ざる
ページ全体のHTMLを貼ると、グローバルナビやフッターの文字列もMarkdownになります。「本文だけ(main / article)」を入れると <main> か <article> の中だけを取り出し、header ・nav ・footer ・aside ・form を落とします。script ・style と、hidden 属性や display:none が付いた要素は、この設定に関係なく常に取り除きます。
本文の記号は意味を持ってしまう
2 * 3 = 6 → 2 \* 3 = 6 [注1] → \[注1\]
元の文章に * ・_ ・[ ・` や、行頭の # ・- ・1. が入っていると、そのままではMarkdownの記法として読まれてしまいます。このツールはバックスラッシュで打ち消します(snake_case のように単語の途中にあるアンダースコアは読みやすさを優先してそのまま残します)。打ち消しが不要なら「記号をエスケープ」を外してください。
見出しのレベルは元のHTMLのまま
<h2>…</h2> から始まるページ → ## から始まるMarkdown
ページによっては h1 がロゴで、本文が h2 から始まります。このツールはレベルを勝手に繰り上げません(勝手に上げると、本文に h1 が2つあるページで構造が壊れるため)。貼り先の都合に合わせて後から # の数を揃えてください。
壊れたHTMLでも止まらない
<a href="x>リンク</a> ← 引用符が閉じていない
このツールはブラウザのDOM(DOMParser ・innerHTML)を使わず、HTMLの解釈を自前で行っています。閉じ忘れたタグは末尾でまとめて閉じ、行き場のない閉じタグは捨てます。引用符が閉じていない属性はそこで打ち切り、指摘として出します(打ち切らないと残り全部を属性値として飲み込むため)。何をどう補ったかは必ず「読み取りの結果」に出します。
対応している要素: 見出し(h1〜h6)・段落・改行・強調(strong / b / em / i)・取り消し線(del / s)・コード(code / pre、class="language-*" から言語を拾います)・引用(blockquote)・水平線・リスト(ul / ol、入れ子・start 属性・チェックボックス)・表(thead / tbody / caption / align)・リンク(a、参照形式にもできます)・画像(img、alt と title)・定義リスト(dl)・figure / figcaption・details / summary。
How to Use
- HTMLを貼り付けるページのソース、開発者ツールでコピーしたHTML、CMSの本文などを左の欄に貼ります。.html ファイルのドラッグ&ドロップにも対応しています。
- 移し先に合わせて整えるページ全体を貼ったなら「本文だけ」を入れ、別の場所へ貼るなら「ベースURL」に元ページのアドレスを入れてリンクを絶対URLに直します。
- Markdownをコピーする右の欄に結果が出ます。そのままコピーするか .md として保存してください。表やHTMLのまま残った要素は「読み取りの結果」で確認できます。
About This Tool
HTMLの解釈をブラウザに任せていません。この手のツールは DOMParser や innerHTML でHTMLを読むのが普通ですが、このツールは字句解析から木の組み立てまでを自前で持っています。理由は2つあります。ひとつは、同じロジックをMCPサーバー(Node.js)でも動かすため——DOMに依存すると、ブラウザとAIエージェントで結果が変わります。もうひとつは安全のためで、貼り付けたHTMLを innerHTML に入れると、その中の <img onerror> のようなコードがこのページ上で動いてしまいます。解析だけを行う実装なら、貼り付けた内容が実行されることはありません。
壊れたHTMLでも結果を返します。実際のWebページから取ってきたHTMLは、閉じタグの無い <li> や <p> 、対応の無い閉じタグ、引用符の閉じ忘れを普通に含みます。このツールはブラウザと同じように開いたままの要素を末尾で閉じ、行き場のない閉じタグを捨てて変換を続けます。ただし黙って直すのではなく、補った件数を「読み取りの結果」に出します。属性の引用符が閉じていない場合だけは打ち切ります——そこで止めないと、残りの文書すべてを1つの属性値として飲み込んでしまうためです。
Markdownに書けないものは、黙って捨てずに報告します。セルの結合・定義リスト・上付き文字・iframe など、Markdownに対応する記法が無い要素は必ずあります。このツールは「HTMLのまま残す/文字だけ残す/取り除く」を選べるようにしたうえで、何が起きたかを毎回一覧に出します。移行作業で怖いのは変換の失敗ではなく、失われたことに気づかないまま公開してしまうことだからです。
相対URLは移行でいちばん壊れるところです。元のページの中では正しく動いていた /about/ や ../img/a.png は、Markdownを別の場所(リポジトリのREADME・別ドメインのCMS)へ貼った瞬間に別の場所を指します。ベースURLを入れておけば、リンクと画像を絶対URLへ直したうえで、#anchor やすでに絶対URLのものはそのまま残します。
AIエージェントが取得したページの後処理にも使えます。HTMLのままLLMに渡すと、タグと属性でトークンを大量に消費します。本文だけを取り出してMarkdownにすれば、同じ内容がおおむね数分の一の長さになり、見出しや表の構造も保てます。この変換はMCPツール html_to_markdown としても提供しているので、ブラウザを開かずにエージェントから直接呼べます。
逆方向(Markdownから配布物を作る)はMarkdown→PDF変換とMarp Markdown→スライドが使えます。表だけを扱うならMarkdownテーブル整形&CSV/TSV変換、HTMLの特殊文字そのものを扱うならHTMLエンティティ・特殊文字エスケープをどうぞ。
From AI Agents
この変換ロジックは、MCP(Model Context Protocol)サーバー @first-ch/tools-mcp の html_to_markdown ツールとしても提供しており、ブラウザを使わずAIエージェントから直接呼び出せます。取得したページのHTMLをそのまま渡せば、本文だけをMarkdownにして返します(ネットワークへは出ないので、取得そのものはエージェント側で行ってください)。導入方法の詳細は AIエージェントからの使い方 を参照してください。
導入
claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp
呼び出し例
# HTML断片をMarkdownへ html_to_markdown(html="<h1>見出し</h1><p>本文</p>") # 取得したページから本文だけを取り出し、相対URLを絶対URLに直す html_to_markdown(path="/tmp/page.html", main_only=true, base_url="https://example.com/blog/1/") # リンクを外し、画像も落として文章だけにする(要約の前処理) html_to_markdown(html="...", links="strip", images="drop") # CommonMarkだけの環境へ貼る(表はHTMLのまま残る) html_to_markdown(path="/tmp/page.html", gfm=false, outputPath="/tmp/page.md")
Other Tools
- 01画像→WebP一括変換WebP Converter
- 02白背景の透過White BG Remover
- 03コントラスト比チェッカーContrast Checker
- 04文字数カウントCharacter Counter
- 05llms.txt ジェネレーターllms.txt Generator
- 06JSON-LD構造化データ生成JSON-LD Generator
- 07Markdown→PDF変換MD → PDF
- 08OGPメタタグ生成ウィザードOGP Wizard
- 09faviconジェネレーターFavicon Generator
- 10TikTok投稿ツールTikTok Publisher
- 11文字コード・改行コード変換Encoding Converter
- 12画像→AVIF変換+picture生成AVIF Converter
- 13テストデータ生成Test Data Generator
- 14Marp Markdown→スライドMarp Slides
- 15テキスト・コード差分チェッカーDiff Checker
- 16Cron式ビジュアル解説&発火日時Cron Explainer
- 17Base64 & Data URI変換Base64 & Data URI
- 18URLパラメータ分解・UTMタグ編集URL Parameters
- 19HTMLエンティティ・特殊文字エスケープHTML Escape
- 20JSON ⇄ YAML 相互変換&整形JSON ⇄ YAML
- 21PX ⇄ REM / EM 単位変換&スケール表PX ⇄ REM / EM
- 22Colorコード変換&アルファ透過Color Converter
- 23MD5 / SHA-256 ハッシュ生成Hash Generator
- 24JWTデコーダー&有効期限チェッカーJWT Decoder
- 25User-Agent解析&デバイス判定User-Agent Parser
- 26UUID (v4) & ULID 一括生成UUID & ULID Generator
- 27アスペクト比計算&レスポンシブサイズAspect Ratio Calculator
- 28Markdownテーブル整形&CSV/TSV変換Markdown Table
- 29SQLクエリフォーマッター&整形SQL Formatter
- 30QRコード生成QR Code Generator
- 31正規表現テスターRegex Tester
- 32UNIXタイムスタンプ⇄日時変換Unix Time Converter
- 33新規タブメモ帳New Tab Memo
- 34画像リサイズ&クロップImage Resizer
- 35EXIF情報の確認&除去EXIF Viewer
- 36robots.txt ジェネレーターrobots.txt Generator
- 37安全なパスワード生成Password Generator
- 38文字列ケース変換Case Converter
- 39CSV/TSV ⇄ JSON 相互変換CSV ⇄ JSON
- 40PDF結合・分割・ページ抽出PDF Merge & Split
- 41全角⇄半角変換&テキストクリーナーZenkaku ⇄ Hankaku
- 42X(Twitter)投稿の文字ウェイト計算X Post Counter
- 43CSS clamp() フルイドタイポグラフィ計算機CSS clamp() Calculator
- 44CSSグラデーションジェネレーターCSS Gradient Generator
- 45画像からカラーパレット抽出Palette Extractor
- 46QRコード読み取りQR Code Reader
- 47SVG最適化&data URI化SVG Optimizer
- 48リダイレクトルール ジェネレーターRedirect Generator
- 49IPアドレス・CIDR計算機CIDR Calculator
- 50カレンダー予定(.ics)ジェネレーターICS Generator
- 51イージング(cubic-bezier)プレビュー&比較Easing Preview
- 52box-shadow ジェネレーターbox-shadow Generator
- 53和文ダミーテキスト生成Japanese Dummy Text
- 54SNS画像サイズ一括書き出しSocial Image Sizes
- 55タイムゾーン変換・世界時計Timezone Converter
- 56日数・営業日計算Business Day Calculator