Pembagian section dengan <div>

basics

Ketika kita membuat website, ada bagian yang ingin kita masukkan ke dalam group, dan kita ingin memisahkan mereka.

contoh seperti group hero (bagian yang paling pertama di lihat di website), atau kontak perusahaan, atau, galeri, list produk, dll.

hal hal ini bisa di pisahkan supaya bisa di atur dengan lebih mudah dengan menggunakan tag yang memang berfungsi untuk memisahkan bagian tersebut.

tag yang bisa kita gunakan adalah tag <div>. tag ini tidak akan memberikan efek apapun pada tampilan website kita, namun kita bisa memberikan style atau class pada tag tersebut.

contoh :

<div>
  <h1>Ini judul</h1>
  <p>Ini paragraf</p>
</div>
<div>
  <h2>ini sub judul</h2>
  <p>ini paragraf sub judul</p>
</div>
<div>
  <h2>bagian gambar</h2>
  <img src="https://google.com/sumber-gambar.png" alt="gambar aja" />
</div>

setelah pembagian ini, kita akan bisa memberikan seperti pembeda disetiap bagian yang sudah di pisahkan dengan div, misal dengan menggunakan CSS, kita memberikan warna background, atau border, atau margin, atau padding, atau apapun yang kita inginkan pada bagian div tertentu untuk memisahkannya dari div yang lainnya.

contoh dengan style

<div style="border: 1px solid red;">
  <h1>Ini judul</h1>
  <p>Ini paragraf</p>
</div>
<div style="border: 1px solid blue;">
  <h2>ini sub judul</h2>
  <p>ini paragraf sub judul</p>
</div>
<div style="border: 1px solid yellow;">
  <h2>bagian gambar</h2>
  <img src="https://google.com/sumber-gambar.png" alt="gambar aja" />
</div>