Tahukah Kalian Self-Closing Tag dalam HTML? Pengertian, Apa itu Tag Berdiri Sendiri? Sejarah, Macam dan Contohnya! Benar sekali, seperti yang sudah kita ketahui, HTML adalah bahasa yang sangat berguna yang telah mengubah internet serperti yang kita kenal sekarang dengan kemudahan skripnya. Tag HTML menentukan elemen di dalamnya, di mana mereka mengikuti struktur semantik yang ketat untuk tag penutup. Tetapi beberapa tag HTML ini ditutup sendiri dan tidak memerlukan tag tambahan itu.
Betul, seperti yang sudah Kami jelaskan sebelumnya dalam penjelasan tentang pengertian HTML element, ini disebut sebagai empty dan void element yang di dalamnya terdapat singleton dan tag kosong. Secara umum, untuk contohnya sudah dapat kita lihat pada tag <br/> yang menentukan jeda baris tunggal dan <hr/> yang menentukan satu perubahan dalam baris konten. Dalam postingan kali ini, Kami akan membahas secara lengkap tentang apa itu self-closing tag dalam HTML. Baklah langsung saja, berikut ini adalah ulasannya!
Daftar Isi Konten:
Pengertian Self-Closing Tag dalam HTML
Berarti tag penutup diri atau berdiri sendiri (mandiri) dalam bahasa Indonesia. Self-closing tag adalah elemen kode HTML yang telah berevolusi dalam bahasa markup-nya berdasarkan simpulan Kami yang bersumber dari Situs Technopedia.
Biasanya, self-closing tag atau tag penutup diri menggunakan karakter “/” untuk secara efektif menutup tag awal yang terlampir dalam tanda sisipan.
Apa itu Tag Berdiri Sendiri?
Lalu, apa itu yang dimaksud dengan tag berdiri sendiri ini? Seperti yang sudah Kami jelaskan di atas, ini lebih dikenal dengan dengan istilah self-closing tag dan empty atau void element berdasarkan spesifikasi HTML5.
Benar, ini adalah tag mandiri. Tag markup yang valid tanpa harus menggunakan tag penutup lain, sebagai contoh misalnya seperti tag break dengan kode <br/> dalam HTML.
Untuk sebagian besar elemen HTML, untuk menggunakannya, Anda memulainya dengan tag open (pembuka) dan diakhiri dengan tag closing (penutup).
Di antara kedua tag tersebut, konten dari sebuah elemen muncul dan dapat ditampilkan.
Sebagai contoh misalnya seperti kode di bawah ini:
<p>Ini adalah konten atau isinya.</p>
Elemen paragraf sederhana di atas menunjukkan bagaimana tag pembuka dan penutup digunakan.
Sebagian besar elemen HTML mengikuti pola yang sama, tetapi beberapa tag HTML tidak menyertakan tag pembuka dan penutup.
Apa itu Void Element?
Kemudian, ada juga istilah void element. Akronim ini sama dengan elemen kosong, tag tunggal atau tag berdiri sendiri dalam HTML yang tidak memerlukan tag penutup untuk valid.
Elemen-elemen ini biasanya yang berdiri sendiri di halaman atau di mana akhir kontennya jelas dari konteks halaman itu sendiri.
Sejarah HTML Self-Closing Tag
Dalam membahas tentang pengertian tag penutup diri di HTML, pastinya kita juga harus mengenal paling tidak sedikit terkait sejarah awal mulanya.
Baiklah, kisah tag penutup diri atau tag berdiri sendiri yang lebih di berkaitan dengan cara-cara bagaimana HTML berkembang selama penggunaannya sejak akhir tahun 1980-an.
HTML tag konvensional memiliki tag pembuka dan tag penutup. Namun, ada elemen dalam HTML yang disebut elemen atau void element.
Sebagai contoh misalnya seperti gambar dengan kode <img> dan link (tautan) dengan kode <a>, yang tidak sepenuhnya memerlukan tag penutup karena struktur bawaannya.
Menurut para ahli dan pakar, mereka mengklaim bahwa hal-hal seperti gambar dan tautan tidak perlu dan tidak dapat memiliki konten, karena memang mereka hanya semacam petunjuk ke elemen yang diinstal di halaman.
Dalam variasi HTML yang lebih baru seperti XHTML, alih-alih menyertakan tag pembuka dan penutup individual, developers atau pengembang menggunakan tag penutup sendiri yang menyertakan “/” di dalam kodenya.
Sekarang, dengan versi terbaru HTML5 (baca pengertian HTML5 di sini), bahkan karakter garis miring dianggap sebagai deprecated (usang).
Aturan W3C dan standar lainnya menunjukkan bahwa pengembang tidak perlu lagi menyertakan karakter untuk menunjukkan tag penutup, karena dapat dipahami bahwa void element tersebut tidak perlu ditutup sama sekali.
Pertanyaan-pertanyaan signifikan seringkali muncul di situs-situs di internet (baca pengertian internet di sini) tentang bagaimana standar HTML dan W3C menangani sintaksis tag penutup sendiri.
Seperti itulah kira-kira sedikit penjelasan terkait sejarahnya hingga sekarang ini (terutama di tahun 2020).
Macam-Macam Self-Closing Tag
Setelah kita mengetahui pengertian self-closing tag, apa itu tag berdiri sendiri atau penutup diri dan sejarahnya di atas, adalah merupakan hal yang penting bagi kita untuk juga mengetahui apa saja macam-macamnya.
Seperti yang sudah Kami singgung sebelumnya, beberapa tag HTML5 adalah void element.
Saat Anda menulis HTML yang valid, Anda harus meninggalkan garis miring untuk tag ini seperti yang ditunjukkan di bawah ini.
Namun, perlu kalian ketahui bahwa penulisan atau trailing slash (/) merupakan hal yang diperlukan untuk XHTML yang valid.
Oke langsung saja, berikut daftar lengkap dari macam-macam self-closing tag atau tag (berdiri sendiri) atau empty dan void element dalam format versi terbaru HTML5:
<area /><base /><br /><col /><embed /><hr /><img /><input /><link /><meta /><param /><source /><track /><wbr /><command />(sudah usang)<keygen />(sudah usang)<menuitem />(sudah usang)
Note: Karakter spasi sebelum tanda slash “/” dalam HTML5 adalah opsional.
Contoh Self-Closing Tag dalam HTML
Terkait hal tersebut di atas, adapun dalam variasi HTML yang lebih baru seperti XHTML, alih-alih menyertakan tag opening (pembuka) dan closing (penutup) secara individual, developers atau pengembang menggunakan tag penutup sendiri yang menyertakan garis miring “/” di dalam tanda sisipan.
Contoh penyertaan garis miring (/) tersebut adalah seperti pada penulisan tag berikut:
<img src= "gambar/gambar-saya.jpg" alt="gambar-saya" />
Seperti yang kalian lihat di atas, ini adalah tag yang juga disebut dengan singleton atau void element.
Jika Anda menuliskan kodenya seperti ini <img src= "gambar/gambar-saya.jpg" alt="gambar-saya" /> , maka itu adalah salah.
Yang kalian perlukan hanyalah tag opening (pembuka) <img> dengan HTML attribute-nya yang valid.
Terkait penulisannya sendiri, Anda dapat menggunakan garis miring. Anda memang dapat mengabaikan slash (garis miring) dengan HTML4 dan HTML5.
Apakah Ending Slash atau Garis Miring Penutup Opsional?
Bagi kalian yang sedang membaca postingan Kami di sini dan kebetulan sedang bertanya-tanya apakah trailing atau ending slash (garis miring penutup) merupakan hal yang opsional terkait penulisannya?
Maka, dapat Kami katakan di sini bahwa kalian berada di tempat yang tepat! Mengapa? Tentu saja karena di sini Kami juga akan membahasnya.
Untuk penulisannya sendiri berdasarkan versi dari HTML, yaitu adalah sebagai berikut:
- HTML5; Garis miring adalah opsional.
- HTML4; Secara teknis tidak valid, namun, hal tersebut tetap dianggap dan diterima oleh validator HTML W3C.
- XHTML: Tanda trailing atau ending slash “/” adalah required (diperlukan).
Kami pribadi sangat menyarankan untuk selalu menambahkan garis miring. Karena, hal ini akan memberikan petunjuk visual dari tag yang tidak menutup.
Memang, HTML5 pada dasarnya berperilaku seolah-olah garis miring tidak ada.
Tag yang ditutup sendiri pada elemen yang “tidak kosong” seperti <p />, <div /> tidak akan berfungsi sama sekali.
Garis miring trailing akan diabaikan, dan ini akan diperlakukan sebagai tag open (pembuka).
Hal ini juga benar, terlepas dari apakah ada spasi putih di depan garis miringnya yang juga tidak akan bekerja karena alasan yang sama.
Self-closing tag atau tag penutup sendiri pada elemen void seperti <br/> atau <img src=" " alt=" " /> akan berfungsi.
HTML5 mendefinisikan sintaks HTML dan sintaksis XHTML yang mirip tetapi tidak identik, oleh karena itu Anda harus selalu memikirkan hal-hal ini.
File HTML disajikan secara umum, oleh karena itu dalam hal ini kita dapat melihat <hr> dan <hr /> tetap identik serta <br> dan <br />, keduanya juga dapat digunakan tanpa masalah.
Kesimpulan
Baiklah, Kami rasa sudah cukup jelas untuk sekarang. Oke, berdasarkan penjelasan dan pembahasan tentang Self-Closing Tag dalam HTML? Pengertian, Apa itu Tag Berdiri Sendiri? Sejarah, Macam dan Contohnya di atas, dapat kita simpulkan bahwa tag berdiri sendiri (mandiri), empty atau void element dan self-closing tag pada HTML adalah tag yang sama sekali tidak memerlukan tag penutup untuk dapat menjadi valid. Perlu kalian ketahui bahwa ini juga seing dikenal dengan sebutan singleton tag, kosong atau tag tunggal.
Penutup
Demikianlah ulasan yang dapat Kami bagikan kali ini, di mana Kami membahas mengenai Self-Closing Tag dalam HTML? Pengertian, Apa itu Tag Berdiri Sendiri? Sejarah, Macam dan Contohnya. Semoga apa yang dapat Kami sampaikan dalam tulisan ini dapat bermanfaat serta dapat menambah wawasan Anda semua, terutama dalam belajar teknologi informasi.
Silahkan bagikan artikel atau tulisan Kami di sini jika kalian rasa ini bermanfaat untuk teman, kerabat dan rekan belajar kalian semua. Sekian dari Rifqi Mulyawan, Terima Kasih.
Postingan ini juga tersedia dalam versi:
