Komponen Utama dalam HTML (Tag, Atribut, dan Elemen)

Pada HTML, komponen seperti tag, elemen dan atribut merupakan hal yang harus dikuasai dalam pemrograman HTML. Ketiganya merupakan komponen yang saling berkaitan dan bisa ada dalam sebuah tag HTML seperti contoh source code berikut dari postingan sebelumnya mengenai pengenalan HTML disini.

Dimana <a> dan </a> merupakan tag, href="www.google.com" merupakan atribut, dan keseluruhan script code dari awal tag hingga akhir merupakan elemen. Lantas apa definisi tag, atribut dan komponen itu ? Berikut pembahasannya.

Tag

Tag merupakan teks khusus untuk menandai konten yang akan memberitahu browser bagaimana konten akan ditampilkan. Konten tersebut dapat berupa gambar, link, video, tabel, dan sebagainya. Hampir semua tag HTML ditulis secara berpasangan, misal <p> dengan </p> yang merupakan tag pembuka dan tag penutup. Pembeda antara keduanya ialah simbol slash (garis miring) pada tag penutup sedangkan tag pembuka tidak. 

Jika kita lupa untuk menulis penutup tag, umumnya browser akan “memaafkan” kesalahan ini dengan tetap menampilkan hasilnya secara normal seolah-olah kita menuliskan tag penutup tersebut. Walaupun hal ini membantu, tidak jarang malah bikin penulisan script mu berantakan yang bisa disebabkan tidak ada pasangan untuk setiap tag (terutama tag di dalam tag seperti berikut).

*tag b berada di dalam tag p

Namun perlu diingat bahwa tidak semua tag pada HTML ditulis secara berpasangan. Ada beberapa tag yang cara penulisannya tanpa perlu ditulis tag penutup yang dinamakan self-closing tags (tag yang ditutup sendiri). Dalam penulisannya, dapat ditambahkan slash sebelum penutup kurung siku (namun hal ini tidak diharuskan dalam HTML5). Misalnya: <br />, <hr />, <img />, dan <input />.

Elemen

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk tag itu sendiri dan atribut yang dimilikinya (jika ada). Elemen juga bisa berisi tag lain didalam tag yang sama. Elemen dapat dikategorikan menjadi dua berdasarkan tampilannya.

1. Inline Element

Inline element merupakan elemen sebaris yang menampilkan semua elemen yang inline juga didalam satu baris yang sama, seperti contoh berikut.

Tag <b>, dan <i> merupakan tag yang termasuk kedalam inline element yang berada didalam tag <p> yang merupakan block-level element. Artinya keduanya akan ditampilkan dibaris yang sama, walaupun ditulis di baris yang berbeda. Berikut tampilannya di browser.

2. Block-level Element

Block-level element merupakan elemen yang tampilannya akan selalu membuat baris baru, seperti contoh berikut.

Tag <h1>, <h4> dan <p> merupakan tag yang termasuk kedalam block-level elemen. Artinya keduanya akan ditampilkan dibaris yang berbeda, walaupun dapat ditulis di baris yang sama (tidak disarankan). Berikut tampilannya di browser.

Dimana ketiga tag dengan elemen block-level yang digunakan akan membuat baris baru termasuk kalimat "Teks biasa" yang tidak ada tag sama sekali. Berbeda dengan tag <p> di contoh inline element yang dapat berisi inline element, walaupun tag <p> sendiri merupakan tag dengan block-line element.

Dalam HTML kita tidak mungkin membuat tampilan website hanya dengan satu elemen. Kita dapat mengkombinasikan berbagai elemen agar tampilan websitenya sesuai dengan yang diinginkan. Hal ini yang disebut dengan elemen bersarang (nested element).

Elemen Bersarang (Nested Element)

Elemen bersarang atau nested element adalah elemen yang didalamnya terdapat elemen lain. Dimana penulisannya harus terstruktur, setiap elemen ditutup menggunakan tag elemen penutup dan tidak boleh tumpang tindih satu sama lain. Contohnya dalam source code sebagai berikut.

Hasil di browser

Contoh diatas merupakan penulisan nested element yang baik karena tidak tumpang tindih dan menutup setiap tag elemen nya dengan tag yang tepat agar tampilan website sesuai dengan yang diinginkan.

Atribut

Atribut HTML merupakan informasi tambahan yang diberikan pada tag pembuka. Atribut juga disebut sebagai modifier yang akan menentukan perliaku dari elemen. Setiap elemen dapat ditambahkan satu atribut ataupun lebih yang harus diapit dengan tanda petik dua ataupun tanda petik tunggal. Berikut contohnya.

Contoh diatas merupakan source code HTML hyperlink ke Google. Pada tag pembuka terdapat 3 atribut, yakni href (alamat file halaman lain maupun URL), title (informasi tambahan tooltip saat pointer mouse diarahkan ke link tersebut) dan target (menentukan dimana untuk menampilkan link file halaman lain ataupun URL tersebut).

Jenis-jenis Atribut

1. Atribut global, atribut yang dapat digunakan pada seluruh tag dan elemen HTML. Beberapa contoh penerapan atribut global diantaranya id, class, lang, dan style.
2. Atribut event, atribut yang digunakan untuk menentukan aksi yang akan dilakukan pada saat terjadi sesuatu pada tag atau elemen. Atribut ini banyak digunakan pada bahasa pemrograman JavaScript.
3. Atribut khusus, atribut yang hanya bisa dipakai pada elemen tertentu dan kadang atribut ini tidak bisa digunakan pada elemen yang lain seperti atribut href pada tag <a> dan <link>.

Kesimpulan

Komponen-komponen HTML seperti yang sudah dijelaskan sebelumnya bahwa ketiganya saling berkaitan satu sama lain. Biasanya, istilah tag dan elemen sering tertukar karena sekilas mirip. Perbedaanya hanya tag itu memiliki pasangannya atau tag yang termasuk kedalam self-closing tags sedangkan elemen itu keseluruhan tag dan isinya, bisa juga dengan atributnya. Jika ada suatu elemen yang tidak memiliki atribut, maka atribut default akan digunakan tergantung dari masing-masing tag yang digunakan.