Belajar Element HTML: <code>

Tag HTML <code> mewakili fragmen kode komputer.

Fragmen kode bisa dalam bentuk nama elemen XML, program komputer, atau kode string lain yang di rekomendasikan komputer.

Biasanya browser menampilkan konten code dengan font monospace seperti Courier.

Syntax

Tag <code> ditulis seperti <code></code> dengan fragmen kode diletakkan diantara tag pembuka dan penutup.

Catatan: Untuk menampilkan baris kode yang banyak, bungkus elemen <code> didalam elemen <pre>. Elemen kode sendiri sebenarnya hanya menampilkan satu frase kode atau satu baris kode saja.

<code>Kode komputer disini ...</code>

Contoh Sederhana

<p>Tulis <code>npm install</code> pada terminal untuk menginstal proyek dependency npm.</p>

Contoh Menampilkan kode HTML

Tujuan penggunaan <code> adalah untuk menampilkan kode dalam halaman web.

Untuk memastikan kode HTML ditampilkan dengan benar dalam browser, kamu perlu menggunakan karakter HTML entities agar kode HTML tidak dirender.

Gunakan karakter &lt; untuk menggantikan simbol (<) dan &gt; untuk simbol (>).

<p>Untuk menampilkan kutipan panjang, gunakan elemen <code>&lt;blockquote&gt;</code>.</p>

Contoh Multiple Line tanpa tag pre

<p>Ini kode sederhana untuk membuat tabel dalam HTML:</p>
<code>
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code>

Contoh Multiple Line dengan tag pre

<p>Ini kode sederhana untuk membuat tabel dalam HTML:</p>
<pre>
<code>
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code>
</pre>

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <code> dengan pengaturan CSS:

code {
  font-family: monospace;
}