Jawaban:
Perbedaan utama adalah bahwa <span>tag adalah elemen inline , sedangkan <div>tag adalah elemen level blok .
Dua elemen level blok (div) akan ditampilkan satu demi satu secara vertikal, sedangkan dua elemen inline (bentang) akan ditampilkan satu demi satu secara horizontal.
Untuk memahami perbedaan dalam hal visual, mungkin membantu untuk memikirkan <span>elemen sebagai kata dan <div>elemen sebagai paragraf: div biasanya digunakan untuk meletakkan blok konten. Rentang biasanya digunakan untuk menyorot grup kata dalam konten itu.
Baik Nick dan Toby telah menjawab pertanyaan Anda dengan baik, tetapi untuk melangkah lebih jauh.
Secara default, <div>s adalah elemen blok dan <span>s adalah elemen inline. Ini adalah tag generik yang sederhananya menyediakan wadah blok atau inline. Dalam praktiknya, ini dapat diputar melalui CSS menjadi agak dipertukarkan dengan mengatur tampilan atribut-css ke 'blok', 'inline' atau bahkan 'inline-block' (antara lain).
Namun, membungkuk mereka untuk bertindak seperti satu sama lain tidak dianjurkan. Dan, ada aturan dalam HTML yang benar-benar mencegah penggunaan elemen tingkat blok di dalam elemen lain (sebagian besar elemen sebaris seperti <a>tag), jadi, Anda harus mencoba menggunakan tag yang tepat di tempat yang sesuai dan hanya mencoba menimpa perilakunya saat mutlak diperlukan.
Cobalah menganggapnya sebagai elemen semantik. Gunakan <span>ketika Anda ingin menandai konten yang digunakan di dalam blok teks, misalnya dan gunakan <div>ketika Anda perlu menambahkan struktur tambahan ke halaman itu sendiri.
Karena itu, HTML5 memiliki sejumlah besar elemen semantik yang seharusnya secara signifikan mengurangi kebutuhan untuk menggunakan salah satu dari tag generik ini. Menggunakan tag semantik sangat disarankan daripada menambahkan jumlah div dan bentang yang berlebihan.
Semoga berhasil!
Perbedaan utamanya adalah divselemen blok dan spanselemen inline.
Keduanya dapat ditata menggunakan CSS untuk bertindak sesuka Anda tetapi di luar kotak yang biasanya Anda gunakan spans untuk divisi inline yang lebih kecil dan divsuntuk blok yang lebih besar.
Beberapa hal akan memengaruhi elemen inline dan blok yang berbeda, misalnya Anda tidak dapat menempatkan ketinggian pada spanelemen.