<div> ve <span> HTML etiketleri arasındaki fark nedir?

Ben kullanımlarını gösteren bazı basit örnekler için sormak istiyorum <div>ve <span>. İkisinin de bir sayfanın bir bölümünü bir idveya ile işaretlemek için kullandığını gördüm class, ancak birinin diğerine göre tercih edildiği zamanlar olup olmadığını bilmekle ilgileniyorum.

• divbir blok öğesidir
• spanbir satır içi öğedir .

Bu, bunları semantik olarak kullanmak için div öğelerinin bir belgenin bölümlerini sarmak için kullanılması gerekirken, açıklıklar küçük metin, resim vb. Bölümlerini sarmak için kullanılmalıdır.

Örneğin:

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

Satır içi bir öğenin satır içi öğenin içine yerleştirilmesinin yasadışı olduğunu unutmayın, bu nedenle:

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

... yasadışı.

EDIT: HTML5 itibariyle, bazı blok elemanları bazı satır içi öğelerin içine yerleştirilebilir. MDN referansı Bkz burada çok net bir liste için. Yukarıdakiler, <span>yalnızca kelime öbeği içeriğini kabul ettiği ve <div>akış içeriği olduğu için hala yasa dışıdır .

Bazı somut örnekler istediniz, bir tanesi bowling web sitem BowlSK'dan alınmıştır :

<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>

Tamam, neler oluyor?

HTML5'in makale, bölüm, gezinme vb. Ortak sayfa yapılarını tanımlayan yeni ve geniş bir öğe kümesi içerdiğini de unutmayın.

HTML 5 çalışma taslağının 4.4. Bölümü bunları listeler ve kullanımlarıyla ilgili ipuçları verir. HTML5 hala çalışan bir özelliktir, bu yüzden henüz hiçbir şey "nihai" değildir, ancak bu öğelerin herhangi birinin herhangi bir yere gittiği konusunda şüphelidir. IE'nin bazı eski sürümlerinde bu öğeleri biçimlendirmek istiyorsanız kullanmanız gereken bir javascript kesmek vardır - Bu öğelerin document.createElementherhangi biri kaynağınızda belirtilmeden önce kullanarak her öğeden birini oluşturmanız gerekir . Sizin için bununla ilgilenecek bir sürü kitaplık var - hızlı bir Google araması html5shiv oldu .

Sadece bütünlük uğruna, sizi böyle düşünmeye davet ediyorum:

• HTML'de tanımlanmış çok sayıda blok öğesi (satır öncesi ve sonrası çizgi satırları) ve çok sayıda satır içi etiket (satır sonu yok) var.
• Ancak modern HTML'de tüm öğelerin anlamları olması gerekir : a <p>bir paragraf, bir <li>liste öğesidir, vb. Ve doğru etiketi doğru amaç için kullanmalıyız - eski günlerde olduğu gibi değil <blockquote>içeriğin bir teklif olup olmadığını kullanarak girintili .
• Yani, orada ne zaman ne yaparsınız olduğunu sen yapmaya çalıştığını şeye hiçbir anlamı? 400 piksel genişliğindeki bir sütunun anlamı yok , değil mi? Metin sütununuzun 400 piksel genişliğinde olmasını istersiniz, çünkü bu tasarımınıza uygundur.
• Bu nedenle, HTML'ye iki öğe daha eklediler: genel veya anlamsız öğeler <div>ve <span>aksi takdirde insanlar anlamları olan öğeleri kötüye kullanmaya geri döneceklerdi.

Burada zaten iyi, ayrıntılı cevaplar var, ancak görsel örnekler yok, bu yüzden hızlı bir örnek:

<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>bir blok etiket, <span>bir satır içi etiket.

<div>blok düzeyinde bir öğedir ve <span>satır içi bir öğedir.

Bazı satır içi metin ile bir şey yapmak istiyorsanız, <span>gitmek için bir yoldur çünkü satır sonları tanıtmak <div>olmaz.

Diğerleri tarafından belirtildiği gibi, bunların her biriyle ilgili bazı semantikler vardır, en önemlisi, <div>bir belgenin belgedeki bir bölüme veya bir şeye, la

<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>

Gerçek önemli fark Chris'in cevabında zaten belirtilmiştir. Ancak, etkileri herkes için açık olmayacak.

Satır içi bir öğe olarak <span>yalnızca başka satır içi öğeler içerebilir. Bu nedenle aşağıdaki kod yanlıştır:

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

Yukarıdaki kod geçerli değil. Blok düzeyindeki öğeleri sarmak için başka bir blok düzeyindeki öğe kullanılmalıdır (örneğin <div>). Öte yandan, <div>yalnızca blok düzeyindeki öğelerin yasal olduğu yerlerde kullanılabilir.

Dahası, bu kurallar giderilen (X) HTML ve onlar vardır değil CSS kurallarının varlığı ile değişmiş! Yani aşağıdaki kodlar da yanlış!

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

"Blok eleman" ın önemi ima edilir, ancak asla açıkça ifade edilmez. Tüm teoriyi görmezden gelirsek (teori iyidir) o zaman aşağıdakiler pragmatik bir karşılaştırmadır. Aşağıdaki:

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

üretir:

This paragraph has a span.

This paragraph

has
a div.

Gösterileri Bu o sadece gerektiği bir div değil kullanılan satır içi olmak, sadece etkileyen istenen üretmez.

