HTML pre tag | belajar <pre> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML pre tag. Tutorial dan panduan mengenai element <pre>...</pre> yang digunakan untuk menulis teks tanpa format. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <pre>.

Deskripsi
Penjelasan HTML pre tag

HTML <pre> element digunakan untuk merepresentasikan sebuah blok teks preformat (preformatted text). Teks yang ditulis didalam <pre> elemen memiliki struktur berdasarkan ketetapan tifografi, artinya teks ditulis apa adanya sesuai format yang ditulis didalam file (dokumen HTML).

<pre> sering digunakan sebagai induk element bagi <code>, yang mana didalam element pre terdapat element code yang digunakan untuk menulis source code.

Attributes
Atribut HTML Tag <pre>

Dalam HTML5, <pre> elemen tidak memiliki attribute khusus yang dapat digunakan, sedangkan didalam HTML 4.01 dan versi sebelumnya terdapat atribut cols, width dan wrap. Atribut-atribut ini sudah usang dan tidak dipakai lagi didalam HTML5, sehingga tidak dibahas disini.

Global Attributes
Atribut Secara Global (Keseluruhan)

<pre> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<pre> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <pre> element

Contoh 1

Contoh kode pre element sederhana.

HTML 
<pre>
  pre ditulis dengan pola teks
        seperti ini
  hasilnya pun sama...
    baik spasi maupun garis baru format letak tulisan
          akan sama (apa adanya)
baris kedalam
                    spasi jauh
</pre>

Contoh seperti diatas, dapat digunakan untuk memarkup sebuah puisi atau syair.

Contoh 2

Contoh <pre> yang digunakan bersamaan dengan element <code>. Dibawah ini merupakan contoh untuk memarkup kode CSS pada sebuah halaman web (HTML).

HTML 
<pre>
  <code>pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0px;
  }</code>
</pre>

Untuk contoh diatas, dapat diedit sendiri dan dilihat hasilnya pada demo editor (klik demo link pada contoh lengkap) dibawah ini:

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML pre tag</title>
    <style>

    </style>
  </head>
  <body>
    <pre>
      <code>pre {
        display: block;
        font-family: monospace;
        white-space: pre;
        margin: 1em 0px;
      }</code>
    </pre>
  </body>
</html>
SHARE
Previous Article Next Article