Istilah-Istilah Dasar dalam HTML Element

Ketika belajar HTML, kita akan bertemu banyak istilah seperti tag, element, attribute, class, id, dan lainnya. Memahami istilah-istilah dasar ini sangat penting agar kita bisa menulis kode yang rapi, terstruktur, dan mudah dikembangkan. Berikut penjelasan lengkapnya.

1. Tag

Tag adalah kode dasar yang digunakan untuk membuat struktur HTML. Tag ditulis menggunakan tanda kurung sudut seperti <p>, <div>, atau <h1>.

<p>Ini adalah paragraf.</p>

Setiap tag biasanya memiliki opening tag dan closing tag.

2. Element

Element adalah keseluruhan struktur yang terdiri dari tag pembuka, isi, dan tag penutup.

<h1>Judul Halaman</h1>

Jadi, tag itu bagian pembukusnya, sementara element mencakup keseluruhannya.

3. Attribute

Attribute adalah informasi tambahan yang kita masukkan ke dalam tag untuk memberikan properti tertentu. Contoh attribute:

• class
• id
• src
• href
• alt

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

4. Class

Class adalah attribute yang digunakan untuk memberi nama kelompok pada elemen. Class sering digunakan dalam CSS untuk memberikan styling pada beberapa elemen sekaligus.

<div class="wrapper">Konten</div>

Dalam CSS, class ditulis dengan tanda titik:

.wrapper {
  background: #eee;
}

5. ID

ID adalah attribute yang memberi nama unik pada satu elemen HTML. ID hanya boleh dipakai satu kali dalam satu halaman.

<div id="header">Bagian Header</div>

Dalam CSS, ID ditulis dengan tanda pagar:

#header {
  background: #ccc;
}

6. Selector

Selector adalah bagian dari kode CSS yang digunakan untuk memilih elemen mana yang ingin diberikan gaya. Macam-macam selector:

• Tag selector – memilih berdasarkan nama tag p { color: red; }
• Class selector – memakai titik .box { padding: 20px; }
• ID selector – memakai tanda pagar #menu { background: blue; }
• Universal selector – memilih semua elemen * { margin: 0; }

7. Semantic Elements

Semantic elements adalah elemen HTML yang memiliki makna spesifik sehingga mudah dipahami browser dan mesin pencari. Contoh semantic elements:

• <header> – bagian atas halaman
• <nav> – menu navigasi
• <main> – konten utama halaman
• <section> – bagian/topik tertentu
• <article> – konten mandiri
• <aside> – sidebar atau informasi tambahan
• <footer> – bagian bawah halaman

8. Non-Semantic Elements

Elemen yang tidak memiliki makna khusus selain sebagai pembungkus, seperti:

• <div> – block-level wrapper
• <span> – inline wrapper

Penutup

Memahami istilah-istilah dasar di atas akan memudahkan Anda menulis kode HTML yang bersih, rapi, dan profesional. Dengan menguasai tag, element, attribute, class, id, dan semantic elements, Anda jauh lebih siap untuk membangun struktur website yang kuat dan mudah dikembangkan.