Div & Span HTML

Div dan span merupakan elemen dalam HTML yang berfungsi untuk mengelompokkan elemen-elemen lain. Div dan span merupakan generic element, dimana kita bisa membuat elemen secara custom, yang sebenarnya generic element tersebut tidak memiliki arti atau fungsi spesifik dalam suatu halaman web. Div dan span biasanya digunakan untuk menata halaman web dan styling elemen. Perbedaan antara div dan span yaitu div merupakan block-level element sementara span merupakan inline element.

Div

Div / division merupakan suatu block-level element yang berfungsi sebagai container untuk membungkus / mengelompokkan elemen dalam HTML. Div biasanya digunakan dalam membagi beberapa bagian layout dan styling sekelompok elemen.

Contoh Penggunaan:

<div>
    <h2>Halo, ini Zencliv</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus excepturi impedit facere, provident esse
        perferendis atque natus vero sapiente, culpa ullam vitae unde quo error? Laborum ad reiciendis rem quae!</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam a commodi maiores deleniti, ullam, ipsum
        officiis ratione quae beatae praesentium facere facilis cum vero porro! Doloribus ipsum ut eveniet sed.</p>
    <a href="https://www.zencliv.com/">Zencliv</a>
</div>

Output:

Terlihat sama saja bukan?

Memang tidak akan terlihat berbeda, karena div hanya menjadi container bagi elemen-elemen di dalamnya. 

Mari kita coba berikan sedikit styling ke elemen <div> tersebut:

<div style="text-align: center; border: 1px solid black; margin-top: 10%;">
    <h2>Halo, ini Zencliv</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus excepturi impedit facere, provident esse
        perferendis atque natus vero sapiente, culpa ullam vitae unde quo error? Laborum ad reiciendis rem quae!</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam a commodi maiores deleniti, ullam, ipsum
        officiis ratione quae beatae praesentium facere facilis cum vero porro! Doloribus ipsum ut eveniet sed.</p>
    <a href="https://www.zencliv.com/">Zencliv</a>
</div>

Output:

Terlihat berbeda bukan?

Jika kita berikan styling ke elemen <div> tersebut maka yang terjadi adalah semua elemen yang ada di dalam div tersebut akan terkena efeknya. 

Span

Span merupakan suatu inline element yang biasanya digunakan untuk mengaplikasikan styling ke sebagian konten. Span diaplikasikan pada teks, gambar, atau elemen lain yang terdapat konten yang tampil secara inline.

Contoh Penggunaan:

<p>Ini adalah sebuah teks <span style="background-color: yellow; color: red;">berwarna</span></p>
<span style="font-size: 30px; color: blue; font-weight: bold;">Ini teks dengan span</span>

Output:

Div & Span Implementation

Mari kita lihat contoh implementasi dari div dan span untuk mengetahui dimana perbedaannya.

Code:

<div style="background-color: lightcoral;">
    <h1>Ini adalah Heading 1</h1>
    <p>Ini adalah sebuah paragraf</p>
    <p>Ini adalah teks <span style="background-color: aqua;">berwarna</span></p>
</div>
<span style="background-color: yellow;">Ini adalah teks dalam span</span>
<span style="background-color: chartreuse;">Ini adalah teks dalam span</span>
<div style="background-color: lightblue;">
    <h2>Ini adalah Heading 2</h2>
    <p>Ini adalah sebuah paragraf</p>
</div>

Output:

Dapat kita simpulkan dari implementasi tersebut yaitu:

1. Elemen <div> akan memberikan jarak dengan elemen lain dan memenuhi ruang lebar karena elemen <div> merupakan block-level element.
2. Elemen <span> tidak memberikan jarak dengan elemen lain dan hanya mengambil ruang sesuai dengan isi konten yang ada karena elemen <span> merupakan inline element.
3. Elemen <span> dapat digunakan di dalam elemen <div>.