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 baru (line break) dan tab pada HTML, maka kita dapat menggunakan tag <pre>. Jika kita menggunakan selain tag <pre>, misalnya tag <p> maka tag tersebut akan menghapus spasi (yang lebih dari satu satu spasi, maka hanya satu spasi yang ditampilkan), baris baru 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 singkatan dari Preformatted Text. Sesuai dengan namanya, tag ini digunakan untuk teks yang tidak diformat. Jika kita memasukkan teks atau tulisan 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 baru dan juga tab. Tag <pre> termasuk kedalam tipe block element, yang akan ditampilkan oleh web browser pada baris yang baru.

Berikut ini contoh 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>
Tag pre

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

Tag <pre> sering digunakan untuk menampilkan kode program yang lebih dari satu baris pada halaman website.

Penggunaan dan Penulisan Tag code Dalam HTML

Sesuai dengan namanya, tag <code> digunakan untuk "menampilkan kode 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 baru 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 contoh penulisan tag <code> dalam HTML :
<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML</title>
</head>
<body>
    <h2>Penggunaan Tag code</h2>
    Untuk menampilkan kode program yang tidak lebih dari satu baris pada halaman website, Anda dapat menggunakan tag <code>&lt;code&gt;</code>.
</body>
</html>
Tag code

Dari penjelasan diatas dapat diketahui perbedaan antara tag <pre> dan <code>. Tag <pre> termasuk kedalam tipe block element dan tanpa menformat spasi, baris baru 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 baru dan juga tab.

Jika Anda ingin menampilkan kode program yang lebih dari satu baris pada halaman website, Anda dapat menggunakan tag <pre>, namun jika kode program yang ingin ditampilkan tidak lebih dari satu baris, Anda dapat menggunakan tag <code>.
Jika Anda ingin memasukkan karakter seperti "<", ">"  dan beberapa karakter lainnya pada tag <code> dan <pre>, maka karakter tersebut harus dikonversi terlebih dahulu menjadi karakter HTML Entity sebelum dimasukkan pada tag <code> dan tag <pre>.
Pada HTML versi 4.01, memiliki tag <tt> yang akan ditampilkan sama dengan tag <code>. Tag <tt> merupakan singkatan dari Teletype.

Pada HTML5, tag <tt> sudah berstatus deprecated yang artinya sudah tidak disarankan lagi untuk digunakan dan kemungkinan tidak didukung oleh web browser. Anda mungkin dapat menemukan tag ini pada website lama.
Pada artikel selanjutnya kita akan mempelajari Cara Mengubah Arah Teks Dalam HTML Dengan Tag bdo.

0 Response to "Penggunaan dan Penulisan Tag pre dan Tag code Dalam HTML"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel