Neden div ile html kodluyoruz? span ne işe yarar?

Merhaba,

Temel öğelere değindikçe açıklama ihtiyacı olan çok öğe var. Başlıktaki soruyu önce kendime sordum. İlk zamanlar araştırmış olmam muhtemel ama bu günlerde tekrar araştırana kadar el alışkanlığından kullanıyormuşum gibiydi. Peki div tam olarak nedir temel özellikleri nasıl span ile arasında ne gibi farkları var ve bunları ne zaman kullanmalıyız? Bu soruları bir kez olsun düşündüysen gel devam edelim.

div ve span

En temelden bakacak olursak div stil olarak display:block; içerir span ise display:inline; içerir. Bunun anlamı ise div kullandığınızda ilgili alanı genişlik olarak doldurur yükseklik ise htmlde malumunuz içeriğindeki yükseklik kadar alır.(burada küçük bir not; html de yükseklik yüzdelik olarak çalışmaz. Başka bir birim kullanmalısınız "vh" gibi.) span kullandığınızda ise kendi içeriğindeki alan kadar yer kaplar. Tabi span'a display: block; verip işlerin akışını değiştirebilirsiniz. İşte ikisi arasındaki temel fark.

HTML kodlarken div etiketini tüm yapınızı oluştururken kullanabilirsiniz. Aynı şekilde span'ı da kullanabilirsiniz ancak div kullanmanızı tavsiye ederim. span'ı ise küçük durumları kontrol ederken küçük css değişikliklerini verirken spanı sınıf vererek doğrudan inline css yazarak kullanabilirsiniz.

<p>lorem ipsum dolor <span class="color__red">sit</span> amet</p>

Yukaridaki örnek kod yapısında p etiketi içinde spanı verip sadece bir kelimeyi kırmızı renk verdiğim css sınıfını atadım.

<p>lorem ipsum dolor <span style="color:red;">sit</span> amet</p>

Aynı şekilde bu örnekte ise doğrudan inline css yazarak aynı işlemi yapmış oldum.

Günlük yaptığımız projelerden footerdeki altı çizili olması gereken bir alan örneği verelim.

<a href="harita_yolu">Haritayı görüntülemek için <span style="text-decoration:underline">tıklayınız</span></a>

Yukarıdaki örnekte ise tüm yazıya link verilmiş ama sadece tıklayınız yazısının altını çizili olarak belirttik.

html ev, div pencere kapı, span kedi

Son olarak neden div ile kodluyoruz? Buna şöyle cevap verelim. Eğer stillendirmede span'a display:block; yazıp tüm yapınızı span ile kurarsanız div ile yapılmış aynı yapıyı elde edersiniz.

HTML5 ile gelen özel etiketler gibi div ve span etiketinin bir özelliği yoktur, bu yüzden istediğiniz gibi kullanabilirsiniz 100% özgürlük. Yalnız Özel bir ricam olarak. Lütfen SINIF verirken ilgili alana göre bir sınıf verin. tailwind kullananları tenzih ederim:)

İyi çalışmalar dilerim.

Kaynak olarak developer.mozilla.org/en-US adresinden faydalandım meraklısı için buyrun:)