HTML blockquote tag | belajar <blockquote> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML blockquote tag. Tutorial dan panduan mengenai element <blockquote>...</blockquote> yang digunakan untuk menulis teks kutipan panjang. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <blockquote>.

Deskripsi
Penjelasan HTML blockquote

HTML blockquote element digunakan untuk menunjukkan sebuah konten yang dikutip dari sumber lain.

Jika kutipan bersumber dari alamat web (URL), maka URL harus ditulis pada attribute cite di dalam element blockquote, sedangkan keterangan yang menunjukkan sumber kutipan tersebut ditulis pada element <cite>.

blockquote element biasanya memiliki style teks dengan indentasi yang agak merapat ke dalam.

TIPS

<blockquote> element digunakan untuk blok kutipan panjang, sedangkan untuk kutipan pendek yang terletak didalam baris (inline) menggunakan <q> element.

Untuk merubah tampilan indentasi, dapat menggunakan CSS Margin property.

Attributes
Atribut HTML Tag <blockquote>

cite

Menentukkan sebuah URL yang menunjukkan sumber dokumen atau teks yang dikutip.

Value: URL

Global Attributes
Atribut Secara Global (Keseluruhan)

<blockquote> 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)

<blockquote> 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 <blockquote> element

Contoh 1
HTML 
<blockquote cite="http://id.wikipedia.org/wiki/Blog">
  Blog merupakan singkatan dari web log adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Situs web seperti ini biasanya dapat diakses oleh semua pengguna Internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.
</blockquote>
Contoh 2

Dengan Tambahan <footer> element

HTML 
<blockquote>
  <p>Janganlah hidup dalam kenangan, karena kenangan itu tentang masa lalu.</p>
  <p>Hiduplah dalam pekerjaan yang disemangati oleh impian, karena impianmu adalah gambaran tentang keindahan masa depanmu.</p>
  <footer>— <cite>Mario Teguh</cite></footer>
</blockquote>
Contoh 3

Dengan Menggunakan Microdata syntax

HTML 
<blockquote>
  <p>Chairul Tanjung mengungkapkan:</p>
  <p>"Bagi saya, Ibu adalah segalanya."</p>
  <p>"Bila kita benar-benar berbakti kepada Ibu sepenuh hati dan ikhlas, maka surga akan kita gapai di dunia."</p>
  <footer itemscope itemtype="http://schema.org/Book">
    Buku: <span itemprop="name">Chairul Tanjung Si Anak Singkong</span> <br />
    Penulis: <span itemprop="author">Tjahja Gunawan Diredja</span> <br />
    Penerbit: <span itemprop="publisher">Kompas</span> <br />
    Tanggal Terbit: <span itemprop="datePublished">July, 2012</span>
  </footer>
</blockquote>

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>HTML blockquote tag demo</title>
  </head>
  <body>
    <h2>Example 1:</h2>
    <h3>Mengenal Blog</h3>
    <p>Apa itu blog?</p>
    <blockquote cite="http://id.wikipedia.org/wiki/Blog">
    Blog merupakan singkatan dari web log adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Situs web seperti ini biasanya dapat diakses oleh semua pengguna Internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.
    </blockquote>
    <hr />
    <h2>Example 2:</h2>
    <blockquote>
      <p>Janganlah hidup dalam kenangan, karena kenangan itu tentang masa lalu.</p>
      <p>Hiduplah dalam pekerjaan yang disemangati oleh impian, karena impianmu adalah gambaran tentang keindahan masa depanmu.</p>
      <footer>— <cite>Mario Teguh</cite></footer>
    </blockquote>
    <hr />
    <h2>Example 3:</h2>
    <blockquote>
      <p>Chairul Tanjung mengungkapkan:</p>
      <p>"Bagi saya, Ibu adalah segalanya."</p>
      <p>"Bila kita benar-benar berbakti kepada Ibu sepenuh hati dan ikhlas, maka surga akan kita gapai di dunia."</p>
      <footer itemscope itemtype="http://schema.org/Book">
        Buku: <span itemprop="name">Chairul Tanjung Si Anak Singkong</span> <br />
        Penulis: <span itemprop="author">Tjahja Gunawan Diredja</span> <br />
        Penerbit: <span itemprop="publisher">Kompas</span> <br />
        Tanggal Terbit: <span itemprop="datePublished">July, 2012</span>
      </footer>
    </blockquote>
  </body>
</html>
SHARE
Previous Article Next Article