Apa itu Teks Terformat pada HTML?

kita sudah mengenal paragraf, heading dan juga list pada HTML. Tapi masih ada beberapa lagi yang merupakan spesial teks format yang dapat kita gunakan yaitu <blockqoute>, <pre> dan <figure>.

Long quotations

Jika pada konten kita memiliki sebuah kutipan ataupun sebuah testimonial, kita dapat gunakan format long quotations dengan menggunakan tags <blockquote>. Konten di dalam elemen <blockquote> ini dapat berupa sebuah paragraf, heading ataupun list. 

<blockquote>
   <p>Situs web (bahasa Inggris: website) adalah sekumpulan halaman web yang saling berhubungan yang umumnya   berada pada peladen yang sama berisikan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisasi.</p>
</blockquote>

Berikut tampilan standar ketika kita sebuah konten berada di dalam <blockquote>.

Pada elemen ini kita dapat menggunakan atribut cite untuk menentukan sumber URL dari sebuah kutipan (Jika kutipan tersebut bersumber dari sebuah situs website).

<blockquote cite="https://id.wikipedia.org/wiki/Situs_web">
   <p>Situs web (bahasa Inggris: website) adalah sekumpulan halaman web yang saling berhubungan yang umumnya berada pada peladen yang sama berisikan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisasi.</p>
</blockquote>

Preformatted text

Pada modul sebelumnya, kita sudah mengetahui bahwa HTML akan mengabaikan penulisan spasi yang dituliskan secara berulang dan juga line breaks (baris baru). Tetapi pada beberapa tipe konten seperti contoh kode atau puisi hal tersebut sangat berarti. Dengan begitu, terdapat sebuah elemen yang dapat kita gunakan untuk menampilkan konten sesuai yang kita tulis pada text editor. Untuk menggunakannya, kita gunakan elemen <pre> sebagai pembungkus kontennya. Perhatikan contoh berikut:

<pre>
   SAJAK PUTIH
 
Bersandar pada tari warna pelangi
Kau depanku bertudung sutra senja
Di hitam matamu kembang mawar dan melati
Harum rambutmu mengalun bergelut senda
 
Sepi menyanyi, malam dalam mendoa tiba
Meriak muka air kolam jiwa
Dan dalam dadaku memerdu lagu
Menarik menari seluruh aku
 
Hidup dari hidupku, pintu terbuka
Selama matamu bagiku menengadah
Selama kau darah mengalir dari luka
Antara kita Mati datang tidak membelah...
 
                   Karya : Chairil Anwar
</pre>

Sehingga pada browser akan menampilkan hasil yang sama seperti yang kita tuliskan.

Figure

Elemen ini digunakan untuk merepresentasikan konten tersendiri (self-contained content) seperti ilustrasi, diagram, foto atau bisa juga sebuah baris kode. Banyak hal yang dapat digunakan dalam elemen ini. 

Elemen ini digunakan untuk mengkelompokkan blok konten yang dapat dipindahkan posisinya dari blok utama sebuah dokumen tanpa mempengaruhi arti dari induk dokumen.

Di dalam elemen figure kita dapat menuliskan elemen <figcaption> sebagai sebuah caption (judul) untuk konten tersebut. Berikut contoh penggunaan figure pada sebuah konten gambar.

<p>Dicoding adalah sebuah perusahaan startup yang bertujuan mengembangkan ekosistem developer di Indonesia.
    Berdiri sejak 5 Januari 2015, Dicoding memiliki platform pembelajaran elektronik di laman Dicoding.com.</p>
<figure>
    <img src="https://i.imgur.com/cs2BJzw.jpg" alt="dicoding" width="200px">
    <figcaption>Dicoding</figcaption>
</figure>
<p>Materi perdana yang menjadi magnet dari awal berdirinya Dicoding hingga kini adalah kelas Menjadi Android Developer
    Expert. Kelas ini dikembangkan oleh Google Developer Expert in Android, Sidiq Permana dan Head of Dicoding Academy,
    Ahmad Imaduddin. Seperti halnya kelas Picodiploma lain, modul online-nya juga hadir dalam bentuk buku berjudul sama
    yang telah mendapatkan ijin dan ISBN.</p>

Contoh lainnya, figure ini dapat kita gunakan untuk me-markup sebuah konten puisi.

<figure>
   <pre>
           SAJAK PUTIH
 
       Bersandar pada tari warna pelangi
       Kau depanku bertudung sutra senja
       Di hitam matamu kembang mawar dan melati
       Harum rambutmu mengalun bergelut senda
 
       Sepi menyanyi, malam dalam mendoa tiba
       Meriak muka air kolam jiwa
       Dan dalam dadaku memerdu lagu
       Menarik menari seluruh aku
 
       Hidup dari hidupku, pintu terbuka
       Selama matamu bagiku menengadah
       Selama kau darah mengalir dari luka
       Antara kita Mati datang tidak membelah...
   </pre>
   <figcaption>Sajak Putih oleh Charil Anwar</figcaption>
</figure>