Apa Itu Tag dan Attribute Pada HTML?

Ketika kita menulis kode HTML, istilah dari tag, elemen, dan attribute akan sering kamu dengar. meskipun ketiga istilah tersebut terdengar mirip, tapi masing-masing memiliki peran yang berbeda. Mari kita pelajari apa perbedaanya.

Tag HTML

Tag adalah simbol khusus pada HTML yang digunakan untuk memberitahu browser konten apa yang ingin kita tampilkan. Contoh tag umum yang sering akan kita gunakan ketika menulis HTML adalah: <p></p>, <img>, dan lain sebagainya.

<p>Hey this is text wrapper on tag P</p>

• <p> adalah tag pembuka
• </p> sebagai penutup dari tag.

Elemen HTML

Elemen pada HTML adalah gabungan dari tag pembuka, isi konten dari tag yang di definisikan, tag penutup. Jadi, kita bisa mengasumsikan bahwa kode html yang kita tulis menggunakan tag <p></p> termasuk kedalam sebuah elemen HTML. Contoh lebih jelasnya perhatikan kode HTML dibawah ini.

<p>Hello bro, iam an element of html</p>

<a>Hello, iam an element of html too</a>

<h2>Dont forget me please!</h2>

Terdapat tiga elemen yang menggunakan tag berbeda pada kode diatas. Masing-masing dari isi konten dari sebuah tag tersebut dapat kita sebut sebagai elemen HTML.

Attribute HTML

Attribute pada HTML adalah informasi tambahan yang diberikan pada sebuah tag yang didefinisikan, untuk mengontrol perilaku atau menambahkan properti dari elemen tersebut. Contoh beberapa tag umum yang memiliki attribute bawaan sebagai berikut.

// src and alt is attribute
<img src="/assets/pict.png" alt="picture"/>
// type is attribute
<input type="text"/>

Mari kita bahas fungsi dari setiap attribute yang di definisikan.

• src berfungsi sebagai penentu sumber path gambar atau media yang akan ditampilkan pada halaman web
• alt berguna untuk memberikan deskripsi teks dari gambar
• type digunakan untuk menentukan jenis tipe inputan pada tag input

Nesting Elemen pada HTML

Kita juga dapat menyusun elemen HTML di dalam elemen lainya. Contohnya sebagai berikut.

<p>
	// this is parent of element
	<span>and this is of child element of the tag P</span>
<p>

Pada kode diatas, kita bisa menyimpulkan bahwa tag <p></p> merupakan elemen induk(parent), sedangkan tag <span></span> yang berada didalamnya adalah elemen anak(child).

Kesimpulan

Mengenali dasar-dasar dari HTML seperti tag, elemen, dan attribute juga sangat penting saat kita mulai belajar HTML. Selain itu, memahami konsep nesting element serta fungsi dari beberapa atribut pada tag HTML juga merupakan hal yang mendasar dan perlu dikuasai.

Terimakasih, sampai jumpa di artikel selanjutnya :D.