Penggunaan Dan Penulisan Tag Pre Dan Tag Code Dalam Html

Jika kita ingin menampilkan teks yang sesuai dengan apa yang kita tulis, baik itu spasi (yang lebih dari satu spasi), baris gres (line break) dan tab pada HTML, maka kita sanggup memakai tag <pre>. Jika kita memakai selain tag <pre>, contohnya tag <p> maka tag tersebut akan menghapus spasi (yang lebih dari satu satu spasi, maka hanya satu spasi yang ditampilkan), baris gres dan juga tab.

Pada artikel kali ini, selain kita mempelajari tag <pre>, kita juga akan mempelajari tag <code>.

Penggunaan dan Penulisan Tag pre Dalam HTML

Tag <pre> merupakan akronim dari Preformatted Text. Sesuai dengan namanya, tag ini dipakai untuk teks yang tidak diformat. Jika kita memasukkan teks atau goresan pena di dalam tag <pre>, maka web browser akan menampilkan teksnya sesuai dengan apa yang kita tulis, baik itu spasi (yang lebih dari satu spasi), baris gres dan juga tab. Tag <pre> termasuk kedalam tipe block element, yang akan ditampilkan oleh web browser pada baris yang baru.

Berikut ini pola penulisan tag <pre> dalam HTML :

<!DOCTYPE html> <html> <head>     <title>Belajar HTML</title> </head> <body>  <h2>Penggunaan Tag pre</h2> <pre>Tab akan        akan        ditampilkan Lebih dari satu spasi     akan     ditampilkan</pre>  </body> </html>

Jika kita ingin menampilkan teks yang sesuai dengan apa yang kita tulis Penggunaan dan Penulisan Tag pre dan Tag code Dalam HTML

Seperti yang terlihat pada gambar diatas tab dan spasi akan ditampilkan sebagaimana yang kita tulis, termasuk juga baris baru. Biasanya font yang dipakai untuk tag <pre> ialah monospace.

Tag <pre> sering dipakai untuk menampilkan arahan kegiatan yang lebih dari satu baris pada halaman website.

Penggunaan dan Penulisan Tag code Dalam HTML

Sesuai dengan namanya, tag <code> dipakai untuk "menampilkan arahan program" yang tidak lebih dari satu baris pada halaman website. Sama halnya dengan tag <pre>, web browser juga akan menampilkan teks yang berada dalam tag <code> dengan jenis font monospace, namun dengan perbedaan tag <code> akan menghapus spasi (yang lebih dari satu satu spasi, maka hanya satu spasi yang ditampilkan), baris gres dan juga tab. Tag <code> termasuk ke dalam tipe inline element, yang akan ditampilkan oleh web browser pada baris yang sama dengan tag lain yang berada disekitarnya.

Berikut ini pola penulisan tag <code> dalam HTML :

<!DOCTYPE html> <html> <head>     <title>Belajar HTML</title> </head> <body>     <h2>Penggunaan Tag code</h2>     Untuk menampilkan arahan kegiatan yang tidak lebih dari satu baris pada halaman website, Anda sanggup memakai tag <code>&lt;code&gt;</code>. </body> </html>

Dari klarifikasi diatas sanggup diketahui perbedaan antara tag <pre> dan <code>. Tag <pre> termasuk kedalam tipe block element dan tanpa menformat spasi, baris gres dan juga tab. Sedangkan tag <code> termasuk kedalam tipe inline element dan akan menghilangkan spasi (yang lebih dari satu spasi, maka hanya satu spasi yang ditampilkan), baris gres dan juga tab.

Jika Anda ingin menampilkan arahan kegiatan yang lebih dari satu baris pada halaman website, Anda sanggup memakai tag <pre>, namun bila arahan kegiatan yang ingin ditampilkan tidak lebih dari satu baris, Anda sanggup memakai tag <code>.

Jika Anda ingin memasukkan aksara ibarat "<", ">" dan beberapa aksara lainnya pada tag <code> dan <pre>, maka aksara tersebut harus dikonversi terlebih dahulu menjadi aksara HTML Entity sebelum dimasukkan pada tag <code> dan tag <pre>.

Pada HTML versi 4.01, mempunyai tag <tt> yang akan ditampilkan sama dengan tag <code>. Tag <tt> merupakan akronim dari Teletype.

Pada HTML5, tag <tt> sudah berstatus deprecated yang artinya sudah tidak disarankan lagi untuk dipakai dan kemungkinan tidak didukung oleh web browser. Anda mungkin sanggup menemukan tag ini pada website lama.

Pada artikel selanjutnya kita akan mempelajari Cara Mengubah Arah Teks Dalam HTML Dengan Tag bdo.