-->

Iklan bawah header

Belajar HTML Part 2 - Mengenal Tag, Elemen dan Atribut pada HTML

Tag, elemen, atribut

Tag, elemen, dan atribut merupakan bagian penting yang ada di dalam HTML. Ketiganya merupakan dasar dari HTML dan juga dasar dari seluruh halaman web yang ada di internet. Jadi bagi kamu yang baru belajar HTML, wajib hukumnya untuk mengetahui ketiga hal tersebut.

Apa yang dimaksud dengan Tag, Elemen, dan Atribut?

Dan apa perberdaan dari Tag, Elemen, dan Atribut?

Mari kita bahas...

Apa itu Tag?

Disebut sebagai bahasa markup, HTML membutuhkan penandaan terhadap suatu objek yang nantinya akan diapit diantara tag agar web browser dapat mengenali perintah seperti apa output yang akan ditampilkan. Dengan kata lain tag merupakan teks khusus (perintah) yang ditulis antara dua karakter "<" dan ">" yang menjadi pembeda antara teks biasa agar bisa dikenali web browser untuk diterjemahkan kedalam sebuah bentuk visual berdasarkan perintah yang diberikan.

Dalam penulisan sebuah tag biasanya ditulis secara berpasangan (ada tag pembuka dan ada tag penutupnya). Namun, ada juga tag tunggal yang tidak memerlukan tag penutup. Tag penutup pada tag tunggal ditulis dengan menggunakan garis miring (/) di depan nama tag.

Berikut contoh tag-tag dasar yang perlu kalian ingat.

TagFungsi
<html>untuk memulai dokumen HTML
<head>untuk membuat bagian head
<body>untuk membuat bagian body
<h1> sampai <h6>untuk membuat heading pada artikel
<p>untuk membuat paragraf
<!-- -->untuk membuat komentar

Apa itu Elemen?

Elemen adalah semua isi yang berada di dalam tag, diantara tag pembuka dan tag penutup. Termasuk tag itu sendiri dan juga terkadang ditambahkan beberapa atribut di dalamnya.

Contoh:

<p align="left"> Pengertian Tag, Elemen, dan Atribut pada HTML</p>

Dari contoh diatas, terdapat satu elemen <p> dengan atribut align="left" dan memiliki isi berupa teks, yakni Pengertian Tag, Elemen, dan Atribut pada HTML. Elemen tidak hanya berisi teks, terkadang juga akan berisi teks lain. Hal ini Biasa disebut dengan nested element atau elemen di dalam elemen.

Apa itu Atribut?

Atribut adalah informasi tambahan yang berada di dalam tag pembuka, yang nantinya informasi tambahan tersebutlah yang akan menentukan perilaku dari elemen. Informasi tersebut bisa berupa intruksi untuk warna dari text, besar huruf dari text dan lainnya. Dalam penulisannya, atribut memiliki dua pasangan, yakni nama dan nilai (value) yang ditulis dengan name="value". Penulisan value pada atribut HTML harus diapit oleh tanda kutip, bisa menggunakan tanda kutip satu  atau dua.

Contoh penulisan atribut dalam HTML:

<a href="https://www.offaweb.com">ini adalah link</a>

Pada contoh diatas, href="https://www.offaweb.com adalah atribut. href merupakan nama dari atribut, dan https://www.offaweb.com merupakan value atau nilai dari atribut tersebut.

Jumlah atribut yang ditulis dalam sebuah elemen juga bisa lebih dari satu.

Contoh:

<img src="contoh.jpg" width="50" height="100" />

Dari contoh diatas, atribut src berfungsi untuk menentukan gambar yang akan ditampilkan. Sedangkan untuk atribut width dan height adalah atriubut yang mengatur ukurnnya.

Jenis-jenis atribut HTML

Setiap elemen terkadang memiliki atribut khusus yang hanya bisa digunakan hanya pada elemen tersebut. Ada juga atribut yang bisa ditambahkan kedalam setiap elemen meskipun atribut tersebut tidak memiliki peranan penting terhadap beberapa elemen.

Berikut adalah jenis-jenis atribut html yang perlu kalian ketahui:

1. Atribut Global

Atribut global merupakan atribut yang bisa ditambahkan pada semua elemen HTML, meskipun atribut tersebut tidak memiliki peranan terhadap beberapa elemen.

Berikut list macam-macam atribut global dan fungsinya:

