Selamat datang di artikel ketiga seri Belajar HTML! Setelah menyiapkan “senjata” kita yaitu text editor, kini saatnya untuk menyelami inti dari HTML itu sendiri. Fondasi dari setiap halaman web yang Anda lihat dibangun di atas tiga pilar utama: Tag, Element, dan Atribut.
Memahami perbedaan dan cara kerja ketiganya adalah kunci absolut untuk bisa menulis HTML dengan benar. Mari kita bedah satu per satu.
Analogi Sederhana
Bayangkan Anda sedang membuat sebuah kalimat.
- Element adalah keseluruhan kalimat itu sendiri, lengkap dari awal hingga akhir.
- Tag adalah seperti tanda kutip (
" ... ") yang menandai di mana sebuah ucapan langsung dimulai dan diakhiri. - Atribut adalah seperti kata sifat yang memberikan informasi tambahan tentang kata benda di dalam kalimat itu. Misalnya, bukan hanya “mobil”, tapi “mobil merah“.
Sekarang, mari kita terapkan analogi ini ke dalam dunia HTML.
1. Tag: Penanda Struktur 🏷️
Tag adalah perintah atau penanda khusus dalam HTML yang memberitahu browser bagaimana suatu konten harus ditampilkan. Tag hampir selalu datang berpasangan dan ditulis di dalam kurung sudut (< dan >).
Ada dua jenis tag utama:
- Tag Pembuka (Opening Tag): Menandai awal dari sebuah konten. Contoh:
<p>,<h1>,<div>. - Tag Penutup (Closing Tag): Menandai akhir dari sebuah konten. Bentuknya sama seperti tag pembuka, namun ditambahkan garis miring (
/) setelah kurung sudut pertama. Contoh:</p>,</h1>,</div>.
Contoh:
<p>Ini adalah sebuah paragraf.</p>
<p> adalah tag pembuka dan </p> adalah tag penutup.
Catatan: Ada juga beberapa tag yang tidak memiliki pasangan penutup karena mereka tidak “membungkus” konten. Ini disebut empty tags atau tag tunggal, contohnya
<img>untuk gambar dan<br>untuk pindah baris.
2. Element: Unit Lengkap 🧱
Element adalah unit utuh yang terdiri dari tag pembuka, konten, dan tag penutup. Jadi, jika tag adalah penandanya, maka elemen adalah keseluruhan bagian tersebut.
Strukturnya adalah:
Tag Pembuka + Konten + Tag Penutup = Element
Contoh:
Dalam kode <h1>Selamat Datang di Website Saya</h1>:
- Tag Pembuka:
<h1> - Konten:
Selamat Datang di Website Saya - Tag Penutup:
</h1> - Keseluruhan baris kode tersebut adalah sebuah Elemen heading (h1).
Hampir semua yang Anda tulis di dalam <body> HTML adalah serangkaian elemen yang tersusun rapi.
3. Atribut: Informasi Tambahan 📝
Atribut (Attribute) adalah informasi tambahan yang disisipkan ke dalam tag pembuka untuk memberikan karakteristik atau fungsi lebih pada sebuah elemen. Atribut membantu mendefinisikan perilaku elemen yang tidak bisa dilakukan oleh tag itu sendiri.
Struktur atribut selalu berupa pasangan nama=”nilai” (name="value").
Contoh paling umum adalah pada link:
<a href="https://www.google.com">Klik untuk pergi ke Google</a>
Pada contoh di atas:
- Elemennya adalah elemen
<a>(anchor/link). - Tag pembukanya adalah
<a href="https://www.google.com">. - Atributnya adalah
href.- Nama atribut:
href(singkatan dari hypertext reference), yang memberitahu browser ke mana link tersebut akan mengarah. - Nilai atribut:
"https://www.google.com", yaitu alamat URL tujuannya.
- Nama atribut:
Contoh lain pada gambar:
<img src="gambar-kucing.jpg" alt="Seekor kucing lucu berwarna oranye">
Pada elemen <img> ini, kita melihat dua atribut:
src: Menentukan sumber (source) atau lokasi file gambar yang akan ditampilkan.alt: Menyediakan teks alternatif yang akan muncul jika gambar gagal dimuat, dan sangat penting untuk aksesibilitas (dibacakan oleh screen reader).
Kesimpulan: Menggabungkan Semuanya
Mari kita simpulkan dalam satu kalimat: Anda menggunakan Tag untuk membuat sebuah Elemen, dan Anda bisa menambahkan Atribut pada tag pembuka untuk memberikan fungsi lebih pada elemen tersebut.
<h1>adalah tag.<h1>Halo!</h1>adalah elemen.<h1 class="judul-utama">Halo!</h1>adalah elemen dengan sebuah atributclass.
Menguasai ketiga komponen ini adalah langkah fundamental. Di artikel selanjutnya, kita akan mulai menyusun semua ini menjadi sebuah struktur halaman HTML yang utuh dan mempelajari beberapa tag paling umum yang akan selalu Anda gunakan. Selamat mencoba!
