Neden div kullanmak zorundayız?

Bu sabah, bazı html ve haml yazarken, divlerin kullanım şeklinin saçma olduğu bana geldi. Div'ler neden ima edilmiyor? Şunu düşünün:

<div class="hero-img">
   <img src="http://whatever.com/this.jpg">
</div>

şuydu:

<hero-img>
   <img src="http://whatever.com/this.jpg">
</hero-img>

Elemanın "div sınıfı" kısmı varsayılırsa, HTML daha semantik ve eşleşen kapanış etiketleri ile daha fazla okunabilir olacaktı!

Bu, sahip olduğumuz HAML'ye benzer:

.content Hello, World!

Hangi olur:

<div class='content'>Hello, World!</div>

Bana öyle geliyor ki bunun tarayıcılarda çalışması için olması gereken tek şey, tarayıcıların mevcut bir html öğesi tanımı olmadan her öğeyi yorumlamaya başlayabilmesidir <div class="<element name>">.

Bu tamamen geriye dönük uyumlu olabilir; CSS ve jQuery seçicileri vb. için "div.hero-img" yine de çalışabilir ve öğeleri seçmek için gerekli sözdizimi olabilir.

Yeni web bileşenleri spesifikasyonunu biliyorum, ancak burada önerilenden çok daha karmaşık. Bir web sitesinin kaynağına bakmanın ve bunun gibi görünen html'yi görmenin ne kadar hoş olacağını hayal edebiliyor musunuz ?!

Öyleyse neden div kullanmalıyız?

Mozilla'nın html5 öğe listesine bakarsanız , her öğenin anlamsal bir anlamı vardır ve sonra ulaşırız <div>ve der ki:

"Özel bir anlamı olmayan genel bir kapsayıcıyı temsil eder."

..ve sonra html5'e ekledikleri keyfi öğeleri listelerler <details>.

Tabii ki, bu ima edilen div kavramı html spesifikasyonuna eklenmişse, standart hale gelmek on yıl sürecektir, bu da web zamanında bir milyon yıldır.

Yani bunun henüz gerçekleşmemiş olmasının iyi bir nedeni olduğunu düşünüyorum. Lütfen, bana açıkla!

Sorun 1: Beyaz boşluklar

Bunun genel olarak ortaya çıkmadığına inanıyorum. Bununla birlikte, bunun olmaması ve muhtemelen olmaması gereken iyi bir neden, white-spacesCSS'de classesöğe için birden çok sınıf tanımlaması, HTML'de ise tanımlamalarıdır attributes.

Aşağıdaki kodu açıklayın (veya bir tarayıcıdan ayrıştırmasını isteyin):

<pet family style=" ... ">
  <img src="my-pets-family.jpg"/>
</pet family>

familyHTML öğesinin ikinci sınıf veya öznitelik tanımı mı ? Muhtemelen bu sitenin ayrıştırıcısından gördüğünüz gibi, bunun bir özellik olduğunu düşünüyor.

Yani, istersem <div class="pet family">, aslında bir sınıf yerine bir sınıf kullanmamın iki ana nedeninden biri olan iki sınıfı tanımlamanın hiçbir yolu yoktur.

Sorun 2: İleri uyumluluk!

<div>Şu anda s'yi kullanmak , bizi (en azından bazılarımızı) kodumuza düzgün bir şekilde girintilemeye ve yorum yapmaya zorlar, bu da tüm programlama dilleri için iyi bir uygulamadır.

Bunun yerine, HTML bloklarını değişkenlere dönüştürmek, yeni programcıların HTML'de neyin spesifik olduğu ve neyin yapmadığı konusunda büyük karışıklığa neden olur .

Ayrıca, div'inizin sınıfları için yaptığınız aynı adla gelmediklerinden emin olmak için eski kodunuzu yeni HTML5 etiketleriyle karşılaştırmaya başlamanız gereken komik yan etkiye neden olacaktır ...

Aynı sorun için de geçerlidir variableskullanarak reserved wordsbazı dillerde. PHP bir dolar işareti ile çözdü, bu yüzden HTML'de benzer bir yaklaşım mevcut kullanımından çok daha iyi olmayan bir şeyle sonuçlanacaktır <div class="something">.

<div>Süslemenizi gıdıklayan yerine kullanmaktayız çünkü tarayıcı tarafından işlenmeyi ve oluşturmayı kolaylaştırır.

Karşı örnek olarak XML, istediğiniz herhangi bir etiket adının oluşturulmasına izin verir. Rasgele etiket adları oluşturma yeteneği bir işlem maliyetiyle birlikte gelir. XML ayrıştırıcıları, belgeyi ayrıştırırken / parçası olarak bir belgede kullanılan etiketlerin sözlüğünü oluşturmalıdır.

