RudihartoSetelah belajar cara membuat heading dan paragraf dengan HTML, selanjutnya pada sesi belajar HTML part 6, kita akan belajar tentang apa itu div, class dan id beserta contohnya pada HTML.
Pengertian Div, Class, dan ID
Dalam HTML, div, class, dan id termasuk dalam atribut yang digunakan untuk membuat struktur dan identifikasi elemen pada halaman web. Untuk lebih jelasnya, berikut kami jelaskan masing-masing atributnya.
Div
Div adalah elemen HTML yang berfungsi sebagai wadah untuk menampung beberapa elemen HTML menjadi satu bagian. Penggunaan div berfungsi untuk memudahkan pengembang atau developer mengatur style CSS atau pemberian atribut lainnya seperti Class, ID, Title, dan lain sebagainya.
Div merupakan singkatan dari “division”, biasanya digunakan untuk mengelompokkan bagian header, sidebar, body, footer, dan lainnya secara terpisah dalam satu tampilan tertentu.
Class
Class adalah atribut HTML yang digunakan sebagai penanda elemen di HTML. Selain itu, class sering digunakan untuk manipulasi style CSS atau javasript.
ID
Id adalah singkatan dari identifier atau identity, yaitu atribut yang mirip seperti class, tetapi memiliki perilaku berbeda.
Dalam jenisnya, id merupakan atribut global pada HTML yang digunakan untuk mengidentifikasi elemen menggunakan CSS atau JavaScript. Setiap elemen hanya boleh memiliki satu id unik diseluruh HTML.
Setelah kita bahas sedikit tentang pengertiannya, selanjutnya mari kita membahas mengenai perbedaan dan cara menggunakan div, class, dan id dalam dokumen HTML.
Tabel Perbedaan div, class, dan id
Untuk memudahkan Anda belajar HTML Atribut tentang div, class dan id, berikut kami sampaikan table perbandingannya.
| Fitur | div | class | id |
|---|---|---|---|
| Fungsi | Container generik | Pengelompokan dalam elemen | Identitas unik |
| Keunikan | Tidak unik | Tidak harus unik, dapat digunakan berkali-kali di dokumen HTML | Harus unik dalam satu halaman |
| Penggunaan dalam CSS | Bisa, biasanya digunakan dengan kombinasi class dan id | Digunakan dengan tanda titik (.) dalam CSS | Digunakan dengan tanda pagar (#) dalam CSS |
| Contoh Penggunaan | Membungkus bagian header, footer, atau konten utama | Mengatur gaya untuk semua paragraf, tombol, atau link | Mengatur gaya untuk elemen navigasi utama |
Cara Menggunaan div, class, dan id
Berikut cara menggunakan div, class, dan id dalam dokumen HTML beserta contohnya agar lebih mudah dipahami.
Contoh skrip HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Div, Class, dan ID</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1 id="judul">Selamat Datang</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="content">
<p>Ini adalah konten utama halaman.</p>
<p>Anda bisa menambahkan konten di sini.</p>
</div>
<div class="footer">
<p>© 2024 Contoh Website</p>
</div>
</body>
</html>Keterangan:
- Struktur HTML terdiri dari Header, Content, dan Footer.
- Penggunaan
div: Setiap bagian utama (header, content, dan footer) menggunakan elemendiv, untuk mengelompokkan elemen-elemen didalamnya. - Penggunaan
class: header dan footer diberikan class sama, sedangkan content diberikan class untuk mengatur padding pada tampilan konten utama
Contoh kode CSS
.header {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
#judul {
color: red;
text-align: center;
background-color: black;
}
.footer {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
.content {
padding: 20px;
}
nav ul {
list-style: none; /* Menghilangkan bullet point pada list */
margin: 0;
padding: 0;
display: flex; /* Mengubah display menjadi flex untuk tata letak horizontal */
justify-content: center; /* Menempatkan item-item secara horizontal di tengah */
}
nav li {
margin: 0 10px; /* Memberikan margin kiri dan kanan pada setiap item */
}
nav a {
text-decoration: none;
color: #333;
padding: 10px 15px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #f0f0f0;
}
Kapan Menggunakannya?
div: Gunakan div untuk membagi struktur halaman menjadi bagian-bagian yang logis, seperti membagi header, siderbar, body, atau footerclass: Gunakan class untuk mengkelompokkan elemen yang memiliki gaya atau perilaku yang sama.id: Gunakan id untuk menargetkan elemen secara spesifik, misalnya untuk animasi tombol, JavaScript, atau bookmark.
Contoh Penggunaan Atribut HTML
Anda bisa menambahkan lebih banyak elemen ke dalam setiap div dan mengaturnya style CSS. Misalnya:
- Header: Menambahkan logo, tombol pencarian, menu atau informasi kontak.
- Content: Tambahkan gambar, tabel, formulir atau konten lainnya.
- Footer: Tambahkan link ke kebijakan privasi, syarat penggunaan, atau media sosial.
Berikut adalah contoh layout html dengan menggunakan ketiga atribut tersebut.
Kesimpulan
div, class, dan id adalah komponen yang penting digunakan dan saling berkaitan dalam membuat kode HTML.
Dengan memahami fungsi dan kapan menggunakanya ketiganya, Anda bisa membuat kode HTML yang baik, mengatur CSS/JavaScript dengan rapi, dan dapat meningkatkan kualitas website yang dibuat.
Demikian sesi belajar HTML part 6 tentang div, class dan id pada HTML. Di sesi belajar HTML part 7, kita akan belajar tentang layout dan responsive web design dengan HTML sederhana. Simak terus tutorial dari Rumahweb Indonesia.
