HTML5 BÖLÜM Elementini Anlamak
HTML5, birkaç yıl önce sahneye çıktığında, SECTION öğesi de dahil olmak üzere, bir dizi yeni kesit elemanı ekledi. HTML5'in sunduğu yeni öğelerin çoğunun açık kullanımları vardır. Örneğin, eleman, bir web sayfasının makalelerini ve ana bölümlerini tanımlamak için kullanılır; bu öğe, sayfanın geri kalanı için kritik olmayan ilgili içeriği tanımlamak için kullanılır ve başlık, nav ve altbilgi oldukça açıklayıcıdır. Bununla birlikte, yeni eklenen SECTION öğesi biraz daha az açık.
Birçok kişi, HTML öğelerinin SECTION olduğuna ve gerçekten de aynı şey olduğuna inanmaktadır (bir web sayfasındaki içeriği içermek için kullanılan genel kapsayıcı öğeler). Gerçek şu ki, bu iki unsur, her ikisi de konteynır elemanları olmakla birlikte, genel bir şeydir. Hem SECTION öğesini hem de DIV öğesini kullanmanın belirli nedenleri vardır - ve bu makale bu farklılıkları açıklayacaktır.
Bölümler ve Div'ler
SECTION öğesi, bir web sayfasının ya da sitenin bir başka daha spesifik olmayan (makale ya da bir kenara benzeyen) semantik bir bölümü olarak tanımlanır. Sayfanın farklı bir bölümünü işaretlediğimde bu öğeyi kullanma eğilimindeyim - bu, ürünün başka sayfalarda veya bölümlerinde taşınabilecek ve kullanılabilecek bir bölüm. İsterseniz, içeriğin ayrı bir parçası veya içeriğin bir "bölümü" dir.
Buna karşın, bölme yapmak istediğiniz bölümler için, ancak semantik dışındaki amaçlar için DIV öğesini kullanırsınız. Kendimi CSS ile kullanmak için kendime "kanca" vermek için çok uyguluyorum. Semantiklere dayanan farklı bir içerik bölümü olmayabilir, ancak sayfamı istediğim düzeni elde etmek için dikte ettiğim bir şey.
Tüm Anlambilim Hakkında
Bu anlaşılması zor bir kavramdır, ancak DIV öğesi ile SECTION öğesi arasındaki tek fark semantiktir. Başka bir deyişle, bölen kod bölümünün anlamı .
DIV elemanının içerdiği herhangi bir içeriğin doğal bir anlamı yoktur. En iyi şeyler için kullanılır:
- CSS stilleri ve CSS stilleri için kancalar
- Yerleşim kapları
- JavaScript kancaları
- HTML’i daha kolay okuması için bölümler
DIV elemanı, belgelerinizi şekillendirmek ve sütunlar ve süslü düzenler oluşturmak için kanca eklediğimiz tek öğe oldu. Bu yüzden, web tasarımcıları DID öğeleriyle neyin halledildiğini bilen HTML ile bittik - web tasarımcıları “divitis” olarak adlandırıyorlardı. DIV öğesini kullanan WYSIWYG editörleri bile vardı. Aslında paragraflar yerine DIV öğesini kullanan HTML ile çalışıyorum!
HTML5 ile, daha semantik tanımlayıcı belgeler (gezinti için kullanmak ve açıklayıcı şekiller vb.) Oluşturmak ve bu elemanlardaki stilleri tanımlamak için bölümleme elemanlarını kullanmaya başlayabiliriz.
SPAN Elemanı Nedir?
Çoğu insanın DIV elementini düşündüklerinde düşündükleri diğer unsur elementtir. Bu eleman, DIV gibi, semantik bir eleman değildir. İçeriğin satır içi blokları (genellikle metin) etrafında stiller ve komut dosyaları için kanca eklemek için kullanabileceğiniz satır içi bir öğedir. Bu anlamda tam olarak DIV elemanı gibi, sadece bir blok elemandan ziyade satır içi. Bazı şekillerde, DIV'yi blok seviyesinde bir SPAN öğesi olarak düşünmek ve sadece HTML içeriğinin tüm blokları için SPAN olarak aynı şekilde kullanmak daha kolay olabilir.
HTML5'te benzer bir satır içi kesit öğesi yoktur.
Internet Explorer'ın Eski Sürümleri İçin
HTML5'i güvenilir bir şekilde algılamayan IE'nin önemli sürümlerini (IE 8 ve daha düşük) destekliyor olsanız bile, anlamsal olarak doğru HTML etiketlerini kullanmaktan korkmamanız gerekir. Semantikler, sizin ve ekibinizin gelecekte sayfayı yönetmesine yardımcı olacaktır (çünkü bu bölümün, MADDE elemanıyla çevrelenmişse, bu bölüm olduğunu bileceksiniz). Ayrıca, bu etiketleri tanıyan tarayıcılar bunları daha iyi destekleyecektir.
HTML5 semantik bölümleme öğelerini Internet Explorer ile hala kullanabilirsiniz, yalnızca HTML'yi etiketlerini tanımak için komut dosyası eklemeyi ve muhtemelen birkaç çevreleyen DIV öğesini eklemeniz gerekir.
DIV ve SECTION Elemanlarını Kullanma
Bunları doğru bir şekilde kullanıyorsanız, hem DIV ve SECTION öğelerini birlikte geçerli bir HTML5 belgesinde kullanabilirsiniz. Bu makalede gördüğünüz gibi, içeriğin semantik olarak ayrı bölümlerini tanımlamak için SECTION öğesini kullanırsınız ve DIV öğesini CSS ve JavaScript için kanca olarak kullanır ve semantik bir anlamı olmayan düzeni tanımlarsınız.
Jennifer Krynin tarafından yazılmış orijinal makale. 3/15/17 tarihinde Jeremy Girard tarafından düzenlendi