Belajar HTML dasar : Apa itu Elemen? Apa itu Atribut?

 Elemen dan Atribut termasuk bagian penting di dalam HTML

Apa itu Elemen?

Elemen dalam HTML adalah sebuah kompunen yang menyusun dokumen HTML. Terkadang elemen juga disebut sebagai node, karena elemen merupakan salah satu jenis node yang menyusun dokumen HTML dalam diagram HTML tree.

Sumber : w3schools.com

 

Pada diagram tersebut terdapat 3 macam node, yaitu node elemen, node atribut, dan node teks.

Elemen dibentuk dari tag pembuka, isi tag, dan tag penutup. Terkadang juga ditambahkan dengan beberapa atribut.

Contoh :

<p align="center">Web Desain</p>

Pada contoh yang ada terdapat satu elemen <p> dengan atribut align="center" dan memiliki isi teks Web Desain. Elemen tidak selalu berisi teks, terkadang juga berisi dengan elemen lain. Biasanya disebut dengan nested element atau elemen di dalam elemen.

Beberapa elemen HTML terkadang ditambahkan atribut sebagai pelengkap.

Apa itu Atribut?

Atribut adalah kata khusus yang berada di dalam tag pembuka. Atribut juga disebut sebagai modifier yang akan menentukan perilaku dari elemen.

Atribut dapat ditambahkan pada elemen manaun. Ada elemen yang mewajibkan mengunakan atribut seperti elemen <a>, <img>, <video>, dan lain-lain.

contoh :

<a href="https://programkdg.blogspot.com"> programkdg.blogspot.com </a>

Tag <a> adalah tag untuk membuat link. Tag ini wajib menambahkan atribut href untuk menyatakan halaman tujuan dari link.

Jumlah atribut pada elemen bisa lebih dari satu.

Contoh :

<img src="penguin.jpg" width="100" height="10"/>

Atribut src adalah atribut khusus untuk tag <img> berfungsi untuk menentukan gambar yang akan ditampilkan. lalu atribut width dan height adalah atribut yang mengatur ukurannya.

Jenis-jenis Atribut HTML

Tiap-tiap elemen terkadang memiliki atribut khusus yang hanya bisa digunakan pada elemen tersebeut. Ada atribut yang bersifat global dan bisa ditambahkan ke semua elemen.

Jenis-jenis atribut yang harus diketahui sebagai berikut :

1. Atribut Global

Atribut global adalah atribut yang bisa ditambahkan pada semua elemen HTML.

Daftar atribut global berserta fungsinya :

• accesskey          →Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen
• class                  →Menentukan class CSS yang akan digunakan
• contenteditable →Menentukan isi elemen yang bisa diedit atau tidak
• data-*               →Digunakan untuk menyimpan data
• dir                     →Menentukan arah teks dari elemen (kiri ke kanan atau kanan ke kiri)
• draggable         →Menentukan apakah elemen bisa didrag atau tidak
• hidden              →Untuk menyembunyikan elemen
• id                      →Menentukan id yang unik untuk elemen
• lang                  →Menentukan bahasa yang akan digunakan untuk isis elemen
• spellcheck        →Menentukan apakah isi elemen harus dilakukan pengejaan grammer atau tidak
• style                 →Menentukan inline CSS untuk elemen
• tabindex           →Menentukan urutan atau index tab dari elemen (saat tombol tab ditekan)
• title                  →Menentukan informasi tambahan tentang elemen
• translate           →Menentukan apakah konten dari elemen bisa diterjemahkan atau tidak

2. Atribut Event

Atribut event adalah atribut yang digunakan untuk menentukan aksi yang akan dilakukan saat terjadi sesuatu pada elemen. Atribut ini nantinya akan banyak digunakan pada pemrograman Javascrip.

Daftar atribut event saat terjadi sesuatu pada jendela browser :

Nama Atribut	Nilai	Fungsi : Menjalankan script
onafterprint	Kode javascript	Setelah dokumen dicetak
onbeforeprint	Kode javascript	Sebelum dokumen dicetak
onebeforeunload	Kode javascript	Sebelum saat dokumen tidak terload
onerror	Kode javascript	Saat terjadi error
onhashchange	Kode javascript	Perubahan pada bagian anchor di URL
onload	Kode javascript	Setelah loading selesai
onmessage	Kode javascript	Saat ada pesan
onoffline	Kode javascript	Saat tiba-tiba offline
ononline	Kode javascript	Saat tiba-tiba online
onepagehide	Kode javascript	Saat user sedang tidak membuka halaman Web
onpageshow	Kode javascript	Saat user sedang membuka halaman Web
onopstate	Kode javascript	Saat history browser berubah
onresize	Kode javascript	Jendela browser berubah
onstorage	Kode javascript	Saat area penyimpanan (web storage) di update
onunload	Kode javascript	Saat Web browser ditutup

 Selain itu masih banyak atribut event lainnya.

3. Aribut Khusus

Nama Atribut	Tag yang bisa dipakai
<src>	<audio> , <embed> , <iframe> , <img> , dll
<href>	<a> , <link>
<action>	<form>
<autoplay>	<audio> , <video>