Cara Membuat Blockquote HTML

Sebelumnya, kita sudah membahas cara membuat tulisan superscript HTML. Kali ini kita akan bahas cara membuat blockquote HTML. Check it out untuk menyimak pembahasan AneIqbal selengkapnya.

Kali ini, kita akan bahas cara membuat kutipan atau quote di HTML. Ada 2 cara untuk membuat kutipan di HTML, yakni dengan tag <blockquote> dan dengan tag <q>.

Membuat kutipan dengan tag <blockquote>

Jika kita ingin membuat kutipan yang panjang, yang lebih dari 1 baris, atau yang ingin terpisah dari teks lainnya, gunakan tag <blockquote>.

Tag <blockquote> merupakan tag berjenis block element, sehingga akan berpindah baris baru dan terpisah dari teks lain.

Selain kutipan, tag tersebut juga cocok bila digunakan untuk penulisan testimoni.

Berikut ini contoh kode HTML-nya.

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat kutipan di HTML</title>
  </head>
  <body>
    <p>Berikut pengertian HTML yang dikutip dari Wikipedia:</p>
    <blockquote>Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.</blockquote>
  </body>
</html>

Seperti ini jadinya:

html quote
blockquote HTML dengan tag <blockquote>

Teks yang diberikan tag <blockquote> akan ditampilkan menjorok ke kanan oleh web browser seperti terlihat pada gambar di atas.

Membuat kutipan dengan tag <q>

Kalau tag <blockquote> tadi membuat kutipan dengan block, maka tag <q> ini adalah versi inline-nya. Tag <q> akan membuat kutipan yang menyatu dengan teks di sekitarnya dan tidak membuat baris baru.

Secara otomatis, tag <q> akan ditampilkan dengan tanda kutip. Seperti ini contoh kode HTML-nya.

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat kutipan di HTML</title>
  </head>
  <body>
    <p> Tadi, ane bilang, <q>Jangan bosan mampir ke AneIqbal ya!<q></p>
  </body>
</html>

Jadinya akan seperti ini.

quote html
kutipan dengan kutip tag <q>

Nah, terlihat kan ada kutipnya di gambar di atas walaupun di kode HTML-nya tidak kita tulis tanda kutip.

Seperti itulah cara membuat kutipan di HTML. Selanjutnya, kita akan bahas cara menggunakan tag pre HTML.

Share yuk, ke:

Leave a Comment