Blockquote & Preformat

Blockquote & Preformat 📜

Dua elemen ini digunakan untuk menampilkan jenis konten khusus yang membutuhkan perlakuan berbeda dari teks biasa — kutipan dari sumber lain, dan teks yang harus tampil persis seperti aslinya.

Blockquote — <blockquote>

Tag <blockquote> digunakan untuk menampilkan kutipan panjang yang berasal dari sumber lain — buku, artikel, tokoh, website, dan sebagainya. Browser secara default menampilkannya dengan indentasi (menjorok ke dalam) di kiri dan kanan.

<p>Seperti yang dikatakan oleh Soekarno:</p>

<blockquote>
  Bangsa yang besar adalah bangsa yang menghormati jasa para pahlawannya.
</blockquote>

Hasilnya di browser:

Seperti yang dikatakan oleh Soekarno:

    Bangsa yang besar adalah bangsa yang menghormati
    jasa para pahlawannya.

Atribut cite pada Blockquote

Atribut cite digunakan untuk mencantumkan sumber URL dari kutipan tersebut. Tidak tampil secara visual, namun penting untuk semantik dan mesin pencari:

<blockquote cite="https://www.wikipedia.org/wiki/Soekarno">
  Bangsa yang besar adalah bangsa yang menghormati jasa para pahlawannya.
</blockquote>

Tag <cite> — Judul Sumber Kutipan

Berbeda dengan atribut cite, tag <cite> digunakan untuk menampilkan nama karya atau sumber secara visual — judul buku, film, artikel, atau nama orang:

<blockquote>
  Hidup adalah perjalanan, bukan tujuan.
</blockquote>
<p>— <cite>Ralph Waldo Emerson</cite></p>

Hasilnya:

    Hidup adalah perjalanan, bukan tujuan.

— Ralph Waldo Emerson

<cite> secara default tampil miring (italic) di browser.

Blockquote Multi-Paragraf

Blockquote bisa berisi lebih dari satu paragraf untuk kutipan yang panjang:

<blockquote cite="https://example.com/artikel">
  <p>Pendidikan bukan hanya tentang mengisi ember dengan air,
  melainkan tentang menyalakan api semangat belajar.</p>

  <p>Seorang guru yang baik bukan hanya mengajarkan ilmu,
  tetapi juga menginspirasi muridnya untuk terus bertanya.</p>
</blockquote>
<p>— <cite>William Butler Yeats</cite></p>

Inline Quote — <q>

Untuk kutipan pendek di dalam baris teks, gunakan tag <q> (bukan <blockquote>). Browser akan otomatis menambahkan tanda kutip di awal dan akhir:

<p>Einstein pernah berkata, <q>Imajinasi lebih penting daripada pengetahuan.</q></p>

Hasilnya:

Einstein pernah berkata, "Imajinasi lebih penting daripada pengetahuan."

Perbedaan <blockquote> vs <q>

Preformatted Text — <pre>

Tag <pre> digunakan untuk menampilkan teks yang harus tampil persis seperti yang ditulis di kode — termasuk semua spasi, tab, dan baris baru. Browser menggunakan font monospace (lebar karakter sama) secara default.

<pre>
Nama    : Budi Santoso
Email   : [email protected]
Kota    : Semarang
Provinsi: Jawa Tengah
</pre>

Hasilnya tampil persis sama:

Nama    : Budi Santoso
Email   : [email protected]
Kota    : Semarang
Provinsi: Jawa Tengah

Tanpa <pre>, semua spasi berlebih dan baris baru akan diabaikan browser.

<pre> untuk Menampilkan Kode Program

Penggunaan paling umum <pre> adalah menampilkan blok kode program dengan format yang terjaga:

<pre>
function sapa(nama) {
    console.log("Halo, " + nama + "!");
}

sapa("Budi");
</pre>

Hasilnya tampil dengan indentasi dan format kode yang terjaga persis.

Kombinasi <pre> dan <code>

Untuk menampilkan kode program secara semantik dan benar, kombinasikan <pre> dengan tag <code>:

<pre><code>
function hitungLuas(panjang, lebar) {
    return panjang * lebar;
}

let luas = hitungLuas(5, 10);
console.log("Luas: " + luas);
</code></pre>

• <pre> — mempertahankan format dan whitespace
• <code> — memberi makna semantik bahwa ini adalah kode program

Perhatikan: tag <code> pembuka ditulis langsung setelah <pre> tanpa baris baru, agar tidak ada baris kosong di awal tampilan kode.

Tag <code> Secara Inline

<code> juga bisa digunakan sendiri di dalam kalimat untuk menandai potongan kode pendek:

<p>Gunakan tag <code>&lt;br&gt;</code> untuk pindah baris di HTML.</p>
<p>Properti CSS <code>font-size</code> mengatur ukuran teks.</p>

Hasilnya tampil dengan font monospace:

Gunakan tag <br> untuk pindah baris di HTML.
Properti CSS font-size mengatur ukuran teks.

Menampilkan Karakter Khusus di <pre>

Jika ingin menampilkan tanda < atau > di dalam <pre> tanpa diproses sebagai tag HTML, gunakan HTML entities:

<pre><code>
&lt;p&gt;Ini adalah paragraf.&lt;/p&gt;
&lt;h1&gt;Ini adalah heading.&lt;/h1&gt;
</code></pre>

Hasilnya tampil sebagai teks biasa, bukan diproses sebagai tag:

<p>Ini adalah paragraf.</p>
<h1>Ini adalah heading.</h1>

Mengatur Tampilan dengan CSS

Tampilan default <blockquote> dan <pre> bisa sepenuhnya dikustomisasi:

<style>
  blockquote {
    border-left: 4px solid #4a9eed;
    padding-left: 20px;
    margin: 20px 0;
    color: #555;
    font-style: italic;
  }

  pre {
    background-color: #1e1e1e;
    color: #e5e5e5;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;      /* scroll horizontal jika kode terlalu panjang */
    font-size: 14px;
  }
</style>

Inilah tampilan yang umum dipakai di dokumentasi dan blog teknis — blockquote dengan garis biru di kiri, dan blok kode dengan latar gelap.

Ringkasan Lengkap

💡 Tips: Selalu kombinasikan <pre> dengan <code> saat menampilkan blok kode program — <pre> menjaga format, <code> memberi makna semantik. Untuk tampilan yang lebih menarik, pertimbangkan menggunakan library seperti Highlight.js atau Prism.js yang otomatis memberi warna pada sintaks kode. 🎨