Logo Komodo Koding /Koding

Span pada HTML

Span bisa digunakan untuk mengapit satu elemen HTML atau mengelompokkan beberapa elemen HTML menjadi satu. Secara visual span tidak ada bedanya

Mirip seperti DIV, span adalah tag HTML yang tidak punya makna apa-apa ketika berdiri sendiri. Ia berguna untuk memberi aksi atau hiasan pada sebuah atau sekelompok elemen HTML.

Contoh penggunaan span

Dibandingkan dengan div, penggunaan span biasanya hanya pada suatu text, atau elemen ‘kecil’. Contoh

<p>Saya adalah sebuah paragraf yang berisi <span>tag span</span> di tengahnya.</p>

Hasilnya:

Saya adalah sebuah paragraf yang berisi tag span di tengahnya.

Contoh span yang menggunakan CSS

<p>Saya adalah sebuah paragraf yang berisi 
    <span style='background:blue;'>tag span</span> di tengahnya.</p>

Hasilnya

Saya adalah sebuah paragraf yang berisi tag span di tengahnya.

Tentunya kamu bisa menggunakan lebih dari satu span

<p>Saya adalah sebuah paragraf yang berisi 
    <span style='background:blue;'>tag span</span> di tengahnya
    dan di bagian <span style='background:orange;'>akhir</span>.</p>

Hasilnya

Saya adalah sebuah paragraf yang berisi tag span di tengahnya dan di bagian akhir.

😲 Info sampingan

Span adalah tag yang bersifat `inline` atau muncul di baris yang sama.