Dapatkan contoh source code project backend, frontend, atau fullstack untuk kamu amati, tiru, dan modifikasi sesuka hati. Klik untuk melihat detail!

Halo, selamat datang di Ruang Developer Blog. HTML (Hypertext Markup Language) merupakan suatu bahasa markup yang pasti kamu kenali sebagai seorang developer/programmer. Apalagi kamu yang yang saat ini sedang belajar mendalami bidang front-end atau kamu yang saat ini berprofesi sebagai front-end developer. Struktur HTML disusun menggunakan bagian-bagian yang disebut dengan “tag”. Ada banyak sekali tag HTML yang bisa kamu gunakan untuk membuat sebuah halaman website seperti tag head, body, div, section, article, dan lain-lain.

Dari sekian banyaknya tag HTML, beberapa jenis tag berikut ini mungkin tidak familiar bagi kamu atau bahkan mungkin kamu baru mengetahuinya saat membaca tulisan ini.

details

Tag details digunakan untuk menampilkan informasi tambahan tentang sesuatu menggunakan disclosure widget. Widget ini bisa dibuka dan ditutup sesuai permintaan secara langsung. Seperti fitur collapse pada bootstrap.

Tag summary di dalamnya digunakan untuk menampilkan bagian yang terlihat sebagai heading atau judul.

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

kbd

Saat mengunjungi sebuah website, apakah kamu pernah melihat ada beberapa teks yang diidentifikasi sebagai input keyboard? itu adalah hasil dari tag kbd. Mari kita lihat bagaimana cara menggunakan tag kbd.

<p>
  Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an
  MDN page.
</p>

abbr

Abbr adalah bentuk singkat dari abbreviation. Tag ini memungkinkan kamu untuk membuat keterangan dari suatu singkatan atau akronim. Tag ini akan membuat text yang ada didalamnya memiliki titik-titik dibawahnya, jika kamu hover atau mengarahkan pointer padanya maka akan muncul sebuah tooltip yang berisi keterangan atau kepanjangan dari sebuah singkatan.

<p>
  You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your
  <abbr title="HyperText Markup Language">HTML</abbr>.
</p>

samp

Tag samp digunakan untuk menampilkan contoh keluaran/output dari suatu program komputer. Text yang ada didalam tag samp akan ditampilkan dalam bentuk font monospace default milik browser.

Perhatikan contoh berikut

<p>I was trying to boot my computer, but I got this hilarious message:</p>

<p>
  <samp>Keyboard not found <br />Press F1 to continue</samp>
</p>

bdo

Bdo adalah singkatan dari Bi-Directional Override. Tag ini akan memungkinkan kamu menentukan arah dari tulisan yang akan tampil pada halaman web, seperti dari kanan ke kiri atau sebaliknya dari kiri ke kanan. Dalam prakteknya sangat jarang untuk mengubah arah text, namun pada beberapa kasus, tag ini berguna untuk beberapa bahasa yang arah bacanya adalah dari kanan ke kiri.

<h3>Famous seaside songs</h3>

<p>The English song "Oh I do like to be beside the seaside"</p>

<p>
  Looks like this in Hebrew:
  <span dir="rtl">אה, אני אוהב להיות ליד חוף הים</span>
</p>

<p>
  In the computer's memory, this is stored as
  <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo>
</p>

Kesimpulan

Beberapa tag yang telah kita pelajari tadi adalah tag yang mungkin jarang atau baru kamu kenal. Saya harap tulisan ini bermanfaat, dan teruslah belajar sampai kapanpun.

Tags: #html
Bagikan:

Ingin Berdiskusi?

Yuk bergabung di Grup Telegram Ruang Developer atau mulai diskusi melalui GitHub. See You!

Dapatkan contoh source code project backend, frontend, atau fullstack untuk kamu amati, tiru, dan modifikasi sesuka hati. Klik untuk melihat detail!
comments powered by Disqus

Berlangganan Gratis

Kamu akan menerima email update dari Ruang Developer

Beri Dukungan

Beri dukungan, dapatkan full source code project web untuk bahan referensi, tiru, dan modifikasi.
Lightbox