HTML pre tag | belajar <pre> element

HTML pre tag | belajar <pre> element

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.

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.

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
<!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