Lompat ke konten Lompat ke sidebar Lompat ke footer

Belajar Dasar HTML #4 : Mengenal Tag, Element, dan Atribute HTML

HTML Logo


Sebelumnya kita sudah belajar Menjalankan file HTML beserta struktur HTML yang di dalamnya terdapat struktur dasar yang paling penting dalam pembuatan dokumen html. Terdapat juga Tag, Elemen, dan Atribut yang merupakan bagian penting di dalam struktur html tersebut. Bagi pemula seperti kita ini, kita wajib untuk mengetahui ketiga hal ini.


See the Pen by MiftaSetiaji (@MiftaSetiaji) on CodePen.

Pengertian Tag HTML

Tag, Element, Attribute HTML

Tag merupakan sebuah kode program untuk memberitahu browser fungsi dari text tersebut, seperti judul, sub judul, paragraf, list, link dan sebagainya. Hampir semua tag memiliki tag pembuka dan tag penutup, ada juga beberapa yang tidak menggunakan tag penutup. 

Kita tidak harus menghafalkan semua tag html, karena tag html sendiri sudah ada sekitar 200 an lebih, tetapi bagi yang ingin menghafalkannya juga tidak masalah. 

Penulisan tag

Tag berada di dalam tanda kurung < isi tag >, dan untuk tag penutup ditambahkan garis miring (/) di depan nama tag, contoh </p>. Setiap tag mempunyai fungsinya masing-masing, ada yang digunakan untuk membuat judul, heading, paragraf, link, dan sebagainya, seperti contoh kode program paling atas atas.

Terdapat tag yang tidak ada tag penutupnya, istilah ini dikenal dengan self closing tag atau void tag, kita bisa menulisnya dengan <br> atau <br /> untuk break (pindah baris), ada juga tag yang tidak ada penutupnya yang lain seperti, <hr> untuk horizon line (garis horizontal).

Pada text (italic), saya menggunakan tag bertumbuk (di dalam tag terdapat tag lagi). Penulisannya tag yang kita tulis pertama (di code <i>) ditutup terakhir sendiri. Jika salah dalam penutupan tag bertumbuk ini, akibatnya kode html tidak valid.

Ada juga HTML Case-Insensitive, artinya huruf besar dan huruf kecil diartikan sama, tetapi kebiasaan web programmer sekarang kebanyakan menggunakan huruf kecil untuk keseluruhan tag.

Pengertian Element

Element HTML merupakan sebuah komponen yang menyusun dokumen html, isinya terletak diantara tag pembuka dan tag penutup (termasuk atribut yang dimiliki). Element juga disebut dengan Node, karena merupakan salah satu jenis node yang menyusun dokumen dalam diagram HTML Tree.

HTML Tree


Terdapat tida jenis node yaitu  Node Element, Node Aribute, dan Node Text. Element dibuat dengan tag pembuka, isi tag dan tag penutup, biasanya juga terdapat tambahan atribute sebagai pelengkap. 

Element tidak hanya berisi text saja, tetapi juga bisa berisi elemen lain, ada juga elemen untuk multimedia, script, tabel, metadata, dll. Istilah ini biasa disebut dengan Nested Element (elemen didalam elemen).

Pengertian Attribute

Atribute merupakan kata khusus untuk informasi tambahan yang berada di dalam tag pembuka.  Berisi instruksi untuk menentukan karakteristik atau perilaku dari element (seperti, warna text, ukuran text, dll), istilah ini biasa disebut dengan Modifier

Attribute ini dapat ditambahkan pada element manapun, seperti contoh dibawah ini. Jumlah attribute terhadap tag bisa lebih dari satu, tetapi tidak semua tag harus membutuhkan attribute. 

Penulisan Attribute

<a href="www.syteekno.genbisoft.com"> SyTeekno </a>
<img src="image.png" alt="tulisan tag" width="120" height= 120 />
<h1 align="center"> Belajar HTML di Syteekno </h1>
<img class='lazyload'
data-src='image.png'
src="placeholder" />


Penulisannya dengan format nama="value", kita bisa menggunakan tanda petik satu (') atau tanda petik dua ("). Untuk value angka, kita boleh memakai tanda petik maupun tidak menggunakan tanda petik.

Kita menggunakan tanda min (-) bukan spasi, jika terdapat attribute yang memiliki lebih dari satu nama. 

Kita baru saja mempelajari Tag, Element, dan Attribute yang ada di HTML. Saya rasa kalian sudah dapat membedakan ketiga hal ini. Selanjutnya kita akan berkenalan dengan elemen dasar seperti ,menambahkan komentar di html, heading, paragraf, list, link, gambar, form, dan tabel. 



Posting Komentar untuk "Belajar Dasar HTML #4 : Mengenal Tag, Element, dan Atribute HTML"