Dalam HTML, terdapat elementag, dan atribut yang berfungsi untuk menampilkan berbagai jenis konten pada halaman web.
ketiganya saling berhubungan dalam membentuk struktur halaman web.

Ayo kita bahas satu per satu.

Apa itu Elemen dalam HTML?

Elemen HTML adalah bagian dari dokumen HTML yang terdiri dari tag pembukakonten, dan tag penutup.

Elemen-elemen ini lah yang membentuk struktur dan tampilan halaman web.

Perhatikan ilustrasi berikut

Pada contoh diatas, terdapat satu elemen <a> yang memiliki atribut href dengan nilai "https://www.babacoding", dan memiliki konten berupa teks "Klik di sini".

Nah itu lah yang disebut elemen.

Elemen tidak selalu berisi teks, bisa gambar, video, bahkan bisa berisi elemen lainnya.

Contoh lain yang lebih sederhana

<p>Ini adalah elemen paragraf.</p>

Elemen <p> terdiri dari

Tag pembuka<p>

Konten : “Ini adalah elemen paragraf”

Tag penutup</p>

Apa itu Tag dalam HTML?

Tag dalam HTML adalah kode yang digunakan untuk memberi instruksi pada browser mengenai bagaimana suatu elemen harus ditampilkan.

Tag dituliskan di dalam tanda kurung sudut (<...>).

Tag dapat berupa

  1. Tag berpasangan : Memiliki tag pembuka dan tag penutup, misalnya <h1>Judul</h1>.
  2. Tag tunggal (self-closing tag) : Tidak memiliki tag penutup, misalnya <br> atau <img>.

Ada sangat banyak tag yang disediakan oleh HTML.

Apa harus hafal dengan semua tag HTML? tentu tidak ya. cukup yang sering digunakan saja.

Berikut ini adalah beberapa tag HTML yang sering digunakan:

Tag HTMLDeskripsi
<!DOCTYPE html>Menentukan tipe dokumen HTML.
<html>Elemen utama yang menampung semua konten halaman.
<head>Bagian kepala dokumen yang berisi metadata.
<title>Menentukan judul halaman web yang tampil di tab browser.
<body>Bagian isi utama halaman web.
<h1> – <h6>Membuat heading atau judul dengan ukuran berbeda, dari terbesar (<h1>) hingga terkecil (<h6>).
<p>Membuat paragraf teks.
<b>Membuat teks tebal (bold).
<i>Membuat teks miring (italic).
<u>Membuat teks bergaris bawah (underline).
<br>Membuat baris baru tanpa harus memulai paragraf baru.
<hr>Membuat garis horizontal sebagai pemisah konten.
<a>Membuat hyperlink ke halaman lain atau sumber eksternal.
<img>Menampilkan gambar.
<ol>Membuat daftar bernomor (ordered list).
<ul>Membuat daftar dengan tanda bullet (unordered list).
<li>Elemen daftar yang digunakan dalam <ol> atau <ul>.
<table>Membuat tabel untuk menyajikan data dalam bentuk baris dan kolom.
<tr>Mendefinisikan baris dalam tabel.
<th>Membuat header dalam tabel.
<td>Membuat sel data dalam tabel.

Apa itu Atribut dalam HTML?

Atribut HTML adalah informasi tambahan yang diberikan pada sebuah tag untuk memberikan properti atau perilaku tertentu.

Atribut ditulis dalam tag pembuka dan biasanya ditulis berpasangan antara nama atribut dengan nilai atributnya.

<tag atribut="nilai">Konten</tag>

Contoh :

<a href="https://www.babacoding.com">Klik di sini</a>

Pada contoh di atas

  • href adalah atribut
  • https://www.babacoding.com adalah nilai dari atribut tersebut

Tag bisa memiliki atribut, tapi juga bisa tidak. Artinya tag bisa berdiri sendiri tanpa memiliki atribut sekalipun.

Jenis-Jenis Atribut

Tiap elemen kadang memiliki atribut khusus yang hanya bisa digunakan pada elemen tersebut. Ada juga atribut yang bersifat global dan bisa ditambahkan ke semua elemen.

Berikut ini jenis-jenis atribut yang harus diketahui :

1. Atribut Global

Atribut global dapat digunakan pada hampir semua elemen HTML.

AtributDeskripsi
idMemberikan identitas unik pada elemen
classMenentukan satu atau lebih kelas untuk elemen
styleMenambahkan gaya CSS langsung pada elemen
titleMemberikan informasi tambahan yang muncul sebagai tooltip
hiddenMenyembunyikan elemen dari tampilan
langMenentukan bahasa konten dalam elemen
dirMenentukan arah teks dalam elemen (ltrrtl)

2. Atribut Khusus

Beberapa atribut hanya berlaku untuk elemen tertentu dalam HTML.

Atribut pada Elemen <a> (Tautan)

AtributDeskripsi
hrefMenentukan URL tujuan tautan
targetMenentukan bagaimana tautan dibuka (_blank_self_parent_top)
relMenentukan hubungan antara dokumen dan tautan

Atribut pada Elemen <img> (Gambar)

AtributDeskripsi
srcMenentukan sumber gambar
altMenyediakan teks alternatif jika gambar tidak dapat dimuat
width dan heightMenentukan ukuran gambar

Atribut pada Elemen <input> (Formulir)

AtributDeskripsi
typeMenentukan jenis input (textpasswordemail, dll.)
valueMenentukan nilai awal input
placeholderMenampilkan teks isian contoh dalam input
disabledMenonaktifkan input

Atribut pada Elemen <form>

AtributDeskripsi
actionMenentukan URL tujuan saat formulir dikirim
methodMenentukan metode pengiriman data (GET atau POST)
enctypeMenentukan jenis encoding data formulir

3. Atribut Event

Atribut event digunakan untuk menangani interaksi pengguna dalam JavaScript.

AtributDeskripsi
onclickMenjalankan JavaScript saat elemen diklik
onmouseoverMenjalankan JavaScript saat mouse berada di atas elemen
onkeydownMenjalankan JavaScript saat tombol keyboard ditekan
onchangeDijalankan saat nilai input berubah
onsubmitDijalankan saat formulir dikirim

Atribut HTML sangat penting untuk memperkaya fungsi dan tampilan elemen dalam halaman web.

Untuk penjelasan lebih lengkap tentang cara penggunaan tag dan atribut HTML akan kita bahas nanti pada seri tutorial terpisah.

Sekarang sudah paham dengan elemen, tag, dan atribut?
Jika sudah paham kita akan masuk ke tutorial berikutnya yaa..