<div>Tarayıcıları kullanarak orada bir kap olduğunu ve kabı görmezden gelebileceğini veya kapta bir şey yapabilen zincirdeki başka bir araca geçirebileceğini bilin.

Web yazarlarının özel (standartlaştırılmamış) amaçlar için HTML'ye rastgele öğe adları eklemesine izin vermeyi öneriyorsunuz. Bunun büyük bir sorunu var: HTML standardına yeni öğeler eklemeyi tehlikeli hale getirecektir, çünkü çeşitli yazarlar aynı öğe adını özel amaçlar için zaten kullanıyor olabilirler, böylece sayfanın anlamını geriye dönük olarak değiştirirler. Tarayıcıların yeni sürümleri mevcut web sayfalarını bozduğunda insanlar mutlu olmazlar, bu nedenle bu hareketsizdir.

Aynı sorun özel amaçlar için rastgele özellik adlarının kullanılmasıdır. Bu nedenle HTML5, özel kullanım özellikleri için "data-" önekini zorunlu kılar, bu nedenle standarttaki yeni özelliklerle çarpışmazlar.

Div ve span semantik olarak nötr öğeler olarak tanımlanır, yani bunları semantiklerin gelecekteki tarayıcılarda değişeceğinden korkmadan özel amaçlar için kullanabilirsiniz. Elbette, bir sınıf adı eklemek için birkaç karakter daha gerektirir, ancak ileri uyumluluk buna değecektir.

Kendi örneğiniz, div'ların neden bu kadar gülünç olmadığını bir özellik gösterir.

<div class="hero-img">
  <img src="http://whatever.com/this.jpg">
</div>

imgEtiketi doğru bir şekilde kapatmadınız . Bazı etiketler, gibi img, br, hrve diğerleri herhangi bir içeriği yok ve bu nedenle kapalı olması değildir. Ayrıştırıcı bunu biliyor.

divO içerik içerdiğinden etiketi, diğer taraftan, kapalı olması gerekiyordu. Sadece kendi etiketinizi çırptıysanız, ayrıştırıcının etiketin kapatılıp kapanmayacağını düşünmesi konusunda hiçbir fikri yoktur.

Bazı öğelerin kapatılmasının ve diğerlerinin olmamasının nedeni, bu blog yazısının güzel açıkladığı SGML mirasından geliyor: http://www.colorglare.com/2014/02/03/to-close-or-not- to-close.html

Bu bir tanım meselesidir. Saf XML olan XHTML kullanıyorsanız, bu nedenle tam olarak tanımlanmışsa, burada bir önek aracılığıyla kendi ad alanınızı kullanabilirsiniz q::

<q:hero-img>
    <img src="http://whatever.com/this.jpg">
</q:hero-img>

(X) HTML'ye dönüştürmek için XML kullanırsanız, ücretsiz etiketli "HTML" gerçek HTML'nizden oluşturmak tamamen ücretsizdir <div class="hero-img">.

Bazı etiketlerde, kendi (sahte) URL'nizle bir ad alanı niteliği:

xmlns:q="http://..."

HTML'nin temel öğelerinden biri aslında önceden tanımlanmış etiket öğelerine sahip olmaktır. Bu yüzden.

Div class = bu "sınırlama" yı aşmanın bir yoludur.

İşte bu yüzden bu "zımni" yapıları görmüyorsunuz.

Bir div öğesinin amacı tek başına yapıdır. Öğeleri tek bir ortak öğe altında gruplandırmanıza olanak tanır. Beyaz boşluk, hız, render, anlambilim veya başka bir şeyle ilgisi yoktur. CSS ile stil ve javascript seçiciler açısından size yardımcı oluyor. Başka bir öğeyle değiştirirseniz, amacı değiştirirsiniz.

Kendi adlandırılmış öğenizi oluşturmak için, gösterdiğiniz gibi, arama motorlarının ve diğer araçların öğelerinizin ne anlama geldiğini bilmemesi konusunda bir sorunu vardır. "Hero-img" nedir ve "kahraman resmimden" farkı nedir ve sayfanızı ziyaret ettiğimde API'm bunu nasıl ele almalıdır? Bir tarayıcı bu öğeyi nasıl ele almalıdır? Blok seviyesi mi yoksa satır içi mi? Çok fazla soru.

Div etiketleri genellikle bir web sayfasına bölme veya bölüm uygulamak için kullanışlıdır. Div etiketini, diğer öğelerin uygulanabileceği bir kapsayıcı olarak kullanabilirsiniz. Ayrıca, belirli bir öğeye CSS ve bazı komut dosyaları uygulanmasına da yardımcı olacaktır.