Markdown vs HTML, inilah Perbandingan dari Kedua Bahasa Markup tersebut!

Assalamu‘alaikum wr. wb.

Hello guys! Dalam Pemrograman Web kita sudah familiar dengan HTML, terutama jika ingin membuat sebuah Website. HTML merupakan Bahasa Markah (Markup Language) yang banyak sekali Tag-tag untuk mengatur Tulisan-tulisan. Selain itu, juga ada yang namanya Markdown, yang merupakan Bahasa Markup yang sering dijumpai pada Repositori di GitHub, GitLab, hingga Bitbucket.

Sumber Artikel : Thebrain.com (Blog), Codingnconcepts.com, Knowledgehut.com, dan juga menggunakan ChatGPT dan Google Bard

PENGERTIAN

Baik HTML maupun Markdown sama-sama merupakan bahasa markup yang dapat digunakan untuk membuat dokumen teks yang dapat dibaca mesin. Namun, kedua bahasa tersebut memiliki beberapa perbedaan utama.

HTML adalah bahasa markup standar yang digunakan untuk membuat halaman web. HTML menggunakan tag untuk mendefinisikan struktur dan konten halaman web. Tag-tag HTML dapat digunakan untuk membuat judul, paragraf, daftar, tabel, gambar, dan elemen web lainnya.

Markdown adalah bahasa markup yang lebih ringkas dan mudah dibaca daripada HTML. Markdown menggunakan karakter khusus untuk mendefinisikan format teks, seperti tanda bintang untuk membuat daftar, tanda kurung kurawal untuk membuat blok kutipan, dan tanda hubung untuk membuat judul. Markdown dapat dikonversi ke HTML sehingga dapat digunakan untuk membuat halaman web.

A. Markdown

Inilah Tujuan, Sintaks, Output, dan Fungsionalitas Terbatas dari Markdown :

1. Tujuan

Markdown adalah bahasa markup ringan yang dirancang untuk format teks biasa yang mudah dibaca dan ditulis. Biasanya digunakan untuk membuat dokumentasi, file readme, dan konten sederhana dengan format dasar.

2. Sintaks

Markdown menggunakan sintaks yang sederhana dan intuitif yang lebih mudah dibaca dan ditulis daripada HTML. Ia menggunakan karakter seperti asterisk (*), garis bawah (_), dan tanda pagar (#) untuk mendefinisikan judul, teks tebal dan miring, dan daftar.

3. Output

Markdown tidak di-render langsung sebagai HTML oleh browser web. Sebaliknya, ia dikonversi menjadi HTML menggunakan prosesor atau konverter Markdown. Ini memungkinkan penulis untuk fokus pada konten tanpa perlu khawatir tentang detail tag HTML.

Fungsionalitas Terbatas : Markdown sengaja dibatasi dalam fiturnya untuk menjadikannya sederhana dan mudah digunakan. Meskipun cocok untuk pemformatan dan konten dasar, ia tidak memiliki fungsionalitas dan kendali yang ekstensif yang ditawarkan oleh HTML.

B. HTML

Inilah Tujuan, Tag, dan Kompleksitas dari HTML :

1. Tujuan

HTML adalah bahasa markup standar yang digunakan untuk membuat struktur dan konten halaman web. Ia mendefinisikan elemen dan tag yang menentukan bagaimana bagian-bagian yang berbeda dari halaman web harus ditampilkan.

2. Tag

HTML menggunakan sistem tag dan atribut untuk mendefinisikan struktur halaman web. Tag-tag tersebut diapit dalam tanda kurung sudut (<>) dan memberikan informasi kepada browser web tentang cara menampilkan kontennya. Misalnya, <h1> adalah tag judul, <p> adalah tag paragraf, dan <a> adalah tag anchor untuk membuat hyperlink.

3. Kompleksitas

HTML lebih kompleks daripada Markdown. Ia memberikan fleksibilitas dan kendali yang lebih besar terhadap tata letak dan presentasi halaman web tetapi memerlukan pengetahuan dan usaha yang lebih besar untuk digunakan secara efektif.

PERBANDINGAN SINTAKSIS

Secara umum, HTML adalah pilihan yang lebih baik untuk membuat halaman web yang kompleks, sedangkan Markdown adalah pilihan yang lebih baik untuk membuat dokumen teks. Namun, tidak ada aturan yang ketat, dan Anda dapat memilih untuk menggunakan bahasa apa pun tergantung pada kebutuhan spesifik Anda.

Berikut adalah Contoh Perbandingan Umum antara HTML dan Markdown :

1. Heading

Markdown :

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

HTML :

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Output :

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

2. Paragraf

Markdown :

This is a paragraph

HTML :

<p>This is a paragraph</p>

Output :

This is a paragraph

3. Ordered List

Markdown :

1. First Item
2. Second Item
3. Third Item

HTML :

<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

Output :

1. First Item
2. Second Item
3. Third Item

4. Unordered List

Markdown :

- First Item
- Second Item
- Third Item

HTML :

<ul>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

Output :

• First Item
• Second Item
• Third Item

5. Definition List

Markdown :

First Term
: Definition of first term.
Second Term
: Definition of second term.
: Another definition.

HTML :

<dl>
    <dt>First Term</dt>
    <dd>Definition of 
    first term.</dd>
    <dt>Second Term</dt>
    <dd>Definition of 
    second term.</dd>
    <dd>Another definition.</dd>
</dl>

Output :

First Term

Definition of first term.

Second Term

Definition of second term.

Another definition.

6. Blockquote

Markdown :

> This is a quote

HTML :

<blockquote>This is a quote</blockquote>

Output :

This is a quote

7. Code Blocks

Markdown :

› › › › function test() {
› › › › › › console.log("markdown");
› › › › }

HTML :

<pre><code>
    function test() {
      console.log("markdown");
    }
</code></pre>

Output :

    function test() {
      console.log("markdown");
    }

8. Horizontal Rule

Markdown :

---

HTML :

<hr/>

Output :

---

9. Tabel

Markdown :

 Header 1 | Header 2 
----------|----------
 Cell 11  | Cell 12  
 Cell 21  | Cell 22 

HTML :

<table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 11</td>
        <td>Cell 12</td>
      </tr>
      <tr>
        <td>Cell 21</td>
        <td>Cell 22</td>
      </tr>
    </tbody>
</table>

Output :

Header 1	Header 2
Cell 11	Cell 12
Cell 21	Cell 22

10. Bold (Cetak Tebal)

Markdown :

I am **bold**

HTML :

I am <b>bold</b>

Output :

I am bold

11. Italic (Cetak Miring)

Markdown :

I am *italic*

HTML :

I am <i>italic</i>

Output :

I am italic

12. Strikethrough

Markdown :

I am ~~strike~~

HTML :

I am <del>strike</del>

Output :

I am strike

13. Link

Markdown :

[example link](http://example.com)

HTML :

<a href="http://example.com">
    example link
</a>

Output :

example link

14. Image

Markdown :

![Blog](/img/logo.png)

HTML :

<img src="/img/logo.png" alt="Blog">

Output :

15. Kode

Markdown :

execute command `nano`

HTML :

execute command <code>nano</code>

Output :

execute command nano

Itulah Perbandingan Perbedaan antara Markdown dan HTML yang telah kita bahas sekarang. Mohon maaf apabila ada sedikit kesalahan dalam penulisan Kode Program sedikitpun.

Terima Kasih 😄😘👌👍 :)

Wassalamu‘alaikum wr. wb.