Apa itu Teks yang Diformat Sebelumnya?

Di sini, bagaimana cara menggunakan tag Teks Pra-Format dalam kode HTML Anda

Ketika Anda menambahkan teks ke kode HTML untuk halaman Web, katakanlah dalam elemen paragraf, Anda tidak memiliki kontrol sedikit di mana garis-garis teks akan pecah atau jarak yang akan digunakan. Ini karena browser web akan mengalirkan teks sesuai kebutuhan berdasarkan area yang memuatnya. Ini termasuk situs web responsif yang akan memiliki tata letak sangat cair yang berubah berdasarkan ukuran layar yang digunakan untuk melihat halaman .

Teks HTML akan memecah garis di mana perlu setelah itu telah mencapai akhir area yang mengandung. Pada akhirnya, browser memainkan peran lebih penting dalam menentukan bagaimana teks rusak daripada yang Anda lakukan.

Dalam hal menambahkan spasi untuk membuat format atau tata letak tertentu, HTML tidak mengenali spasi yang ditambahkan ke kode, termasuk spasi, tab, atau pengembalian carriage. Jika Anda memasukkan dua puluh spasi di antara satu kata dan kata yang muncul setelahnya, browser akan hanya membuat satu ruang di sana. Ini dikenal sebagai keruntuhan ruang putih dan ini sebenarnya adalah salah satu konsep HTML yang banyak baru bagi perjuangan industri pada awalnya. Mereka mengharapkan HTML whitespace untuk bekerja seperti yang dilakukan dalam program seperti Microsoft Word, tetapi itu bukan bagaimana cara kerja HTML whitespace sama sekali.

Dalam banyak kasus, penanganan teks yang normal dalam dokumen HTML apa pun yang Anda butuhkan, tetapi dalam kasus lain, Anda mungkin sebenarnya ingin lebih mengontrol persis bagaimana ruang teks keluar dan di mana ia melanggar garis.

Ini dikenal sebagai teks yang telah diformat sebelumnya (dengan kata lain, Anda mendiktekan format). Anda dapat menambahkan teks yang telah diformat ke halaman web Anda menggunakan tag pra HTML.

Menggunakan Tag

Bertahun-tahun yang lalu, itu biasa untuk melihat halaman web dengan blok teks pra-diformat. Menggunakan tag pra untuk menentukan bagian halaman yang diformat oleh pengetikan itu sendiri adalah cara cepat dan mudah bagi perancang web untuk menampilkan teks sesuai keinginannya.

Ini sebelum munculnya CSS untuk tata letak, ketika perancang web benar-benar terjebak mencoba memaksa tata letak dengan menggunakan tabel dan metode HTML lainnya. Ini (agak) bekerja kembali karena teks yang diformat sebelumnya didefinisikan sebagai teks di mana struktur didefinisikan oleh konvensi tipografi daripada oleh rendering HTML.

Saat ini, tag ini tidak digunakan sebanyak mungkin karena CSS memungkinkan kita untuk mendikte gaya visual dengan cara yang jauh lebih efisien daripada mencoba memaksa penampilan ke dalam HTML kita dan karena standar Web mendiktekan pemisahan struktur (HTML) dan gaya (CSS) yang jelas. Namun, mungkin ada contoh teks yang diformat sebelumnya masuk akal, seperti untuk alamat surat di mana Anda ingin memaksa jeda baris atau untuk contoh puisi di mana jeda baris sangat penting untuk membaca dan aliran keseluruhan konten.

Berikut ini adalah salah satu cara untuk menggunakan tag HTML

: 

 
 Twas brillig and the slithey toves Apakah gyre dan gimble di wabe  
 HTML biasa menciutkan ruang putih di dokumen. Ini berarti bahwa pengembalian, spasi, dan karakter tab yang digunakan dalam teks ini semua akan diciutkan ke satu spasi. Jika Anda mengetikkan kutipan di atas ke dalam tag HTML biasa seperti tag p (paragraf), Anda akan berakhir dengan satu baris teks, seperti ini: 
 Twas brillig and the slithey toves Apakah gyre dan gimble di wabe 
 Pre tag meninggalkan karakter spasi putih sebagaimana adanya. Jadi, jeda baris, spasi, dan tab semuanya dipertahankan dalam perenderan browser konten tersebut. Menempatkan kutipan di dalam tag pra untuk teks yang sama akan menghasilkan tampilan ini: 
 Twas brillig and the slithey toves Apakah gyre dan gimble di wabe 
 Mengenai Font 
 Pre-tag tidak hanya mempertahankan spasi dan jeda untuk teks yang Anda tulis. Di sebagian besar browser, itu ditulis dalam font monospace. Ini membuat karakter dalam teks memiliki lebar yang sama. Dengan kata lain, huruf saya mengambil banyak ruang seperti huruf w. 
 Jika Anda lebih suka menggunakan font lain sebagai pengganti monospace default yang ditampilkan browser, Anda masih dapat mengubah ini dengan style sheet dan pilih font lain yang Anda inginkan untuk di-render . 
 HTML5 
 Satu hal yang harus diperhatikan adalah bahwa, dalam HTML5, atribut "lebar" tidak lagi didukung untuk elemen 
. Dalam HTML 4.01, lebar ditentukan jumlah karakter yang akan berisi baris, tetapi ini telah dijatuhkan untuk HTML5 dan seterusnya. 

 Diedit oleh Jeremy Girard pada 2/2/17