Preformatted Text

Seluruh elemen teks yang kita pelajari memperlakukan whitespace sebagai hal yang boleh dilipat, tetapi ada teks yang format aslinya memang bagian dari maknanya: baris kode, log program, dan gambar yang disusun dari karakter teks. Untuk kebutuhan itu HTML menyediakan elemen pre (preformatted text), satu-satunya elemen yang menampilkan spasi dan baris baru persis seperti yang kita tulis di sumber. Pada Chapter ini kita mempelajari cara kerja pre, kombinasi standarnya dengan code, serta batasan pemakaiannya.

pre Mempertahankan Whitespace #

Elemen pre menampilkan seluruh isinya dengan tiga ciri: spasi dan baris baru dipertahankan persis seperti di sumber, teksnya memakai font monospace secara bawaan, dan teks tidak membungkus mengikuti lebar layar. Aturan khususnya satu: baris baru tepat setelah tag pembuka <pre> diabaikan oleh parser, sehingga kita bebas menurunkan baris demi kerapian sumber tanpa menghasilkan baris kosong di awal tampilan.

<pre>
  baris pertama
      baris kedua lebih dalam
  baris ketiga
</pre>

Output yang Dihasilkan:

Browser menampilkan tiga baris dengan indentasi persis seperti sumber:
  baris pertama
      baris kedua lebih dalam
  baris ketiga

Pemakaian pre yang tepat adalah teks yang memang berformat: blok kode, keluaran terminal, log, puisi berformat tetap, dan ASCII art. Sebaliknya, pre bukan alat tata letak; menjorokkan teks biasa dengan spasi merusak tampilan pada layar sempit karena teks pre tidak membungkus, dan pembaca layar membacanya sebagai satu baris panjang. Pergeseran posisi teks biasa adalah tugas CSS pada section HTML dan CSS.

pre dan code untuk Blok Kode #

Untuk menampilkan blok kode di halaman web, kebiasaan standar adalah menyarangkan elemen code di dalam pre:

<pre><code>function hitungDiskon(harga) {
  return harga - (harga * 10) / 100;
}</code></pre>

Keduanya memegang peran yang saling melengkapi: pre menjaga tata letak baris dan indentasi, sedangkan code memberi label makna bahwa isinya adalah kode program. Pembaca layar dan mesin pencari mengenali label tersebut, sementara CSS dapat menata tampilan keduanya secara terpisah.

Satu hal penting menyertai kombinasi ini: karakter khusus di dalam pre tetap diurai sebagai HTML. Tanda < yang membuka tag pada contoh kode harus ditulis <, tanda > ditulis >, dan ampersand ditulis &, sebagaimana dibahas pada Chapter Karakter Khusus HTML. Tanpa escape, tag di dalam contoh kode ikut dirender browser sebagai elemen sungguhan dan contohnya hancur.

<pre><code>&lt;p&gt;Halo, dunia!&lt;/p&gt;</code></pre>

Contoh File Lengkap #

File berikut memperagakan tiga pemakaian pre yang tepat dalam satu halaman. Simpan sebagai contoh-pre.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Catatan Latihan Budi</title>
</head>
<body>
  <h1>Catatan Latihan Budi</h1>

  <h2>Cuplikan Kode</h2>
  <pre><code>&lt;p&gt;Halo, dunia!&lt;/p&gt;</code></pre>

  <h2>Log Build</h2>
  <pre><samp>08:00 build dimulai
08:01 build selesai tanpa galat</samp></pre>

  <h2>Gambar Teks</h2>
  <pre>
   ( (
    ) )
  ........
  |      |]
  \      /
   `----'
  </pre>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Baris "<p>Halo, dunia!</p>" dalam font monospace, dengan tag sebagai teks biasa
  - Dua baris log dengan baris baru persis seperti di sumber
  - Cangkir kopi yang disusun dari karakter teks dengan bentuk tetap utuh

Mari kita telaah pemakaian pre pada setiap bagian:

1. Baris 12 (pre dan code): cuplikan kode tampil dengan font monospace; entitas < dan > menjaga tag tampil sebagai teks.
2. Baris 15-16 (pre dan samp): keluaran program dua baris; baris baru di sumber dipertahankan, sehingga samp menjadi pasangan yang wajar untuk log.
3. Baris 19-26 (pre murni): gambar teks tersusun dari spasi dan karakter; seluruh indentasi dipertahankan persis.
4. Baris kosong setelah tag pembuka: tidak menghasilkan baris kosong di tampilan karena parser mengabaikan satu baris baru di posisi itu.

pre menutup daftar perangkat teks pada section ini: heading menyusun kerangka, paragraf menampung ide, br dan hr mengatur baris serta peralihan, elemen penekanan dan kutipan memberi makna, dan pre menjaga format asli. Topik berikutnya keluar dari teks: kita belajar menghubungkan halaman satu sama lain pada section Links dan Navigasi.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen pre
• MDN Web Docs — Elemen code
• WHATWG — HTML Living Standard: Grouping content

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Catatan Latihan Budi</title>
</head>
<body>
  <h1>Catatan Latihan Budi</h1>

  <h2>Cuplikan Kode</h2>
  <pre><code>&lt;p&gt;Halo, dunia!&lt;/p&gt;</code></pre>

  <h2>Log Build</h2>
  <pre><samp>08:00 build dimulai
08:01 build selesai tanpa galat</samp></pre>

  <h2>Gambar Teks</h2>
  <pre>
   ( (
    ) )
  ........
  |      |]
  \      /
   `----'
  </pre>
</body>
</html>