Pre

Browser memperlakukan teks paragraf dengan longgar: spasi beruratan dihitung satu, tab dan indentasi diringkas, dan ganti baris diabaikan. Perilaku whitespace collapsing ini dibahas pada chapter Paragraf.

Namun sebagian konten justru bergantung pada spasi dan baris yang persis seperti ditulis: blok kode program, jadwal yang rata kolomnya, atau seni karakter ASCII. Untuk konten seperti itu, HTML menyediakan elemen pre.

Teks yang Ditampilkan apa Adanya #

Aturannya satu kalimat: elemen pre menampilkan teks preformatted — spasi, tab, indentasi, dan ganti baris di dalamnya dipertahankan semuanya. Parser dan browser tidak meringkas apa pun yang berada di antara tag pembuka dan penutupnya.

Sebagai default, browser juga menampilkan isi pre dengan font monospace: setiap karakter selebar kolom yang sama, sehingga perataan kolom buatan spasi tetap terjaga. Font tersebut hanyalah styling default browser — bisa diubah lewat CSS tanpa mengubah makna elemennya.

Contoh berikut menampilkan jadwal piket yang rata kolomnya dibuat dengan spasi biasa:

<pre>
Jadwal Piket Kedai Siti
Senin : Budi
Rabu  : Siti
Jumat : Dewi
</pre>

Hasil Render:

Mari kita telaah kode di atas:

1. Baris 1 (<pre>): tag pembuka; parser membuang tepat satu ganti baris setelahnya, jadi isi yang mulai ditulis di baris berikutnya tidak menghasilkan baris kosong.
2. Baris 2 (Jadwal Piket Kedai Siti): baris judul tanpa perataan khusus.
3. Baris 3-5 (Senin : Budi dan seterusnya): spasi setelah titik dua dibuat manual agar kolom nama rata; seluruh spasi dipertahankan.
4. Baris 6 (</pre>): tag penutup; blok preformatted berakhir.

Pasangan pre dan code #

Mengapa banyak tutorial menulis <pre><code> sekaligus? Karena keduanya memikul tugas berbeda. Elemen pre mengurus format: baris, spasi, dan font monospace. Elemen code mengurus makna: isi blok ini adalah kode komputer (dibahas tuntas pada chapter Code, Kbd, Samp, dan Var). Digabungkan, pre menjaga tata letak sementara code menandai bahwa teks tersebut memang kode.

<pre><code>function sapa(nama) {
  return "Halo, " + nama + "!";
}</code></pre>

Hasil Render:

Mari kita telaah kode di atas:

1. Baris 1 (<pre><code>): pre membuka blok berformat; code menandai makna “kode komputer” di dalamnya.
2. Baris 2 (indentasi dua spasi): indentasi return dipertahankan persis — inilah tugas pre.
3. Baris 3 (</code></pre>): kedua elemen ditutup berkebalikan urutan pembukaan.

Meloloskan Karakter Kurung Sudut #

Pertanyaan yang paling sering muncul: bagaimana menampilkan contoh kode HTML di dalam halaman HTML? Karakter < selalu dibaca parser sebagai awal tag. Jika contoh kode ditulis mentah di dalam pre, parser memperlakukan tag contoh sebagai elemen sungguhan:

<pre><code><p>Kopi tubruk Siti.</p></code></pre>

Parser menemukan <p> dan membuat elemen paragraf nyata di dalam code — teks kurung sudutnya tidak pernah tampil di layar. Solusinya: tulis kurung sudut sebagai character reference, yaitu kode pengganti yang diawali & dan diakhiri ;:

<pre><code>&lt;p&gt;Kopi tubruk Siti.&lt;/p&gt;</code></pre>

Hasil Render:

Mari kita telaah kode di atas:

1. <: character reference untuk karakter <. Parser menerjemahkannya menjadi teks biasa, bukan awal tag.
2. >: character reference untuk karakter > dengan cara kerja yang sama.
3. Sisa teks: huruf dan tanda baca ditulis apa adanya karena tidak bertabrakan dengan sintaks HTML.

Trik yang sama berlaku untuk karakter &: tulis sebagai &, karena & sendiri menandai awal character reference. Praktik amannya: setiap kali menampilkan contoh markup di dalam halaman, ganti < dengan < dan & dengan &.

Ringkasan #

• pre mempertahankan spasi, tab, indentasi, dan ganti baris apa adanya; isi ditampilkan dengan font monospace secara default.
• Pasangan <pre><code>: pre menjaga format, code memikul makna kode komputer.
• Karakter <, >, dan & pada contoh kode wajib ditulis sebagai <, >, dan &.
• Baris panjang di dalam pre tidak melipat dan dapat meluber keluar kontainer.

Chapter berikutnya membahas dua void element di sekitar teks: br untuk ganti baris bermakna dan hr untuk pemisah tematik.