Di dalam HTML, untuk menampilkan text agar bisa tampil dengan spasi dan karakter sesuai aslinya (text tanpa format) kita memerlukan tag khusus, yakni tag <pre>. Jika di dalam tag biasa,HTML akan mengabaikan spasi antar karakter (apabila terdapat lebih dari 1 spasi secara berurutan), text yang berada di dalam tag <pre> akan ditampilkan dengan ‘apa adanya’.
Pada tutorial Text HTML kali ini kita akan membahas tentang Cara Membuat Text HTML Tanpa Format dengan menggunakan tag <pre> dan tag <code>.
Tag <pre> Untuk Membuat Preformatted Text HTML
Tag <pre> adalah singkatan dari Preformatted Text. Sesuai dengan namanya, tag ini digunakan untuk text yang ‘belum’ diformat. Jika text diinput ke dalam tag <pre>, maka HTML akan menampilkan text tersebut sesuai dengan ‘apa adanya’. Text akan ditampilkan sesuai bagaimana text tersebut di buat, termasuk spasi yang ada.
Tag <pre> termasuk ke dalam kelompok block level element, sehingga akan ditampilkan di baris baru, terpisah dari text yang ada sebelum tag ini.
Berikut adalah contoh cara penulisan dan penggunaan tag <pre> di dalam HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html><html><head><title>Belajar HTML di Duniailkom</title></head><body><h3>Saya sedang belajar HTML di Duniailkom.com</h3><pre>Spasi di dalam bagian ini akan ditampilkan dengan apa adanya </pre></body></html> |
Seperti yang terlihat, spasi akan tetap ditampilkan sebagaimana yang ditulis. Juga jenis font yang digunakan biasanya font berjenis “monospace” yang memiliki panjang karakter yang sama untuk setiap hurufnya.
Tag <pre> juga sering dipakai untuk membuat contoh program. Seluruh contoh kode program di duniailkom ini ditampilkan di dalam tag <pre>. Tapi kita harus mengkonversi karakter “<” dan “>” menjadi karakter HTML Entity. Lebih lanjut bisa ke: Cara Menampilkan dan Memasukkan Karakter Khusus ke dalam HTML.
Tag <code> untuk Penulisan Kode
Sesuai dengan namanya, tag <code> ditujukan untuk memasukkan kode ke dalam HTML. Umumnya web browser akan menampilkan text yang berada di dalam tag <code> sama dengan jenis font tag <pre>, yakni dengan font monospace, namun dengan perbedaan bahwa tag <code>akan menghapus semua spasi yang lebih dari 1.
Tag <code> termasuk kelompok inline level element, dan mengikuti alur text yang ada.
Berikut adalah contoh cara penulisan dan penggunaan tag <code> di dalam HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html><html><head><title>Belajar HTML di Duniailkom</title></head><body><h3>Saya sedang belajar HTML di Duniailkom.com</h3><p>HTML adalah singkatan dari <code>Hypertext Markup Language</code></p></body></html> |
Dari contoh dapat dilihat perbedaan dari tag <pre> dan tag <code>. Tag <pre> bersifatblock elemen, sedangkan tag <code> bersifat inline elemen. Tag <pre> akan menampilkan seluruh text tanpa menformat spasi, namun di dalam tag <code>, jika ditemukan karakter spasi dengan jumlah lebih dari 1, maka hanya 1 yang digunakan.
Selain menggunakan tag <pre> dan tag <code>, HTML versi 4.01 memiliki tag <tt> yang akan menghasilkan tampilan yang sama dengan tag <code>.Tag <tt> adalah singkatan dari Teletype, dan akan ditampilkan dengan font “monospace”.
HTML5 menyatakan tag <tt>: deprecated, yang artinya disarankan untuk tidak digunakan, dan kemungkinan tidak akan didukung web browser. Anda mungkin masing menemukan tag ini terutama dalam website lama.