Mengenal Element, Tag dan Atribut dalam HTML
Tag, elemen dan atribut adalah hal yang penting untuk dipahami dalam belajar HTML.
Ketiga komponen ini memiliki arti dan kegunaan masing-masing.
Dalam tutorial ini kamu akan belajar mengenal dan cara penulisan tag, element dan atribut yang benar dalam HTML.
Tag HTML
Tag HTML merupakan penanda yang terletak di awal dan di akhir sebuah element.
Penggunaan Tag memiliki tujuan tertentu. Misal untuk membuat link kita bisa menggunakan tag <a> .. </a>
.
Untuk membuat judul pada halaman HTML (Heading) kita bisa menggunakan tag <h1> .. </h1>
.
Membuat paragraf kita bisa menggunakan tag <p> .. </p>
.
dan masih banyak lagi tag yang tersedia pada HTML yang akan kamu pelajari dalam tutorial selanjutnya di seri tutorial HTML dasar ini.
Cara Penulisan Tag HTML
Apa Itu Elemen HTML?
Elemen HTML adalah unit dasar dalam struktur halaman web. Elemen ini biasanya terdiri dari tag pembuka, konten, dan tag penutup. Sebagai contoh, tag <p>
digunakan untuk membungkus paragraf dalam halaman HTML.
Secara umum, elemen HTML dapat dikelompokkan menjadi dua bagian utama: konten (yang dapat berupa teks atau elemen lain) dan atribut (yang memberikan informasi tambahan tentang elemen tersebut).
Struktur Elemen HTML
Setiap elemen HTML memiliki struktur dasar yang mencakup tag pembuka, konten, dan tag penutup. Berikut adalah struktur umum elemen HTML:
<tag_pembuka>konten</tag_penutup>
Misalnya, pada elemen paragraf:
<p>Ini adalah sebuah paragraf</p>
Dalam contoh di atas, <p>
adalah tag pembuka, dan </p>
adalah tag penutup. Konten yang ada di antara kedua tag ini adalah teks yang akan ditampilkan di halaman web.
Atribut dalam HTML
Atribut adalah bagian dari elemen HTML yang memberikan informasi lebih lanjut tentang elemen tersebut. Atribut ditempatkan di dalam tag pembuka dan biasanya terdiri dari pasangan nama dan nilai.
Atribut digunakan untuk mengubah perilaku elemen, seperti memberi ID atau kelas pada elemen untuk styling, menautkan file eksternal, atau menentukan sumber gambar.
Contoh Atribut pada Elemen HTML
Berikut adalah beberapa contoh penggunaan atribut dalam elemen HTML:
1. Atribut href
pada Elemen <a>
Atribut href
digunakan untuk menentukan tujuan tautan (link). Berikut adalah contohnya:
<a href="https://www.codingan.id">Kunjungi Codingan.id</a>
Pada contoh ini, href
menentukan URL tujuan yang akan diakses ketika pengguna mengklik tautan.
2. Atribut src
pada Elemen <img>
Atribut src
digunakan untuk menentukan sumber gambar. Berikut adalah contohnya:
<img src="gambar.jpg" alt="Deskripsi Gambar">
Atribut src
menunjukkan lokasi gambar, sementara alt
memberikan deskripsi alternatif jika gambar gagal dimuat.
3. Atribut class
pada Elemen HTML
Atribut class
digunakan untuk memberi nama kelas pada elemen yang dapat digunakan dalam CSS untuk styling. Berikut adalah contoh penggunaannya:
<p class="highlight">Teks ini diberi gaya dengan class</p>
Atribut class
ini membantu dalam memilih elemen tertentu untuk styling dengan menggunakan CSS.
Penutupan
Elemen HTML, tag, dan atribut adalah bagian yang tak terpisahkan dalam membangun halaman web yang efektif. Memahami cara kerja elemen, serta cara menggunakan atribut yang tepat, sangat penting untuk pengembangan web yang baik dan optimal.
Dengan terus belajar dan berlatih, Anda akan dapat membuat halaman web yang lebih dinamis, interaktif, dan mudah dikelola menggunakan HTML.