Ada tiga bagian penting yang harus anda pelajari di dalam HTML, yaitu Tag, Elemen, dan Atribut. Pada artikel ini, saya akan membahas penggunaan Tag, Elemen, dan Atribut di HTML dimulai dari pengertian, cara penulisan, contoh kode, hingga jenis jenisnya.
Pengertian Tag dalam HTML
Tag adalah sebuah penanda atau text khusus yang digunakan untuk memberitahu web browser apakah text tersebut berupa list, paragraf atau link. Setiap tag mempunyai fungsinya masing-masing. Berikut ini daftar tag-tag dasar dalam HTML beserta fungsinya.
Tag | Fungsi |
<!DOCTYPE html> | untuk deklarasi type dokumen |
<html> | Tag utama untuk memulai dokumen HTML |
<head> | Membuat bagian head/kepala dari dokumen; |
<body> | Untuk membuat bagian body dari dokumen. |
<title> | untuk judul web |
<h1> sampai <h6> | Membuat heading pada artikel |
<p> | Untuk membuat paragraf |
<!– –> | Untuk membuat komentar |
Cara Menulis Tag HTML
Berikut ini cara penulisan Tag Di dalam HTML,
- Tag dibuat dengan berpasangan (tag awalan dan tag penutup).
- Tag penutup ditulis dengan menambahkan garis miring (/) di depan nama tag. Namun, ada juga tag yang tidak memiliki pasangan penutup.
- Penulisan tag berada di antara dua kurung siku: “<” “>”, yang mana di dalamnya berisi nama tag atau kadang ditambahkan dengan atribut.
- Menggunakan Huruf Kecil, tapi Khusus untuk tag <!DOCTYPE html> ditulis dengan huruf besar. Menggunakan DOCTYPE dengan huruf kecil akan mengakibatkan error jika untuk dokumen XHTML.
Pengertian Elemen dalam HTML
Elemen atau kadang disebut juga sebagai node merupakan komponen penyusun dokumen HTML. Ada banyak jenis Elemen di HTML, seperti elemen khusus untuk teks, elemen untuk multimedia, script, tabel dll. Kadang beberapa elemen HTML juga ditambahkan atribut sebagai pelengkap dan dibentuk dari tag pembuka, isi tag, dan tag penutup.
Pada gambar di atas, bisa dikatakan bahwa elemen adalah semua kode yang dimulai dari tag pembuka hingga tag penutup. Pada kode ini ada satu elemen <p> dengan atribut align=”center” dan memiliki isi berupa teks, yakni selamat datang
Pada diagram dibawah, terdapat tiga macam node.. yakni: Node elemen, Node atribut, dan Node teks.
Jenis-jenis Elemen HTML
Jenis-jenis Elemen HTML terbagi menjadi 3 kategori yaitu :
- Berdasarkan Tampilannya
- Cara Penulisannya
- Nested Element
Jenis Elemen Berdasarkan Tampilannya
Berdasarkan dari tampilannya, terdapat 2 jenis elemen yaitu block-level elemen dan inline.
1. Block-level Elemen
Block-level merupakan jenis elemen yang tampilannya selalu dimulai dari baris baru. Secara default, elemen ini tidak akan berada disamping elemen sebelumnya tapi akan berada di bawah elemen sebelumnya.
Contoh :
<!DOCTYPE html>
Ini adalah Block-level Elemen.
<h1>elemen satu.</h1>
<p>elemen dua.</p>
</html>
Tampilan di browser:
2. Inline Elemen
Inline elemen artinya elemen sebaris. Elemen ini tidak dimulai dengan baris baru tetapi akan melanjutkan disamping elemen lain yang juga inline elemen. Contohnya adalah elemen <b> dan <i>.
Contoh :
<!DOCTYPE html>
Ini adalah Inline Elemen.
<b>elemen satu.</b>
<a>elemen dua.</a>
</html>
Tampilan di browser:
Keterangan :
Elemen <b> adalah jenis inline elemen. Jadi akan ditampilkan disamping “teks biasa”. Begitu juga elemen <i> karena juga inline elemen maka juga ditampilkan disamping <b>.
Jenis Elemen HTML Berdasarkan Cara Penulisannya
Berdasarkan dari cara penulisannya, elemen ini terbagi menjadi 2 jenis elemen yaitu elemen normal dan elemen tunggal atau elemen kosong.
1. Elemen Normal
Cara penulisan untuk elemen normal adalah dimulai dari tag pembuka dan diakhiri dengan tag penutup.
Contoh:
<b>Ini adalah Elemen Normal</b>
Keterangan :
elemen dimulai dari tag pembuka yaitu <b> dan diakhiri dengan tag penutup </b> dimana isi tag nya adalah “ Ini adalah Elemen Normal “.
2. Elemen Tunggal atau Elemen Kosong
Elemen kosong/tunggal atau yang biasa disebut dengan void element yaitu jenis elemen yang tidak ada tag penutup. Sebagai gantinya, ditambahkan slash pada akhir tag pembuka.
Contoh:
<img src="/wp-content/themes/itk/img/header.png" />
Keterangan :
tag img dengan atribut src untuk menentukan letak file gambarnya. lalu ditambahkan tanda slash / setelahnya.
Elemen Bersarang atau Nested Element
Selain berupa teks, terkadang Elemen juga akan berisi elemen lain atau yang disebut nested element atau elemen di dalam elemen.
<nama_tag_1>
<nama_tag_2>isi</nama_tag_2>
</nama_tag_1>
Pengertian Atribut dalam HTML
Setelah kita mempelajari Tag dan Elemen di HTML, maka pada pembahasan yang terakhir adalah atribut. Atribut atau disebut sebagai modifier merupakan kata khusus diberikan untuk elemen dan dituliskan di dalam tag pembuka. Atribut dapat ditambahkan pada elemen apapun. Cara penulisannya adalah nama_atribut=”nilai_atribut”.
Contoh:
<a href=" https://praktekotodidak.com"> praktekotodidak.com</a>
Keterangan :
Tag <a> adalah tag untuk membuat link dan harus menambahkan atribut href untuk menyatakan halaman tujuan dari link.
Jumlah atribut yang digunakan pada elemen bisa lebih dari satu.
Contoh:
<img src="gambar.jpg" width="100" height="100" />
Keterangan :
Atribut src merupakan atribut khusus untuk tag <img> yang berfungsi untuk menentukan gambar yang akan ditampilkan.
atribut width dan height adalah atribut yang berfungsi untuk mengatur ukurannya.
Jenis-jenis Atribut HTML
Ada 3 jenis atribut pada HTML yaitu atribut global dan atribut event, dan atribut khusus. Berikut ini jenis-jenis atribut yang harus diketahui:
Atribut Global
Atribut Global adalah atribut yang dapat ditambahkan pada semua elemen HTML. Berikut ini daftar atribut global di HTML beserta fungsinya:
Nama Atribut | Deskripsi atau fungsi |
accesskey | Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen |
class | Menentukan class CSS yang akan digunakan |
contenteditable | Menentukan isi elemen bisa diedit atau tidak |
data-* | Digunakan untuk menyimpan data |
dir | Menentukan arah teks dari elemen (kiri ke kanan atau sebaliknya) |
draggable | Menentukan apakah elemen bisa di drag atau tidak |
hidden | untuk menyembunyikan elemen |
id | Menentukan id unik untuk elemen |
lang | Menentukan bahasa yang digunakan untuk isi elemen |
spellcheck | Menentukan apakah isi elemen harus dilakukan pengejaan grammer atau tudak |
style | Menentukan inline CSS untuk elemen |
tabindex | Menentukan urutan atau indeks tab dari elemen (saat tombol tab ditekan) |
title | Menentukan informasi tambahan tentang elemen |
translate | Menentukan apakah konten dari elemen bisa diterjemahkan atau tidak |
Atribut Event
Atribut event berfungsi untuk menentukan aksi yang dilakukan saat terjadi sesuatu pada elemen. Dalam penggunaanya banyak digunakan pada pemrograman Javascript. Berikut ini 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 |
onbeforeunload | kode javascript | sebelum saat dokumen tidak ter-load |
onerror | kode javascript | saat terjadi error |
onhashchange | kode javascript | saat terjadi 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 |
onpagehide | kode javascript | saat user tidak sedang membuka halaman web |
onpageshow | kode javascript | saat user membuka kembali halaman web |
onpopstate | kode javascript | saat history browser berubah |
onresize | kode javascript | saat ukuran jendela browser berubah |
onstorage | kode javascript | saat area penyimpanan (Web Storage) di-update |
onunload | kode javascript | saat web browser ditutup |
Masih ada banyak lagi atribut event selain pada table diatas. Anda dapat mengunjungi link ini untuk mengetahui atribut event yang lainnya : HTML Event Attributes
Atribut Khusus
Atribut khusus adalah atribut yang hanya bisa digunakan pada elemen tertentu. Terkadang atribut ini juga tidak bisa digunakan pada elemen lain.
Contoh:
Nama atribut | Bisa digunakan di tag |
src | <audio>, <embed>, <iframe>, <img>, dll |
href | <a>, <link> |
action | <form> |
autoplay | <audio>, <video>. |
Cara Menulis Atribut
Penulisan atribut di dalam HTML cukup mudah, kita hanya perlu menambahkannya pada tag pembuka dengan format seperti ini:
nama-atribut="nilai"
Beberapa hal yang harus diperhatikan dalam menulis atribut adalah :
Menggunakan huruf kecil
walaupun menulis atribut dengan huruf besar tetap valid tapi lebih umum pada penulisannya menggunakan huruf kecil . Contoh :
<p align="center">Belajar HTML di Praktek Otodidak</p>
Menggunakan Tanda Petik
Tanda petik digunakan untuk mengisi nilai atribut yang mengandung teks, jika terdapat lebih dari satu kata maka ia akan menciptakan spasi dan akan dianggap sebagai atribut baru.
Untuk yang nilainya berupa angka, boleh tidak menggunakan tanda petik, sedangkan untuk atribut yang bernilai boolean (true dan false).. nilainya boleh tidak ditulis.
Contoh :
<img src="gambar.jpg" width=80 height=60 /> // nilai atribut berupa angka
<input type="text" required="true" /> // nilai atribut bernilai boolean
Penggunaan Spasi
Spasi berfungsi untuk memisahkan dua atau lebih atribut, namun jika terdapat atribut yang memiliki lebih dari satu nama, maka ia ditulis bukan dengan spasi, tapi dengan tanda min (-).
contoh :
<img class="lazyload" data-src="gambar.jpg" src="placeholder.jpg" />
Begitulah pembahasan tentang Tag, Elemen, dan Atribut di HTML. Baca juga artikel selanjutnya yaitu : Belajar HTML#3 Membuat Paragraf di HTML