Skip to main content

A.3.8. Preformatting

A.3.8.1. Pengertian Pre-formatting.​

Preformatting dalam HTML digunakan untuk menampilkan teks dengan format yang persis sama seperti yang ditulis dalam kode HTML, termasuk spasi, tab, dan baris baru. Elemen HTML yang digunakan untuk preformatting adalah <pre>. Teks yang dibungkus dengan tag <pre> akan ditampilkan dalam font monospaced (font dengan lebar karakter yang sama), dan semua spasi serta baris baru akan dipertahankan.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>A.3.8.1. Pengertian Pre-Formatting</title>
  </head>

  <body>
    <h2>Contoh Penggunaan Elemen &lt;pre&gt;</h2>
    <pre>
    Ini adalah contoh teks yang
    menggunakan elemen preformatting.

        Spasi dan baris baru
        akan dipertahankan.
    </pre>
  </body>
</html>

Pada contoh di atas, teks di dalam elemen <pre> akan ditampilkan dengan format yang sama seperti yang ditulis dalam kode HTML. Spasi tambahan dan baris baru tidak akan diabaikan, berbeda dengan teks biasa yang berada di luar elemen <pre>.

Output

Keunggulan Penggunaan <pre>

  1. Mempertahankan Struktur Teks: Sangat berguna untuk menampilkan kode, puisi, atau teks lain yang memerlukan format khusus.
  2. Memudahkan Pembacaan Kode: Dalam dokumentasi atau tutorial, elemen <pre> sering digunakan untuk menampilkan contoh kode yang terformat dengan rapi.

Beberapa _Point_** Yang Perlu Diperhatikan**

  • Karena elemen <pre> mempertahankan semua spasi dan baris baru, pastikan bahwa teks yang diletakkan di dalamnya memang memerlukan format tersebut.
  • Penggunaan elemen <pre> harus bijaksana, karena tampilan teks yang terlalu panjang bisa menyebabkan tampilan halaman menjadi tidak rapi, terutama pada layar yang lebih kecil.

Elemen <pre> adalah elemen yang berguna dalam HTML untuk situasi di mana format teks sangat penting. Dengan memahami dan memanfaatkan elemen ini, Temen-temen bisa menyajikan informasi yang lebih jelas dan terstruktur pada halaman web.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/a-html/chapter-A.3-tags-pada-html/chapter-A.3.8-preformatting