Apa perbedaan antara tag HTML <div> dan <span>?

Saya ingin meminta beberapa contoh sederhana yang menunjukkan penggunaan <div>dan <span>. Saya pernah melihat keduanya digunakan untuk menandai bagian halaman dengan idatau class, tetapi saya tertarik mengetahui apakah ada saat-saat ketika satu lebih disukai dari yang lain.

• divadalah elemen blok
• spanadalah elemen inline .

Ini berarti bahwa untuk menggunakannya secara semantik, div harus digunakan untuk membungkus bagian-bagian dokumen, sementara bentang harus digunakan untuk membungkus sebagian kecil teks, gambar, dll.

Sebagai contoh:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Perhatikan bahwa menempatkan elemen level blok dalam elemen inline adalah ilegal, jadi:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

... ilegal.

EDIT: Pada HTML5, beberapa elemen blok dapat ditempatkan di dalam beberapa elemen inline. Lihat referensi MDN di sini untuk daftar yang cukup jelas. Di atas masih ilegal, karena <span>hanya menerima konten ungkapan, dan <div>mengalir konten.

Anda meminta beberapa contoh nyata, demikian juga yang diambil dari situs bowling saya, BowlSK :

<div id="header">
  <div id="userbar">
    Hi there, <span class="username">Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Oke, apa yang terjadi?

Perhatikan juga bahwa HTML5 mencakup serangkaian elemen baru yang luas yang mendefinisikan struktur halaman umum, seperti artikel, bagian, nav, dll.

Bagian 4.4 dari draft kerja HTML 5 mencantumkannya dan memberikan petunjuk tentang penggunaannya. HTML5 masih merupakan spec yang berfungsi, jadi belum ada yang "final", tetapi sangat meragukan bahwa salah satu elemen ini ada di mana saja. Ada hack javascript yang perlu Anda gunakan jika Anda ingin menata elemen-elemen ini di beberapa versi IE yang lebih lama - Anda harus membuat satu dari setiap elemen menggunakan document.createElementsebelum elemen-elemen tersebut ditentukan di sumber Anda. Ada banyak perpustakaan yang akan mengurus ini untuk Anda - pencarian Google cepat muncul html5shiv .

Demi kelengkapan, saya mengundang Anda untuk memikirkannya seperti ini:

• Ada banyak elemen blok (linebreak sebelum dan sesudah) yang didefinisikan dalam HTML, dan banyak tag inline (tanpa linebreak).
• Tetapi dalam HTML modern semua elemen seharusnya memiliki makna : a <p>adalah paragraf, a <li>adalah item daftar, dll., Dan kita seharusnya menggunakan tag yang tepat untuk tujuan yang benar - tidak seperti di masa lalu ketika kita indentasi menggunakan <blockquote>apakah konten itu kutipan atau tidak.
• Jadi, apa yang Anda lakukan ketika ada adalah ada artinya hal yang Anda coba lakukan? Tidak ada artinya untuk kolom selebar 400px, kan? Anda hanya ingin kolom teks Anda menjadi 400px lebar karena sesuai dengan desain Anda.
• Untuk alasan ini, mereka menambahkan dua elemen lagi ke HTML: elemen generik, atau tidak berarti <div>dan <span>, karena jika tidak, orang akan kembali menyalahgunakan elemen yang memiliki makna.

Sudah ada jawaban yang bagus dan terperinci di sini, tetapi tidak ada contoh visual, jadi inilah ilustrasi singkatnya:

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div>adalah tag blok, sedangkan <span>tag inline.

<div>adalah elemen tingkat blok dan <span>merupakan elemen inline.

Jika Anda ingin melakukan sesuatu dengan beberapa teks sebaris, <span>adalah cara untuk pergi karena tidak akan memperkenalkan jeda baris yang <div>akan.

Sebagaimana dicatat oleh orang lain, ada beberapa semantik yang tersirat dengan masing-masingnya, yang paling signifikan adalah fakta bahwa sebuah <div>menyiratkan pembagian logis dalam dokumen, mungkin mirip dengan bagian dokumen atau sesuatu, ala:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

Perbedaan penting yang sebenarnya telah disebutkan dalam jawaban Chris. Namun, implikasinya tidak akan jelas bagi semua orang.

Sebagai elemen inline, <span>hanya boleh mengandung elemen inline lainnya. Karenanya kode berikut salah:

<span><p>This is a paragraph</p></span>

Kode di atas tidak valid. Untuk membungkus elemen level blok, elemen level blok lain harus digunakan (seperti <div>). Di sisi lain, <div>hanya dapat digunakan di tempat-tempat di mana elemen-elemen tingkat blok legal.

Selain itu, aturan-aturan ini diperbaiki dalam (X) HTML dan tidak diubah oleh adanya aturan CSS! Jadi kode-kode berikut juga salah!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

Signifikansi "elemen blok" tersirat tetapi tidak pernah dinyatakan secara eksplisit. Jika kita mengabaikan semua teori (teori itu baik) maka berikut ini adalah perbandingan pragmatis. Pengikut:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

menghasilkan:

This paragraph has a span.

This paragraph

has
a div.

Itu menunjukkan bahwa tidak hanya harus div tidak menjadi inline digunakan, itu hanya tidak akan menghasilkan yang diinginkan mempengaruhi.

