Konverter HTML ke Markdown

Apa Itu Konversi HTML ke 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. -->

Fitur Utama

Contoh

<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.

Cara Mengonversi HTML ke Markdown

1. 1

   Tempel HTML Anda

   Jatuhkan halaman web yang disalin, ekspor CMS atau WYSIWYG, atau cuplikan HTML yang di-scrape. DOM diurai dan diserialisasi menjadi Markdown di browser Anda saat Anda menempel — tanpa upload, tanpa batas ukuran selain memori browser Anda.

2. 2

   Pilih gaya heading dan tautan

   Pilih heading ATX (#) atau Setext (===) dan tautan inline atau reference. Markdown dirender ulang secara langsung, sehingga Anda dapat membandingkan gaya seketika. Output menyasar GitHub Flavored Markdown — tabel, daftar tugas, dan strikethrough termasuk.

3. 3

   Salin atau unduh

   Klik Salin untuk mengambil Markdown, atau Unduh untuk menyimpan file .md. Untuk arah sebaliknya, beralihlah ke tab Markdown → HTML dan tempel Markdown Anda untuk mendapatkan HTML yang dirender kembali.

Kesalahan Umum

<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 -->

Kasus Penggunaan Umum

Migrasikan konten web atau CMS ke Notion, Obsidian, atau static site

Tarik halaman keluar dari CMS, ekspor WordPress, atau situs HTML lama dan konversikan menjadi Markdown yang jatuh langsung ke Notion, Obsidian, Hugo, atau Jekyll. Anda menukar markup bertele-tele dengan teks portabel yang hidup bersih di repo Git dan di-diff secara masuk akal saat review.

Ekspor dari editor WYSIWYG

Editor rich-text memancarkan HTML yang padat dan sarat atribut. Tempel output itu di sini untuk memulihkan Markdown bersih di baliknya — heading, daftar, tautan, dan emphasis — sehingga konten dapat berpindah ke pipeline dokumentasi atau basis pengetahuan berbasis Markdown alih-alih tetap terkunci di editor.

Bersihkan HTML menjadi Markdown untuk memberi makan LLM dan pipeline RAG

HTML mentah membakar token pada tag, skrip, dan styling yang tidak pernah dibutuhkan model. Mengonversi halaman yang di-scrape menjadi Markdown menghilangkan kebisingan itu sembari menjaga struktur yang dibaca LLM dengan baik, sehingga Anda memuat lebih banyak konten nyata di jendela konteks dan mendapat embedding lebih bersih untuk retrieval.

Konversi tempelan rich-text menjadi Markdown

Salin teks berformat dari halaman web, email, atau dokumen dan ia tiba sebagai HTML di clipboard. Tempel di sini untuk mengubah rich text itu menjadi Markdown yang dapat Anda commit, kirim dalam pull request, atau tulis ke catatan Anda — pemformatan dipertahankan, kekacauan hilang.

Arsipkan halaman sebagai Markdown

Simpan konten bermakna dari halaman web sebagai file .md kecil dan tahan masa depan alih-alih snapshot HTML berat penuh skrip dan pelacakan. Markdown tetap terbaca di editor teks mana pun puluhan tahun dari sekarang dan memakan ruang sepersekian.

Ubah dokumen HTML lawas menjadi Markdown

Dokumentasi lama yang ditulis sebagai HTML tangan menyakitkan untuk dipelihara. Konversikan menjadi Markdown untuk membawanya ke alur kerja docs-as-code modern — tempat ia dapat di-lint, di-review dalam pull request, dan dirender oleh generator static-site.

Detail Teknis

Output CommonMark vs GitHub Flavored Markdown

Konverter dapat menyasar CommonMark biasa atau, secara default, superset GitHub Flavored Markdown. CommonMark mendefinisikan heading, emphasis, daftar, tautan, gambar, kode, dan blockquote secara presisi. GFM menambah empat konstruksi yang memetakan langsung dari HTML umum: <table> → tabel pipa, item daftar checkbox → daftar tugas, <del>/<s> → strikethrough, dan URL telanjang → autolink. Karena sebagian besar konten web memakai tabel dan sejenisnya, output GFM adalah default praktis; pilih CommonMark hanya ketika renderer tujuan tidak memahami ekstensi GFM, yang dalam hal itu tabel jatuh kembali ke HTML mentah.

Konversi Lossy, Tak Terbalik — Dinyatakan Terus Terang

HTML jelas lebih ekspresif daripada Markdown, sehingga konversi tidak mungkin lossless, dan layak dinyatakan secara jujur. Markdown tidak punya sintaks untuk <div>, <span>, atau kontainer generik lain; tidak punya cara membawa nama kelas, id, style inline, colspan/rowspan, atau atribut data-* sembarang; dan tidak punya representasi untuk sebagian besar elemen semantik atau tata letak. Itu dilepas (konten dipertahankan, tag dibuang), dibuang (atribut), atau — ketika membuang akan menghilangkan makna — dipertahankan sebagai HTML inline mentah. Perjalanan bolak-balik HTML → Markdown → HTML tidak akan mereproduksi aslinya. Ini pertukaran yang disengaja: Markdown ada untuk menjadi bersih, dapat di-diff, dan dapat diedit manusia, bukan untuk mencerminkan HTML. Sebagian besar pesaing menutupi hal ini; menyatakannya membuat Anda memutuskan dengan mata terbuka apakah Markdown adalah tujuan yang tepat.

Pertukaran Gaya: ATX/Setext, Inline/Reference, Berpagar/Berindentasi

Tiga pilihan output punya pertukaran nyata. Heading ATX (#) mencakup keenam level dan di-grep dengan bersih; Setext (digarisbawahi) hanya ada untuk H1/H2, sehingga alat memancarkannya untuk dua level teratas dan jatuh kembali ke ATX di bawahnya. Tautan inline menjaga URL di samping teks — terbaik untuk tautan jarang; tautan reference menarik URL ke kaki dokumen — terbaik untuk prosa padat tautan dan pemakaian ulang berdasarkan label. Untuk kode, blok berpagar (tiga backtick) membawa info string bahasa dan bersarang dengan aman, sedangkan blok kode berindentasi (empat spasi) tidak dapat mengekspresikan bahasa dan patah di dalam daftar — sehingga konverter ini selalu memancarkan blok berpagar dari <pre><code>.

Praktik Terbaik

Format HTML Sebelum Anda Konversi

HTML yang diminify atau kusut bertingkat dalam — terutama tabel tata letak bertingkat dan elemen inline tersesat — dikonversi lebih bersih ketika well-formed terlebih dahulu. Jalankan sumber berantakan melalui HTML Formatter kami untuk mem-pretty-print dan menormalkannya, lalu konversi. Input bersih menghasilkan Markdown bersih dengan lebih sedikit fallback HTML mentah.

Antisipasi dan Tinjau Hal yang Dibuang Lossy

Perlakukan konversi sebagai lossy secara desain. Kelas, style inline, pembungkus <div>/<span>, dan atribut eksotis hilang di output, dan itu biasanya yang Anda inginkan untuk Markdown portabel — tetapi periksa sekilas hasilnya untuk apa pun yang penting secara semantik yang hanya hidup dalam atribut (aria-label, sel yang digabung colspan) dan tambahkan kembali secara manual jika penting.

Pilih Gaya Tautan Sesuai Kepadatan Dokumen

Gunakan tautan inline untuk prosa dengan satu-dua tautan di sana-sini — URL tetap di samping teksnya dan sumber terbaca alami. Beralih ke tautan reference ketika sebuah bagian padat tautan atau memakai ulang URL yang sama: menariknya ke daftar bernomor di kaki menjaga paragraf tetap mudah dipindai dan menghindari pengulangan URL panjang.

Konversi ke Markdown Sebelum Mengirim Halaman ke LLM

Ketika Anda memberi konten web ke model — untuk prompt, embedding, atau penyimpanan RAG — konversikan HTML ke Markdown terlebih dahulu. Anda menghilangkan tag, skrip, dan styling yang memboroskan token dan menambah kebisingan, menjaga struktur yang benar-benar dipakai model, dan memuat jauh lebih banyak konten nyata di dalam jendela konteks.

Verifikasi Tabel Rumit Setelah Konversi

Tabel pipa GFM bersifat datar — tanpa tabel bertingkat, tanpa konten blok dalam sel, tanpa sel gabungan. Setelah mengonversi tabel padat data atau tata letak, periksa Markdown-nya: kisi sederhana dikonversi sempurna, tetapi apa pun dengan colspan atau blok bertingkat terdegradasi dan mungkin muncul sebagai HTML mentah. Sederhanakan tabel sumber terlebih dahulu jika tabel pipa bersih itu penting.

Pertanyaan yang Sering Diajukan