Tutorial Text HTML Part 7: Cara Membuat Kutipan di dalam HTML (tag blockquote dan tag q)

147

Yodha.web.id – Dalam penulisan text, terutama artikel ilmiah, kita akan sering membuat kutipan yang berasal dari sumber-sumber referensi. Untuk penulisan kutipan, HTML memiliki 2 buah tag khusus, yakni tag <blockquote> dan tag <quote>. Pada tutorial Text HTML kali ini kita akan membahas Cara Membuat Kutipan di dalam HTML.


Tag <blockquote> Untuk Membuat Kutipan Panjang HTML

Tag <blockquote> digunakan untuk bagian text yang merupakan kutipan panjang. Disebut kutipan panjang karena tag ini merupakan tipe block element, sehingga akan memisahkan diri dari text yang ada menjadi baris baru. Tag <blockquote> lebih cocok digunakan untuk memberikan penegasan penting untuk kutipan.

Selain untuk kutipan, sering juga tag ini digunakan untuk penulisan testimoni.

Berikut adalah contoh cara penulisan dan penggunaan tag <blockquote> di dalam HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Yodha.web.id</h3>
<p>HTML atau Hypertext Markup Language adalah dasar dari semua
halaman web di internet.</p>
<p>Berikut adalah defenisi HTML dikutip dari Wikipedia: </p>
<blockquote>HTML or HyperText Markup Language is the standard
markup language used to create web pages.
HTML is written in the form of HTML elements consisting of tags
enclosed in angle brackets.</blockquote>
</body>
</html>

Seperti yang terlihat, secara default Web browser menampilkan tag <blockquote> sebagai paragraf baru dan dijorokkan (indent) beberapa pixel pada awal dan akhir text.


Tag <q> Untuk Membuat Kutipan Pendek HTML

Tag <q> adalah versi inline dari tag <blockquote>. Tag ini digunakan untuk kutipan pendek yang akan ‘menyatu’ dengan text yang ada saat ini karena sifatnya yang termasuk tipe inline element.

Didalam spesifikasi HTML, Web browser akan menampilkan text yang berada di dalam tag <q> berada didalam tanda kutip.

Berikut adalah contoh cara penulisan dan penggunaan tag <q> di dalam HTML:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Yodha.web.id</h3>
<p>Andi berkata, <q>Jadilah diri anda sendiri</q>
</body>
</html>

Seperti yang terlihat, web browser akan menambahkan tanda kutip untuk tag <q>, walaupun kita tidak menuliskannya di dalam text.