Seperti disebutkan dalam jawaban lain, secara default divakan diberikan sebagai elemen blok, sementara spanakan diberikan inline dalam konteksnya. Tetapi tidak ada yang memiliki nilai semantik; mereka ada untuk memungkinkan Anda menerapkan gaya dan identitas ke sedikit konten yang diberikan. Dengan menggunakan gaya, Anda dapat membuat divaksi seperti a spandan sebaliknya.

Salah satu gaya yang bermanfaat untuk div adalahinline-block

Contoh:

1. http://dustwell.com/div-span-inline-block.html

2. Tampilan CSS: inline vs inline-block

Saya sudah terbiasa inline-blockdengan kesuksesan besar, dalam proyek web game.

Div adalah elemen blok dan span adalah elemen inline dan lebarnya tergantung pada konten itu sendiri di mana div tidak

Saya akan mengatakan bahwa jika Anda tahu sedikit bahasa Spanyol untuk melihat halaman ini , di mana dijelaskan dengan benar.

Namun, definisi cepat divadalah untuk membagi bagian dan spanuntuk menerapkan semacam gaya ke elemen dalam elemen blok lain seperti div.

Hanya ingin menambahkan beberapa konteks historis pada bagaimana ada spanvsdiv

Sejarah span:

Pada 3 Juli 1995, Benjamin CW Sittler mengusulkan sebuah wadah teks generik. tag untuk menerapkan gaya ke blok teks tertentu. Render bersifat netral kecuali jika digunakan bersama dengan stylesheet. Ada perdebatan seputar versus tentang keterbacaan, makna. Bert Bos menyebutkan sifat ekstensibilitas elemen melalui atribut kelas (dengan nilai-nilai seperti kota, orang, tanggal, dll.). Paul Prescod khawatir bahwa kedua elemen akan disalahgunakan. Dia menentang teks yang menyebutkan bahwa "setiap elemen baru harus pada yang lama" dan menambahkan "Jika kita membuat tag tanpa semantik itu dapat digunakan di mana saja tanpa pernah salah. Kita harus memaksa para penulis untuk menandai semantik dokumen mereka dengan semestinya. Kita harus memaksa vendor editor untuk membuat pilihan itu eksplisit di antarmuka mereka. "

- Sumber (w3 wiki)

Dari draft RFC yang memperkenalkan span:

Pertama, wadah generik diperlukan untuk membawa atribut LANG dan BIDI jika tidak ada elemen lain yang sesuai; elemen SPAN diperkenalkan untuk tujuan itu.

- Sumber (Draft IETF)

Sejarah div:

Elemen DIV dapat digunakan untuk menyusun dokumen HTML sebagai hierarki divisi.

...

CENTER diperkenalkan oleh Netscape sebelum mereka menambahkan dukungan untuk elemen HTML 3.0 DIV. Itu disimpan dalam HTML 3.2 karena penyebarannya yang luas.

HTML 3.2 Spec

Singkatnya, kedua elemen muncul dari kebutuhan akan wadah yang lebih generik. Span diusulkan sebagai pengganti yang lebih umum untuk <text>elemen ke teks gaya. Div diusulkan sebagai cara umum untuk membagi halaman dan memiliki manfaat tambahan untuk mengganti <center>tag untuk konten penyelarasan tengah. Div selalu menjadi elemen blok karena riwayatnya sebagai pembagi halaman. Span selalu menjadi elemen inline karena tujuan awalnya adalah penataan teks dan hari ini div dan span telah menjadi elemen generik dengan blok default dan properti tampilan inline masing-masing.

Di HTML ada tag yang menambahkan struktur atau semantik ke konten. Misalnya <p>tag digunakan untuk mengidentifikasi paragraf. Contoh lain adalah <ol>tag untuk daftar yang diurutkan.

Ketika tidak ada tag yang sesuai tersedia dalam HTML seperti yang ditunjukkan di atas, tag <div>dan <span>biasanya terpaksa.

The <div>tag digunakan untuk mengidentifikasi bagian blocklevel / pembagian dokumen yang memiliki satu baris sebelum dan setelah.

Contoh di mana tag div dapat digunakan adalah header, footer, navigasi dll. Namun dalam HTML 5 tag ini telah disediakan.

Itu <span> tag digunakan untuk mengidentifikasi sebuah inline bagian / divisi dari dokumen.

Misalnya tag rentang dapat digunakan untuk menambahkan pictographs sebaris ke elemen.

Ingat, pada dasarnya dan mereka sendiri tidak melakukan fungsi apa pun. Mereka tidak spesifik tentang fungsionalitas hanya dengan tag mereka .

Mereka hanya dapat dikustomisasi dengan bantuan CSS.

Sekarang sampai pada pertanyaan Anda:

Tag SPAN bersama beberapa gaya akan berguna untuk menahan di dalam garis, misalnya dalam paragraf, di html. Ini adalah jenis level baris atau level pernyataan dalam HTML.

Contoh:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

Fungsionalitas tag DIV sebagaimana dikatakan hanya dapat terlihat didukung dengan gaya, dapat menampung potongan besar kode HTML.

DIV adalah level Blok

Contoh:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

Keduanya memiliki waktu dan kasus kapan harus digunakan, berdasarkan kebutuhan Anda.

Harapan jelas dengan jawabannya. Terima kasih.