Spear — Learn to Code

Div & Span

<div> dan <span> adalah elemen kontainer generik tanpa makna semantik. Digunakan untuk grouping dan styling.

<div> — Block Container

Kontainer block-level
Digunakan untuk grouping elemen dan membuat layout
Sering dikombinasikan dengan CSS class

<span> — Inline Container

Kontainer inline
Digunakan untuk styling sebagian teks
Tidak mengubah layout (tetap inline)

Kapan Menggunakan?

Gunakan elemen semantik dulu (header, nav, section, dll)
Gunakan div/span hanya jika tidak ada elemen semantik yang cocok

<h3>Div sebagai Layout Container</h3> <div> <div> <strong>Card 1</strong> <p>Menggunakan div</p> </div> <div> <strong>Card 2</strong> <p>Untuk layout</p> </div> <div> <strong>Card 3</strong> <p>Flexbox cards</p> </div> </div> <h3>Span untuk Styling Teks</h3> <p> Belajar <span>HTML</span>, <span>CSS</span>, dan <span>JavaScript</span> itu menyenangkan! </p>