Kalau kamu sering berkecimpung di dunia tulis-menulis digital, mengelola blog, atau sering nongkrong di ekosistem GitHub dan Notion, kamu umumnya udah tidak asing lagi dengan perdebatan tipis-tipis soal pemformatan dokumen. Terkadang kita butuh menulis dengan sangat kilat, tapi di sisi lain struktur penulisan web perlu tetap rapi dan terstandardisasi.
Siap! Ini dia tabel "kamus" buat menerjemahkan antara HTML dan Markdown. Biar kamu gampang bacanya, aku kelompokkan berdasarkan fungsinya ya. Markdown itu pada dasarnya dibuat untuk mempersingkat penulisan HTML, jadi performanya jauh lebih ringkas dan ramah buat diketik manusia. Yuk, langsung saja kita bedah lembar contekan serbaguna ini kawan! 🚀
1. Format Teks Dasar 🔤
Kelompok ini berisi sekumpulan fungsi dasar yang paling sering kita gunakan saat menyusun untaian paragraf atau menekankan poin-poin penting dalam artikel.
| Elemen / Fungsi | Syntax HTML | Syntax Markdown | Hasil Tampilan Render pada Browser |
|---|---|---|---|
| Tebal (Bold) | <strong>Teks</strong> atau <b>Teks</b> |
Teks atau __Teks__ |
Teks |
| Miring (Italic) | <em>Teks</em> atau <i>Teks</i> |
*Teks* atau _Teks_ |
Teks |
| Coret (Strikethrough) | <del>Teks</del> atau <s>Teks</s> |
~~Teks~~ |
|
| Tebal + Miring | <strong><em>Teks</em></strong> |
*Teks* |
Teks |
| Baris Baru (Line Break) | <br> |
(Tekan Spasi 2x + Enter) atau pakai tanda \ |
Membuat baris baru di bawahnya. |
2. Heading (Struktur Judul) 🏗️
Penting untuk SEO dan keterbacaan artikel, struktur hierarki judul ini membantu membagi artikel panjang kamu menjadi beberapa sub-bahasan yang rapi.
| Elemen / Fungsi | Syntax HTML | Syntax Markdown | Hasil Tampilan Render pada Browser |
|---|---|---|---|
| Heading 1 | <h1>Judul Utama</h1> |
# Judul Utama |
Judul Utama |
| Heading 2 | <h2>Sub Judul</h2> |
## Sub Judul |
Sub Judul |
| Heading 3 | <h3>Sub-sub Judul</h3> |
### Sub-sub Judul |
Sub-sub Judul |
| Heading 4 | <h4>Heading 4</h4> |
#### Heading 4 |
Heading 4 |
| Heading 5 | <h5>Heading 5</h5> |
##### Heading 5 |
Heading 5 |
| Heading 6 | <h6>Heading 6</h6> |
###### Heading 6 |
Heading 6 |
3. Link dan Gambar 🔗
Media interaktif luar dan dalam ruangan dokumen. Bagian ini menjelaskan cara menyematkan navigasi web dan visualisasi gambar pendukung materi.
| Elemen / Fungsi | Syntax HTML | Syntax Markdown | Hasil Tampilan Render pada Browser |
|---|---|---|---|
| Tautan (Link) | <a href="https://dalam.web.id">Layar Kosong</a> |
[Layar Kosong](https://dalam.web.id) |
Layar Kosong |
| Gambar (Image) | <img src="gambar.png" alt="Deskripsi"> |
 |
[Simulasi Berkas Gambar] |
4. Daftar / List 📋
Untuk menyusun urutan informasi, poin-poin ide, atau runtutan tutorial secara struktural agar enak dilihat mata pembaca.
| Elemen / Fungsi | Syntax HTML | Syntax Markdown | Hasil Tampilan Render pada Browser |
|---|---|---|---|
| Daftar Poin (Unordered List) | <ul><li>Kopi</li><li>Teh</li></ul> |
- Kopi(Bisa pakai * atau +) |
|
| Daftar Angka (Ordered List) | <ol><li>Satu</li><li>Dua</li></ol> |
1. Satu |
|
5. Komponen Blok (Quote & Code) 💻
Sangat berguna bagi para pengembang program atau penulis rujukan kutipan kata bijak dari tokoh ternama dunia digital.
| Elemen / Fungsi | Syntax HTML | Syntax Markdown | Hasil Tampilan Render pada Browser |
|---|---|---|---|
| Kutipan (Blockquote) | <blockquote>Kata bijak</blockquote> |
> Kata bijak |
Kata bijak |
| Garis Pembatas (Horizontal Rule) | <hr> |
--- atau * |
|
| Kode Baris (Inline Code) | <code>Bun.serve()</code> |
`Bun.serve()` |
Bun.serve() |
| Blok Kode (Code Block) | <pre><code>console.log("Halo");</code></pre> |
```
```text?code_stdout&code_event_index=2
Sukses memperbarui berkas 'kamus-html-markdown.html'!
``` |
|
💡 Catatan Tambahan buat Kamu:
HTML bisa masuk ke Markdown: Kerennya, hampir semua aplikasi atau web yang mendukung Markdown (seperti GitHub, Notion, atau aplikasi blogging) itu backward compatible. Artinya, kalau kamu males ngetik syntax Markdown dan malah masukin kode murni HTML (misal ngetik<u>Teks Garis Bawah</u>karena di Markdown bawaan gak ada), sistemnya bakal tetep bisa membaca dan merendernya dengan bener kawan!
Keterbatasan Markdown: Markdown emang didesain buat kesederhanaan dokumen teks biasa. Jadi, untuk hal-hal rumit kayak ngatur ukuran gambar secara spesifik (width dan height), membuat class styling kustom, atau membuat tata letak grid baris berbaris, kamu tetep perlu balik dan mengandalkan kekuatan penuh dari syntax bawaan HTML + CSS.