Hallo teman-teman bertemu lagi pada tutorial dumet school, pada tutorial kali ini saya akan mengenalkan tag baru bawaan Html5 yaitu tag pre, sebelum kita praktekan penggunaannya, terlebih dahulu kita akan bahas fungsi dari tag yang satu ini.

Fungsi dari tag pre adalah merepresentasikan teks yang ditulis didalamnya, dalam artian dia akan menampilkan teks yang kita ketik di dalam editor berdasarkan tipografi nyatanya, artinya teks ditulis apa adanya sesuai format yang ditulis didalam file (dokumen HTML).
Oke untuk lebih jelasnya mungkin kita coba praktekan saja silahkan teman teman buat sebuah file HTML dan ketikan script berikut :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<p>
      psince the 1500s, 
   when an unknown printer 
   
   took a galley of type and scrambled 
                    it to make a type specimen book.
 It has survived not only five centuries
  </p>
</body>
</html>

maka jika di save hasilnya akan seperti berikut:

mengenal-tag-pre-1

sekarang silahkan ganti tag p  dengan pre, seperti berikut :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<pre>
      psince the 1500s, 
   when an unknown printer 
   
   took a galley of type and scrambled 
                    it to make a type specimen book.
 It has survived not only five centuries
  </pre>
</body>
</html>

Maka hasil yang dihasilkan akan seperti berikut:

mengenal-tag-pre-2

Dengan menggunakan tag atau element pre content yang dihasilkan akan mengcopy penulisan yang ada pada editor, ketika kita mengenter satu konten maka hasilnya akan terenter juga, ketika kita spasi banyak maka akan terspasi juga.

Oke teman-teman sekian dulu tutorial untuk kali ini, semoga bermanfaat.

Terimakasih.