Memahami Struktur Dasar HTML: Elemen, Tag, dan Atribut

Kalau kamu baru mulai belajar HTML, pasti sering dengar istilah elemen, tag, dan atribut. Tiga hal ini adalah dasar dari HTML dan wajib kamu pahami sebelum melangkah lebih jauh. Yuk, kita bahas satu per satu dengan contoh yang mudah dimengerti!

Apa Itu Elemen HTML?

Elemen HTML adalah bagian dari sebuah halaman web, bisa berupa teks, gambar, tombol, atau bahkan sebuah video. Elemen ini biasanya terdiri dari tag pembuka, isi, dan tag penutup.

Contohnya seperti ini:

<p>Halo, ini adalah elemen paragraf!</p>

Di sini:

• <p> adalah tag pembuka
• Halo, ini adalah elemen paragraf! adalah isi elemen
• </p> adalah tag penutup

Tidak semua elemen punya tag penutup. Ada juga elemen kosong yang hanya punya satu tag, misalnya elemen gambar:

<img src="gambar.jpg" alt="Deskripsi gambar">

Mengenal Tag HTML

Tag adalah bagian dari elemen HTML yang ditulis di dalam tanda < >. HTML punya banyak jenis tag dengan fungsi yang berbeda-beda.

Beberapa tag dasar yang sering digunakan:

• <h1> - <h6> → Untuk judul
• <p> → Untuk paragraf
• <a> → Untuk link
• <img> → Untuk gambar
• <ul> dan <li> → Untuk daftar

Contoh penggunaan tag:

<h1>Judul Artikel</h1>
<p>Ini adalah contoh paragraf.</p>
<a href="https://google.com">Klik di sini</a>

Apa Itu Atribut HTML?

Atribut adalah informasi tambahan yang diberikan ke tag untuk mengubah perilaku atau tampilannya. Atribut selalu ditulis di dalam tag pembuka.

Contoh atribut:

• href pada <a> untuk menentukan link
• src pada <img> untuk menentukan sumber gambar
• alt pada <img> untuk menambahkan teks alternatif jika gambar gagal dimuat
• style untuk menambahkan CSS langsung di HTML

Contoh kode dengan atribut:

<a href="https://example.com" target="_blank">Kunjungi website</a>
<img src="foto.jpg" alt="Foto pemandangan" width="300">

Di sini:

• href="https://example.com" → Link tujuan
• target="_blank" → Membuka link di tab baru
• src="foto.jpg" → Lokasi gambar
• alt="Foto pemandangan" → Teks alternatif
• width="300" → Lebar gambar dalam piksel

Kesimpulan

HTML terdiri dari elemen, tag, dan atribut yang membentuk struktur dasar sebuah halaman web. Elemen adalah bagian dari halaman web, tag digunakan untuk menandai jenis elemen, dan atribut memberikan informasi tambahan pada tag. Beberapa tag dasar yang sering digunakan adalah <p> untuk paragraf, <h1> hingga <h6> untuk judul, <a> untuk link, dan <img> untuk gambar.