Perbedaan tag HTML <div> dan <span>

Pengaturan CSS pada suatu elemen HTML dapat dilakukan secara berkelompok, yaitu dengan menggunakan tag <div>. Ada juga tag <span> yang seakan-akan memiliki fungsi sama dengan <div>, padahal keduanya memiliki kegunaan yang jauh berbeda. Umumnya, programmer yang baru mulai terjun dalam pemrograman web akan merasa kebingungan untuk membedakan kedua tag ini. Lalu, apa perbedaan antara kedua tag ini?
Walaupun kegunaannya hampir sama, tapi penggunaan dan fungsiinya ternyata jauh berbeda.
<div> digunakan untuk mengelompokkan elemen menjadi sebuah blok(daerah berbentuk kotak). Setelah dikelompokkan, elemen yang ada di dalam tag <div> akan selalu berada dalam satu baris.
Sementara itu,
<span> umumnya digunakan untuk text saja, selain itu juga sering digunakan pada gambar. Jika kita menerapkan CSS pada elemen yang berada diantara tag <span>, efeknya akan sedikit berbeda dengan <div>, karena tag <span> tidak mengelompokkan konten di dalamnya dalam bentuk blok.
Untuk melihat perbedaannya lebih jelas, lihat hasil beberapa baris kode berikut.Resize  window pada browser anda, dan lihat perbedaan yang terjadi antara tag <div> dan <span>

div:
<div style="color:#F00;background:#0F0;border:1px solid red;">
Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!
</div>

<br/>

span:
<span style="color:#F00;background:#0F0;border:1px solid red;">
Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!
</span>

Inilah hasil dari kode di atas. Saya tidak bisa mendeskripsikan perbedaannya lebih jauh. Tapi dengan melihat hasil kode di atas dan screenshoot di bawah ini, saya harap anda paham perbedaannya.