Grouping
Ketika kita menuliskan kode HTML dan kita merasa ada elemen-elemen yang saling terikat dan ingin membungkus
elemen-elemen tersebut menjadi sebuah elemen baru, kita bisa menggunakan HTML Grouping. Pada HTML untuk melakukan
grouping, kita bisa menggunakan elemen <div></div>
atau <span></span>
.
Contoh tanpa grouping :
<h1>Anggota GDSC UNSRI</h1>
<ul>
<li>Megumin</li>
<li>Geeks</li>
</ul>
<p>Terima Kasih</p>
Dengan Grouping :
<div>
<h1>Anggota GDSC UNSRI</h1>
<ul>
<li>Megumin</li>
<li>Geeks</li>
</ul>
</div>
<p>Terima Kasih</p>
Walaupun secara output tidak ada perubahan, akan tetapi dengan grouping kita akan lebih mudah dalam membaca suatu kode.
Div
Pada elemen div secara default display bernilai block, artinya adalah ketika menggunakan elemen tersebut maka akan membuat line baru (enter). Pengertian display sendiri nanti akan diperjelas pada materi CSS.
Contoh :
<p>Halo Megumin!
<div>Halo juga Geeks</div></p>
Output :
Halo Megumin!
Halo juga Geeks
Span
Pada elemen span memiliki nilai default bernilai inline, artinya adalah ketika menggunakan elemen tersebut maka tidak akan membuat line baru.
<p>Halo Megumin!<span>Halo juga Geeks</span></p>
Output :
Halo Megumin! Halo juga Geeks