HTML Div ve Span Nedir?

Site tasarımı ile ilgilenen pek çok kişinin merak ettiği “HTML div ve span nedir?” sorusunun cevabını merak ediyor. Span ve Div, bir web sayfasının ilgili bölümlerini birlikte kategorileyen genel HTML öğelerine verilen isimdir. Ancak, bu iki öğe farklı işlevlere hizmet eder. Örneğin, blok düzeyinde düzenleme ve sayfa öğelerinin stili için bir div öğesi kullanılır. Ancak, satır içi düzenleme ve stil için bir span öğesi kullanılmaktadır. Bu iki öğeyi daha detaylı inceleyerek ne olduklarına bir göz atalım.

Div Nedir?

Div, genellikle sayfa içeriklerini bloklara bölmek için kullanılan genel bir blok öğesidir. Bu durumdaki blok öğesi, yeni bir satır başlatan ve tüm sayfaya ya da ana kapsayıcı sayfaya eşit bir genişliğe sahip bir sayfa öğesi olarak karşımıza çıkar.

Paragrafları, resimleri, başlıkları ve bağlantıları bir kategori haline getirmek için div kullanımını çok sık göreceksiniz. Örnek vermek gerekirse, üç paragrafa sahip bir makale bir div’e eklenirken, bağlantılar içeren bir gezinme menüsü başka bir div’e ekleyebilirsiniz. Böylece, div’leri bu şekilde kullanarak bir sayfanın farklı bölümlerini tanımlamayı ve bu bölümler için CSS stil uygulamayı daha kolay bir hale getirebilirsiniz.

Div Etiketinin Avantajları Nelerdir?

Web site kullanımında div kullanmanın pek çok faydası vardır. Aşağıda yer alan maddelerde div etiketinin faydalarını görebilirsiniz:

Sayfalarınız daha hızlı yüklenir: Web sitenizi div ile tasarladığınızda daha az kod kullanmış olursunuz ve siteniz daha hızlı yüklenir.

• Düşük barındırma ücretlerine sahip olursunuz: Daha hızlı yüklenen siteler bant genişliğinin daha az kullanılması anlamına gelir. Bunun sonucunda ise barındırma hizmeti aldığınız servise daha az ücret ödersiniz.
• Daha çok verimlilik: Bu etiket ile içerik düzeniniz stillere ayrılmış olur. Böylelikle CSS ile daha kolay bir şekilde yeniden tasarlayabilir ve kolaylıkla güncelleme yapabilirsiniz.
• SEO’nuz gelişir: Sitenizde yer alacak daha az kod ve kodların daha düzenli bir şekilde olması, arama motorlarının sitenizi daha kolay bir şekilde indekslemesi anlamına gelir. Büyük arama motorları, div ile düzenlenmiş sitelere öncelik verir. Bu da SEO’nuzu geliştireceği anlamına gelir.
• Yeniden tasarlamak daha uygun: Farklı tasarımla kolay bir şekilde sitenize adapte edebilirsiniz.

Div etiketi bir blok düzeyinde yer alan unsurdur. Bu nedenle, açıldığında ve kapandığında, bir alt satıra geçmektedir.

Div Etiketi ve Site Yapısı

Div etiketinin yaygın kullanım alanı sayfa düzenidir. CSS aracılığı ile div etiketi site içerisinde her alana yerleştirilebilir. Örnek site yapısı içerisindeki alanlar ise şöyledir:

• Header: Site başlığı ve açıklama içeriğinin yer aldığı bölümdür.
• Nav: Menüler ve gezinti nav alanı içerisinde yer alır.
• Section: Genel bölümlerin yer aldığı kısımdır. Bir başlığa ve alt alana sahip olan bir makale burada yer alabilir.
• Article: Makale ya da bir yazının yer aldığı bölümdür. Burada bir blog yazısı, haber gibi bir içerik olabilir.
• Aside: Ana içerikten ayrı bir şekilde yazılan bağlantının yer aldığı bölümdür.
• Footer: Altalanın yer aldığı kısımdır. Bu kısım bir sayfanın alt alanı olabileceği gibi bir bölümün alt alanı da olabilir.

Span Nedir?

Span öğesi, genel olarak satır içi içeriğin bir bölümüne stil uygulamak için kullanılan genel bir satır içi öğesidir. Satır içi öğesi yeni bir satır başlatmaz ve sayfada yalnızca içeriği kadar yer kaplar. Bu etiketleri, span içerikle aynı hizada görünen metin, bağlantı, resim ve diğer HTML öğelerinin küçük bölümlerinde kullanılır.

HTML Div ve Span Arasındaki Fark Nedir?

Div’ler ve span alanları en yaygın HTML öğeleri arasında yer alır. HTML sayfalarınızı tam olarak belirlediğiniz özelliklere göre yapılandırmanıza ve biçimlendirmenize sağlarlar. Her iki etiketin de sahip olduğu özellikler vardır. Bu etiketlerin aralarındaki farkları anlamak, her birini doğru ve yalnızca gerektiğinde kullanmanızı sağlar. Sonuç olarak, bu sizi yolda çok fazla kafa karışıklığından ve çöp olan koddan kurtaracaktır.

HTML div ve span etiketleri hem CSS hem de web sayfa tasarımında önemli bir role sahiptir. Bu kodlar, web sayfaların düzenlerinde ihtiyaç duyulur ve sayfaların belirli kısımlarında bu etiketlere özellikler atar. Div’ler web düzeninde kullanılırken, span etiketi genelde tabloların yerini almaktadır. Her iki etiketin de nasıl çalıştığını anlamak için web sayfasının tasarımında CSS kullanmak önemli bir yere sahiptir.

HTML Div ve Span Ne Zaman Kullanılmalı?

Yukarıdaki örneklerde gösterildiği gibi, div ve span, web sayfalarını şekillendirmek ve yapılandırmak için kullanışlı etiketlerdir. Bu öğelere id ya da sınıf nitelikleri atamak ve bunları CSS kurallarıyla bir araya getirmek basit bir işlemdir. Genellikle bir metin satırındaki bir kelime gibi satır içi içeriğe stil vermek için kullanılan span etiketlerini görürsünüz. Div etiketleri ise daha büyük içerik bölümlerine stil vermeli veya alt öğeler için bir kap görevi görmelidir. Daha karmaşık web sayfaları, genellikle farklı sayfa bölgelerini ve alt bölgeleri temsil etmek için iç içe yerleştirerek div’leri yoğun bir şekilde kullanır.

Yeni bir sayfa öğesi eklemek istediğiniz her zaman bu etiketleri kullanmak caziptir. Örneğin, <p> etiketi yerine <div> etiketi kullanmak iyi sonuçlar doğurur. Bununla birlikte, bu etiketlerin kullanımlarını mümkün olduğunca sınırlamak, web geliştirme noktasında iyi bir uygulama olarak kabul edilmektedir.