Diğer cevaplarda belirtildiği gibi, varsayılan divolarak bir blok öğesi olarak işlenirken span, bağlamı içinde satır içinde işlenir. Ancak ikisinin de semantik değeri yoktur; herhangi bir içeriğe stil ve kimlik uygulamanıza izin vermek için varlar. Stilleri kullanarak, yapabilir diva gibi davranıpspan ve tam tersi .

İçin yararlı stillerden divbiriinline-block

Örnekler:

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

2. CSS ekranı: satır içi veya satır içi blok

Ben kullandım inline-blockoyun web projelerinde, büyük bir başarıya.

Div, bir blok öğedir ve span, satır içi bir öğedir ve genişliği, div'ın olmadığı durumlarda kendi içeriğine bağlıdır.

Bu sayfaya bakmak için biraz İspanyolca biliyorsanız, , nerede düzgün açıklandığını .

Bununla birlikte, hızlı bir tanım, divbölümleri bölmek ve spanbenzer bir blok öğesindeki bir öğeye bir tür stil uygulamak içindir div.

Sadece spanvs nasıl geldiğine tarihsel bir bağlam eklemek istedimdiv

Tarihçesi span:

3 Temmuz 1995'te Benjamin CW Sittler , belirli metin bloklarına stil uygulamak için genel bir metin kabı etiketi önerir . Oluşturma, bir stil sayfasıyla birlikte kullanılması dışında tarafsızdır. Okunabilirlik ve anlam konusunda tartışmalar var. Bert Bos, elementin genişletilebilirlik niteliğinden sınıf niteliğinden bahsediyor (şehir, kişi, tarih vb. Değerlerle). Paul Prescod, her iki öğenin de istismar edileceğinden endişe ediyor. "Herhangi bir yeni öğenin eskisinde olması gerektiğini" belirten ve "Anlambilimsiz bir etiket oluşturursak, yanlış olmadan herhangi bir şekilde kullanılabilir.Yazarları belgelerinin anlambilimlerini düzgün bir şekilde etiketlemeye zorlamalıyız. Editör sağlayıcılarını bu seçimi kendi arayüzlerinde açıkça belirlemeye zorlamalıyız. "

- Kaynak (w3 wiki)

Aşağıdakileri tanıtan RFC taslağından span:

İlk olarak, başka bir elementin uygun olmadığı durumlarda LANG ve BIDI niteliklerini taşımak için genel bir konteynere ihtiyaç vardır; bu amaçla SPAN öğesi tanıtıldı.

- Kaynak (IETF Taslağı)

Tarihçesi div:

DIV öğeleri, HTML belgelerini bir bölümler hiyerarşisi olarak yapılandırmak için kullanılabilir.

...

CENTER, HTML 3.0 DIV öğesi için destek eklemeden önce Netscape tarafından tanıtıldı. Yaygın dağıtımından dolayı HTML 3.2'de korunur.

HTML 3.2 Özellikleri

Özetle, her iki eleman da daha anlamsal olarak jenerik bir kaba ihtiyaç duyulmamıştır. Span, bir <text>öğenin metni biçimlendirmesi için daha genel bir yedek olarak önerildi . Div, sayfaları bölmenin genel bir yolu olarak önerildi ve <center>merkezi hizalama içeriği için etiketi değiştirmenin avantajını sağladı . Div, sayfa ayırıcı olarak geçmişi nedeniyle her zaman bir blok öğesi olmuştur. Span her zaman satır içi bir öğe olmuştur, çünkü orijinal amacı metin stilidir ve bugün div ve span sırasıyla varsayılan blok ve satır içi görüntüleme özelliklerine sahip genel öğeler haline gelmiştir.

HTML'de içeriğe yapı veya anlambilim ekleyen etiketler vardır. Örneğin, <p>etiket bir paragrafı tanımlamak için kullanılır. Başka bir örnek, <ol>sıralı listenin etiketidir.

Yukarıda gösterildiği gibi HTML'de uygun bir etiket olmadığında ve <div>ve <span>etiketlerine genellikle başvurulur.

<div>Etiket önce ve ondan sonra her iki satır sonu olan bir belgenin bir blocklevel bölüm / bölünme tanımlamak için kullanılır.

Div etiketlerinin kullanılabileceği örneklere üstbilgiler, altbilgiler, gezinmeler vb. Verilebilir. Ancak HTML 5'te bu etiketler zaten sağlanmıştır.

<span>Etiketi, bir belgenin bir dahili kesme / bölme tanımlamak için kullanılır.

Örneğin, bir öğeye satır içi piktograflar eklemek için bir yayılma etiketi kullanılabilir.

Unutmayın, temelde onlar da hiçbir işlevi yerine getirmezler. Bunlar değil işlevselliği hakkında spesifik sadece kendi etiketleriyle .

Sadece CSS yardımı ile özelleştirilebilirler.

Şimdi sorunuza geliyor:

SPAN etiketi, bazı stillerle birlikte, html'de bir paragrafta, örneğin bir satırın içinde tutulurken yararlı olacaktır. Bu, HTML'deki bir tür satır düzeyi veya ifade düzeyidir.

Misal:

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

Dendiği gibi DIV etiketi işlevselliği sadece stil ile desteklenebilir görülebilir, büyük HTML kodu yığınları olabilir.

DIV, Blok seviyesidir

Misal:

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

Her ikisinin de gereksiniminize göre ne zaman kullanılacağı ve vakti vardır.

Umarım cevap açıktır. Teşekkür ederim.