Selamat datang kembali di seri “Belajar HTML”! Bagi Anda yang sering mengunjungi blog tutorial pemrograman, situs dokumentasi teknis, atau forum diskusi developer, Anda pasti sering melihat potongan kode (code snippets) yang ditampilkan dengan rapi dan mudah dibaca.

Pernahkah Anda bertanya-tanya bagaimana cara menampilkannya di halaman web? Jika Anda mencoba menyalin dan menempelkan kode langsung ke dalam tag <p>, hasilnya akan berantakan. Browser akan mengabaikan semua spasi dan baris baru yang penting untuk keterbacaan kode.

Untuk mengatasi ini, HTML menyediakan serangkaian tag khusus untuk memformat teks yang berhubungan dengan komputer dan kode. Mari kita pelajari satu per satu.

<code>: Untuk Kode Sebaris (Inline Code)

Tag <code> digunakan untuk menandai sepotong kecil kode komputer yang berada di dalam sebuah kalimat atau paragraf. Browser biasanya akan menampilkannya dengan font monospace (seperti Courier atau Consolas) agar terlihat berbeda dari teks biasa.

Contoh:

<p>Untuk membuat sebuah paragraf di HTML, Anda bisa menggunakan tag <code>&lt;p&gt;</code>. Fungsi <code>alert()</code> di JavaScript akan menampilkan sebuah dialog popup.</p>

Hasilnya di browser:

<p>Untuk membuat sebuah paragraf di HTML, Anda bisa menggunakan tag <code>&lt;p&gt;</code>. Fungsi <code>alert()</code> di JavaScript akan menampilkan sebuah dialog popup.</p>

<pre>: Untuk Blok Teks Terformat

Tag <pre> (singkatan dari preformatted text) adalah pahlawan utama saat kita ingin menampilkan blok kode. Tag ini akan memerintahkan browser untuk menampilkan teks persis seperti yang Anda tulis di editor kode, termasuk semua spasi, inden, dan baris baru.

Contoh:

<pre>
  function sapaDunia() {
    console.log("Halo, Dunia!");
  }
</pre>

Tanpa <pre>, kode di atas akan ditampilkan dalam satu baris. Dengan <pre>, formatnya akan tetap terjaga.

Kombinasi Terbaik: <pre> dan <code>

Meskipun <pre> sudah menjaga format, praktik terbaik dan paling semantik untuk menampilkan blok kode adalah dengan menggabungkan <pre> dan <code>.

• <pre> bertugas menjaga format blok (spasi dan baris baru).
• <code> memberikan makna semantik bahwa teks di dalamnya adalah kode.

Kombinasi ini adalah standar yang digunakan di hampir semua situs teknis.

Contoh Penggunaan Terbaik:

<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Judul Halaman&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Halo Dunia!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

Penting! Menampilkan Tag HTML dengan Benar

Anda mungkin melihat < dan > pada contoh di atas. Apa itu? Saat Anda menulis < atau > di dalam file HTML, browser akan menganggapnya sebagai bagian dari sebuah tag dan mencoba untuk merendernya, yang akan menyebabkan tampilan rusak atau tagnya hilang.

Untuk menampilkan karakter < dan > secara harfiah, Anda harus menggunakan HTML Entities:

• < untuk menampilkan karakter < (less than)
• > untuk menampilkan karakter > (greater than)
• & untuk menampilkan karakter & (ampersand)

Ini wajib dilakukan setiap kali Anda ingin menampilkan contoh kode HTML di halaman web Anda.

Tag Tambahan yang Berguna

Selain <code> dan <pre>, ada beberapa tag semantik lain yang sangat berguna:

• <kbd> (Keyboard Input): Untuk menandai teks yang harus diinput oleh pengguna melalui keyboard.
  HTML

  <p>Untuk menyimpan dokumen, tekan <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
  

• <samp> (Sample Output): Untuk menandai contoh hasil atau output dari sebuah program atau skrip komputer.
  HTML

  <p>Jika file tidak ditemukan, sistem akan menampilkan pesan: <samp>Error: File not found.</samp></p>
  

• <var> (Variable): Untuk menandai sebuah variabel dalam konteks matematika atau pemrograman.
  HTML

  <p>Persamaan garis lurus adalah <var>y</var> = <var>m</var><var>x</var> + <var>c</var>.</p>
  

Kesimpulan & Praktik Terbaik

1. Gunakan <code> untuk menandai potongan kecil kode di dalam teks.
2. Gunakan kombinasi <pre><code>...</code></pre> untuk menampilkan blok kode. Ini adalah standar terbaik.
3. Selalu gunakan HTML Entities (< dan >) untuk menampilkan karakter < dan > di dalam contoh kode Anda.
4. Gunakan tag semantik seperti <kbd>, <samp>, dan <var> untuk memberikan makna yang lebih spesifik pada teks Anda.
5. Catatan: Pewarnaan sintaks (syntax highlighting) yang membuat kode berwarna-warni (seperti function berwarna biru, string berwarna hijau) tidak dilakukan oleh HTML, melainkan oleh pustaka JavaScript atau CSS. HTML hanya menyediakan struktur dasarnya.

Dengan menguasai tag-tag ini, Anda kini dapat membuat halaman dokumentasi atau tutorial teknis yang jelas dan profesional. Sampai jumpa di artikel berikutnya!