Cara membuat blockquote pada html

membuat blockquote html

Pada artikel ini kita akan membahas seputar blockquote pada HTML, mulai dari definisi, cara membuatnya, serta contoh penulisannya. Lebih dari itu kita juga akan membahas format teks kutipan lainnya yang ada pada html. Berikut daftar list yang akan kita pelajari:

  • Elemen html <blockquote>
  • Elemen html <q>
  • Elemen html <abbr>
  • Elemen html <address>
  • Elemen html <cite>
  • Elemen html <bdo>

Elemen html <blockquote>

Blockquote adalah salah satu elemen HTML yang mendefinisikan sebuah kutipan yang diambil dari sumber lain. Selain itu, Anda juga bisa menggunakan blockquote untuk memberikan sebuah catatan atau informasi penting lainnya. Elemen <blockquote> secara default menampilkan jarak dari kiri ke kanan beberapa pixel.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
    <blockquote cite="https://id.wikipedia.org/wiki/HTML">Belajar Html dasar seputar blockquote.</blockquote>
    </body>
</html>

Hasilnya:

Belajar Html dasar seputar blockquote.

Elemen html <q>

Quote adalah salah satu elemen HTML yang mendefinisikan kutipan singkat. Elemen <q> sendiri kepanjangan dari quote. Elemen <q> secara default menampilkan tanda kutip double.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
    <p>Membuat sebuah <q>kutipan singkat</q> pada html.</p>
    </body>
</html>

Hasilnya:

Membuat sebuah kutipan singkat pada html.

Elemen html <abbr>

Abbr  adalah salah satu elemen HTML yang mendefinisikan singkatan atau akronim. Abbr sendiri kepanjangan dari Abbreviation. Penandaan singkatan menggunakan elemen <abbr> dapat memberikan informasi yang berguna untuk browser, sistem terjemahan dan mesin pencari (SEO). Elemen <abbr> secara default menampilkan garis bawah dotted, tanda tanya dan tooltip teks.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
    <p><abbr title="hyper text markup language">HTML</abbr> menggambarkan struktur atau isi pada halaman web.</p>
    </body>
</html>

Hasilnya:

HTML menggambarkan struktur atau isi pada halaman web.

Elemen html <address>

Address adalah salah satu elemen HTML yang mendefinisikan informasi kontak (penulis / pemilik) dari suatu dokumen atau artikel. Elemen <address> secara default menampilkan teks miring dan sebagian besar browser akan menambahkan jeda baris sebelum dan sesudah elemen.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <address>
    Penulis: Hendky.<br> 
    Negara: Indonesia.<br>
    Situs: hendky.com.<br>
    </address>

    </body>
</html>

Hasilnya:

Penulis: Hendky.
Negara: Indonesia.
Situs: hendky.com.

Elemen html <cite>

Cite adalah salah satu elemen HTML yang mendefinisikan judul suatu karya. Elemen <cite> secara default menampilkan teks miring.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
    <p><cite>Theme mocita</cite> buatan Hendky.com pada tahun 2019.</p>
    </body>
</html>

Hasilnya:

Theme mocita buatan Hendky.com pada tahun 2019.

Elemen html <bdo>

Bdo adalah salah satu elemen HTML yang mendefinisikan penggantian dua arah tulisan. Elemen <bdo> digunakan untuk mengesampingkan arah teks dari kanan ke kiri.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
    <bdo dir="rtl">Tulisan yang beralah dari kanan ke kiri.</bdo>
    </body>
</html>

Hasilnya:

Tulisan yang beralah dari kanan ke kiri.

Ringkasan pembelajaran

ElemenKegunaanya
<blockquote>Mendefinisikan sebuah kutipan yang diambil dari sumber luar.
<quote>Mendefinisikan sebuah kutipan pendek atau singkat.
<abbr>Mendefinisikan sebuah singkatan atau akronim.
<address>Mendefinisikan sebuah alamat tentang artikel atau dokumen.
<cite>Mendefinisikan sebuah judul suatu karya.
<bdo>mendefinisikan penggantian dua arah tulisan.

Leave a Reply

Your email address will not be published. Required fields are marked *