HTML element tag <pre> merupakan tag pada HTML yang digunakan untuk mengidentifikasi kumpulan teks yang harus ditampilkan secara utuh apa adanya. HTML elemen tag ini akan menampilkan kumpulan teks lengkap dengan line break, indentasi dan juga spasi secara utuh. HTML element tag <pre> biasanya digunakan untuk menampilkan preview suatu kumpulan kode script komputer. Kode script komputer meliputi HTML, CSS, Javascript, PHP, Java, CPP dan lainnya.
HTML memiliki aturan dalam hal penulisan dan juga cara menampilkan pada browser. Jika suatu kode pada HTML terdapat deret spasi (white space) lebih dari satu, maka akan dianggap sebagai satu spasi saja. Kemudian HTML juga akan mengabaikan adanya line break yang dihasilkan dari penekanan tombol enter, begitu juga indentasi yang dihasilkan dari tombol tab.
HTML element tag <pre> akan menampilkan teks dan kode komputer secara utuh. Hal ini akan mempermudah dalam memahami isi dari kode tersebut. Element tag <pre> akan menghasilkan tampilan dalam bentuk teks dengan font monospace. Penulisan HTML elemen tag <pre> dituliskan dengan tag pembuka <pre> dan ditutup dengan tag penutup </pre>.
Berikut ini penggunaan element tag <pre> :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Element Tag PRE</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag PRE</h1>
<p>
<pre class="lang-html">
&lt;p&gt;Teks ini berada di sebuah elemen paragraf.&lt;/p&gt;
</pre>
<pre class="lang-css">
p {
font-family: Arial;
font-size: 14px;
color: #000000;
}
</pre>
<pre class="lang-php">
if(empty($judul)){
echo "Judul masih kosong, ulangi lagi";
die();
}
</pre>
</p>
</body>
</html>
HTML element tag <pre> dapat juga digunakan untuk menampilkan karakter ANSII murni. Berikut ini contoh ANSII murni berbentuk kelinci (courtesy : https://www.ascii.co.uk)
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Element Tag PRE</title>
</head>
<body>
<h1>Contoh HTML Element Tag PRE Dengan Output ANSII Murni</h1>
<p>
<pre>
mm. dM8
YMMMb. dMM8
YMMMMb dMMM'
`YMMMb dMMMP
`YMMM MMM'
"MbdMP
.dMMMMMM.P
dMM MMMMMM
8MMMMMMMMMMI
YMMMMMMMMM
"MMMMMMP
MxM .mmm
W"W """ VK
</pre>
</p>
</body>
</html>
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <pre> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <pre> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <pre> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar(onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <pre> pada HTML:
CSS
1
2
3
4
5
6
Previous Pagepre{
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
