{"id":51749,"date":"2024-12-13T14:44:39","date_gmt":"2024-12-13T07:44:39","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=51749"},"modified":"2024-12-24T08:34:37","modified_gmt":"2024-12-24T01:34:37","slug":"belajar-html-part-6","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-html-part-6\/","title":{"rendered":"Belajar HTML Part 6: Perbedaan div, class, dan id Pada HTML"},"content":{"rendered":"\n

Setelah belajar cara membuat heading dan paragraf<\/a> dengan HTML, selanjutnya pada sesi belajar HTML part 6, kita akan belajar tentang apa itu div, class dan id beserta contohnya pada HTML.<\/p>\n\n\n\n\n\n

Pengertian Div, Class, dan ID<\/h2>\n\n\n\n

Dalam HTML<\/a>, 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. <\/p>\n\n\n\n

Div<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Div merupakan singkatan dari “division”, biasanya digunakan untuk mengelompokkan bagian header, sidebar, body, footer, dan lainnya secara terpisah dalam satu tampilan tertentu.<\/p>\n\n\n\n

Class<\/h3>\n\n\n\n

Class adalah atribut HTML yang digunakan sebagai penanda elemen di HTML. Selain itu, class sering digunakan untuk manipulasi style <\/em>CSS atau javasript.<\/p>\n\n\n\n

ID<\/h3>\n\n\n\n

Id adalah singkatan dari identifier atau identity, yaitu atribut yang mirip seperti class, tetapi memiliki perilaku berbeda.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Setelah kita bahas sedikit tentang pengertiannya, selanjutnya mari kita membahas mengenai perbedaan dan cara menggunakan div, class, dan id dalam dokumen HTML.<\/p>\n\n\n\n

Tabel Perbedaan div, class, dan id<\/h2>\n\n\n\n

Untuk memudahkan Anda belajar HTML Atribut tentang div, class dan id, berikut kami sampaikan table perbandingannya. <\/p>\n\n\n\n

Fitur<\/th>div<\/th>class<\/th>id<\/th><\/tr><\/thead>
Fungsi<\/td>Container generik<\/td>Pengelompokan dalam
elemen<\/td>		Identitas unik<\/td><\/tr>
Keunikan<\/td>Tidak unik<\/td>Tidak harus unik,
dapat digunakan
berkali-kali di dokumen
HTML<\/td>		Harus unik dalam
satu halaman<\/td><\/tr>
Penggunaan
dalam CSS<\/td>		Bisa, biasanya
digunakan dengan
kombinasi class dan id<\/td>		Digunakan dengan
tanda titik (.) dalam CSS<\/td>		Digunakan dengan
tanda pagar (#)
dalam CSS<\/td><\/tr>
Contoh
Penggunaan<\/td>		Membungkus bagian
header, footer, atau
konten utama<\/td>		Mengatur gaya untuk
semua paragraf,
tombol, atau link<\/td>		Mengatur gaya
untuk elemen
navigasi utama<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Cara Menggunaan div, class, dan id<\/h2>\n\n\n\n

Berikut cara menggunakan div<\/code>, class<\/code>, dan id<\/code> dalam dokumen HTML beserta contohnya agar lebih mudah dipahami.<\/p>\n\n\n\n

Contoh skrip HTML:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n<head>\n  <title>Contoh Penggunaan Div, Class, dan ID<\/title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n  \n<\/head>\n<body>\n\n<div class=\"header\">\n  <h1 id=\"judul\">Selamat Datang<\/h1>\n  <nav>\n    <ul>\n      <li><a href=\"#\">Home<\/a><\/li>\n      <li><a href=\"#\">About<\/a><\/li>\n      <li><a href=\"#\">Contact<\/a><\/li>\n    <\/ul>\n  <\/nav>\n<\/div>\n\n<div class=\"content\">\n  <p>Ini adalah konten utama halaman.<\/p>\n  <p>Anda bisa menambahkan konten di sini.<\/p>\n<\/div>\n\n<div class=\"footer\">\n  <p>&copy; 2024 Contoh Website<\/p>\n<\/div>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Keterangan:<\/p>\n\n\n\n
    \n
  1. Struktur HTML terdiri dari Header, Content, dan Footer.<\/li>\n\n\n\n
  2. Penggunaan div<\/code>: Setiap bagian utama (header, content, dan footer) menggunakan elemen div<\/code>, untuk mengelompokkan elemen-elemen didalamnya.<\/li>\n\n\n\n
  3. Penggunaan class<\/code>: header dan footer diberikan class sama, sedangkan content diberikan class untuk mengatur padding pada tampilan konten utama<\/li>\n<\/ol>\n\n\n\n
    Contoh kode CSS<\/p>\n\n\n\n
     .header {\n  background-color: #f0f0f0;\n  padding: 20px;\n  text-align: center;\n}\n\n#judul {\n  color: red;\n  text-align: center;\n  background-color: black;\n}\n\n.footer {\n  background-color: #f0f0f0;\n  padding: 20px;\n  text-align: center;\n}\n\n.content {\n  padding: 20px;\n}\n\nnav ul {\n  list-style: none; \/* Menghilangkan bullet point pada list *\/\n  margin: 0;\n  padding: 0;\n  display: flex; \/* Mengubah display menjadi flex untuk tata letak horizontal *\/\n  justify-content: center; \/* Menempatkan item-item secara horizontal di tengah *\/\n}\n\nnav li {\n  margin: 0 10px; \/* Memberikan margin kiri dan kanan pada setiap item *\/\n}\n\nnav a {\n  text-decoration: none;\n  color: #333;\n  padding: 10px 15px;\n  border-radius: 5px;\n  transition: background-color 0.3s ease;\n}\n\nnav a:hover {\n  background-color: #f0f0f0;\n}\n<\/code><\/pre>\n\n\n\n
    Kapan Menggunakannya?<\/h2>\n\n\n\n