Nama AtributDeskripsi atau fungsi
AcceskeyMenentukan shortcut key pada keyboard untuk mengaktifkan elemen atau fokus pada elemen
ClassUntuk menentukan nama class pada sebuah elemen. Dalam penggunaannya boleh lebih dari satu class dalam satu elemen
ContenteditableUntuk menentukan sebuah elemen HTML apakah dapat diedit secara langsung atau tidak
ContextmenuAtribut yang digunakan untuk memberikan menu konteks pada sebuah elemen ketika ada interaksi dari user, contohnya seperti mengklik kanan dengan mouse
data-*Atribut yang digunakan untuk menyisipkan nama atribut yang dapat kita tentukan setelah kata "data-"
draggableUntuk menentukan apakah sebuah elemen dapat di drag (diseret atau dipindahkan) atau tidak
dropzoneUntuk menentukan jenis konten apa yang dapat di-drop pada sebuah elemen
hiddenUntuk menyembunyikan sebuah elemen
idMerupakan atribut yang unik karena dalam sebuah dokumen HTML hanya terdapat satu nama id dan tidak boleh lebih dari satu nama id yang sama
langUntuk menentukan bahasa apa yang akan digunakan pada sebuah konten di dalam elemen
spellcheckUntuk menentukan apakah sebuah teks harus dicek kebenaran atas ejaan dan tata bahasanya atau tidak
styleatribut HTML yang digunakan untuk menyisipkan style (CSS) khusus untuk elemen itu sendiri, juga dinamakan dengan inline style
tabindexUntuk menentukan urutan penggunaan pada sebuah keyboard dalam mengakses sebuah elemen
titleDigunakan sebagai judul informasi tambahan pada sebuah elemen
translateUntuk menentukan apakah sebuah konten dari elemen harus diterjemahkan atau tidak

2. Atribut Event

Atribut event adalah atribut di dalam HTML yang berisi perintah untuk menjalankan script (JavaScript). Atribut ini jelas akan banyak digunakan pada pemrograman JavaScript yang tentunya harus kalian pelajari terlebih dahulu.

Berikut daftar macam-macam atribut event:

Nama AtributDeskripsi atau fungsi
onafterprintIntruksi untuk menjalankan script saat dokumen selesai dicetak
onbeforeprintIntruksi untuk menjalankan script sebelum dokumen dicetak
onabortIntruksi untuk menjalankan script ketika sumber (media atau file) digagalkan ketika loading
onbeforeunloadIntruksi untuk menjalankan script ketika sebuah halaman web hendak ditutup
onblurUntuk menginstruksikan sebuah peristiwa dimana sebuah elemen kehilangan fokus
oncanplayIntruksi untuk menjalankan script ketika sebuah file atau media dapat dimainkan
oncanplaythrough  Intruksi untuk menjalankan script ketika sebuah file atau media dapat dimainkan dari awal hingga akhir tanpa jeda untuk buffering
onchangeUntuk menginstruksikan sebuah peristiwa ketika value atau bisa juga konten dari sebuah elemen
onclickUntuk menjalankan script ketika sebuah elemen diklik
oncontextmenuUntuk menjalankan script ketika sebuah konteks menu dipicu
oncopyIntruksi untuk menjalankan script ketika pengguna menyalin atau mengcopy konten sebuah elemen
oncuechangeIntruksi untuk menjalankan script ketika cue berubah pada elemen
oncutIntruksi untuk menjalankan script ketika pengguna memotong konten sebuah elemen
ondblclickIntruksi untuk menjalankan script ketika pengguna mengklik dua kali pada sebuah elemen
ondragIntruksi untuk menjalankan script ketika elemen dipindahkan atau diseret
ondragendIntruksi untuk menjalankan script pada saat akhir melakukan tindakan drag pada sebuah elemen
ondragenterIntruksi untuk menjalankan script ketika sebuah elemen memasuki target drop elemen yang valid
ondragleaveIntruksi untuk menjalankan script ketika sebuah elemen meninggalkan target drop elemen yang valid
ondragoverIntruksi untuk menjalankan script ketika sebuah elemen berada pada target drop elemen yang valid
ondragstartIntruksi untuk menjalankan script ketika memulai tindakan untuk menyeret atau memindahkan sebuah elemen
ondropIntruksi untuk menjalankan script ketika elemen yang di-drag telah di-drop
ondurationchange Intruksi untuk menjalankan script ketika durasi sebuah media berubah
onemptiedIntruksi untuk menjalankan script ketika kosong
onendedIntruksi untuk menjalankan script ketika sebuah media telah berakhir
onerrorIntruksi untuk menjalankan script ketika error terjadi

Selain dari daftar diatas, masih banyak lagi atribut event yang lainnya. Kalian bisa melihat daftar atribut event yang lebih lengkap di HTML Event Attributes.

3. Atribut Khusus

Atribut khusus adalah atribut yang hanya bisa digunakan pada elemen tertentu dan terkadang atribut ini tidak dapat digunakan pada elemen yang lain.

Contoh atribut khusus:

Nama Atribut          Bisa dipakai di tag
src<audio>,<img>,<iframe> dan lainnya
href<a>, <link>
action<form>
autoplay<audio>, <video>

Setelah kalian tahu tentang Tag, Elemen, dan Atribut HTML, Selanjutnya kita akan berkenalan dengan elemen-elemen dasar pada HTML seperti heading, paragraf, list, link, tabel, dan lain-lain.

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel