Kompatibilitas HTML pada Markdown

Pengantar

Markdown mendukung HTML secara native, memungkinkan pengguna menggabungkan kedua bahasa markup ini dalam satu dokumen. Fitur ini memberikan fleksibilitas tambahan ketika sintaks Markdown tidak cukup untuk kebutuhan formatting tertentu.

Cara Kerja HTML dalam Markdown

Markdown parser akan membiarkan tag HTML tetap utuh dan tidak mengubahnya, sehingga browser dapat merender HTML tersebut secara normal.

Contoh Dasar

Input Markdown + HTML:

# Judul dengan Markdown

Ini paragraf normal dengan **teks tebal**.

<div style="background-color: #f0f0f0; padding: 10px;">
  <p>Ini paragraf dalam HTML dengan styling khusus.</p>
</div>

Kembali ke Markdown lagi.

Output: - Judul dan teks tebal dirender dari Markdown - Div dengan styling dirender sebagai HTML - Semua berfungsi bersamaan

Tag HTML yang Umum Digunakan

Styling dan Layout

<div class="custom-class">Konten dengan class CSS</div>
<span style="color: red;">Teks merah</span>
<center>Teks tengah</center>

Media dan Embed

<img src="image.jpg" alt="Deskripsi" width="300" height="200">
<iframe src="https://example.com" width="600" height="400"></iframe>
<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

Tabel Advanced

<table border="1">
  <thead>
    <tr>
      <th colspan="2">Header Gabungan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Cell Vertikal</td>
      <td>Data 1</td>
    </tr>
    <tr>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

Form Elements

<form>
  <input type="text" placeholder="Nama">
  <select>
    <option>Pilihan 1</option>
    <option>Pilihan 2</option>
  </select>
  <button type="submit">Submit</button>
</form>

Aturan Kompatibilitas

Yang Harus Diperhatikan

1. Block-level HTML: Harus dipisah dengan baris kosong

Paragraf Markdown.

<div>
  Block-level HTML
</div>

Paragraf Markdown lagi.

1. Inline HTML: Bisa langsung di dalam teks

Ini teks dengan <span style="color: blue;">warna biru</span> inline.

1. Markdown dalam HTML: Umumnya tidak diproses

<div>
  **Ini tidak akan menjadi tebal**
</div>

Kapan Menggunakan HTML dalam Markdown

Situasi yang Tepat

Styling Khusus:

<p style="font-family: serif; font-size: 18px;">
  Teks dengan font khusus
</p>

Layout Kompleks:

<div style="display: flex; justify-content: space-between;">
  <div>Kolom Kiri</div>
  <div>Kolom Kanan</div>
</div>

Elemen yang Tidak Ada di Markdown:

<details>
  <summary>Klik untuk expand</summary>
  <p>Konten tersembunyi</p>
</details>

Atribut Tambahan:

<a href="https://example.com" target="_blank" rel="noopener">
  Link eksternal
</a>

Keterbatasan dan Peringatan

Parser Differences

• Tidak semua Markdown parser mendukung HTML sama
• GitHub Flavored Markdown membatasi beberapa tag
• Beberapa platform menonaktifkan HTML untuk keamanan

Security Concerns

<!-- JANGAN GUNAKAN - berbahaya -->
<script>alert('XSS')</script>
<iframe src="javascript:alert('XSS')"></iframe>

Best Practices

1. Gunakan HTML hanya jika Markdown tidak cukup
2. Validasi HTML untuk memastikan struktur benar
3. Test kompatibilitas di target platform
4. Hindari inline styling berlebihan, gunakan CSS eksternal

Platform Support

Tips Praktis

Kombinasi Efektif

# Dokumentasi API

## Endpoint Users

**GET** `/api/users`

<div class="api-response">
  <strong>Response:</strong>
  <pre><code>{
    "users": [
      {"id": 1, "name": "John"}
    ]
  }</code></pre>
</div>

### Parameters
- `limit`: Jumlah maksimal data
- `offset`: Mulai dari index ke-

Fallback Strategy

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback image">
</picture>

Kesimpulan

HTML dalam Markdown memberikan fleksibilitas tambahan untuk kebutuhan formatting advanced sambil mempertahankan kesederhanaan Markdown untuk konten utama. Gunakan dengan bijak sesuai kebutuhan dan platform target.