Elemen & Atribut di HTML

April 29, 2025

Dalam HTML, kita mengenal elemen (element) dan atribut (attribute). Keduanya adalah bagian inti dari dokumen HTML, dan saling melengkapi.


Apa Itu Elemen HTML?

Elemen HTML adalah bagian paling dasar dari sebuah halaman web. Elemen biasanya terdiri dari:

  • Tag pembuka
  • Konten
  • Tag penutup

Contoh elemen lengkap:

<p>Ini adalah paragraf.</p>

Elemen bisa diartikan sebagai blok bangunan dari halaman web. Segala sesuatu—judul, paragraf, gambar, link, tabel—semuanya dibentuk dari elemen-elemen ini.


Jenis-Jenis Elemen HTML

Elemen HTML dibagi menjadi dua jenis:

1. Non-replaced Elements (atau Normal Elements)

  • Elemen yang punya tag pembuka dan penutup.
  • Di antara kedua tag tersebut ada konten.

Contoh:

<h1>Judul Halaman</h1>
<p>Ini isi paragrafnya</p>

2. Void Elements (atau Replaced Elements)

  • Elemen yang tidak memiliki tag penutup.
  • Biasanya digunakan untuk konten yang berdiri sendiri seperti gambar, garis horizontal, atau break baris.

Contoh:

<img src="gambar.jpg" alt="Deskripsi gambar" />
<br />
<hr />
<input type="text" />

Void elements tidak boleh memiliki konten di antara tag karena memang tidak punya tag penutup.


Struktur Umum Elemen

Struktur dasar sebuah elemen:

<tagname atribut="nilai">konten</tagname>

Contoh:

<a href="https://google.com">Kunjungi Google</a>

Atribut HTML

Atribut HTML adalah informasi tambahan yang disisipkan dalam tag pembuka elemen. Atribut membantu mengatur:

  • Perilaku (misalnya href, type, value)
  • Identitas (misalnya id, class, name)
  • Gaya atau posisi (misalnya style, width, height)
  • Aksesibilitas (misalnya alt, aria-label)

Contoh:

<img src="profil.jpg" alt="Foto Profil" width="200" />

Penjelasan:

  • src → lokasi file gambar
  • alt → teks alternatif jika gambar gagal ditampilkan
  • width → lebar gambar

Aturan Penulisan Atribut

  • Ditulis di dalam tag pembuka
  • Nilainya ditulis di dalam tanda kutip ganda
  • Bisa menambahkan lebih dari satu atribut dalam satu tag

Contoh:

<input type="email" name="email" placeholder="Masukkan email Anda" />

Beberapa Atribut Umum yang Sering Digunakan

AtributKeterangan
hrefUntuk membuat link
srcSumber file (gambar, audio, video)
altDeskripsi alternatif untuk gambar
idIdentitas unik elemen
classKategori elemen, biasanya untuk CSS/JS
styleStyling langsung ke elemen
titleTooltip yang muncul saat hover
targetMengatur cara membuka link (_blank, _self)
typeJenis input (di elemen <input>)

Kesimpulan

  • Elemen HTML adalah blok pembentuk halaman.
  • Terdiri dari tag pembuka, konten, dan tag penutup (kecuali untuk void elements).
  • Atribut digunakan untuk memberikan informasi tambahan atau mengatur perilaku elemen.
  • Pemahaman elemen & atribut adalah pondasi utama sebelum masuk ke styling dan scripting.

Belajar elemen dan atribut HTML itu ibarat belajar mengenal bagian-bagian tubuh sebelum kamu belajar gerakannya. 😄

Designed & build by M. Fandi Arfabuma © 2025