Bir çapanın içine div koymak hiç doğru mu?

Bir satır öğesinin satır içi öğenin içine yerleştirilmesinin bir HTML günahı olduğunu duydum:

<a href="http://www.mydomain.com"><div>
What we have here is a problem. 
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>

Peki ya dış çapayı display:blockstil sayfasında olduğu gibi şekillendirirseniz ne olur? Hala yanlış mı? Blok düzeyinde ve satır içi öğelerde HTML 4.01 spesifikasyonu böyle düşünüyor gibi görünüyor:

Stil sayfaları, bir öğenin blok veya satır içi olarak oluşturulup oluşturulmadığı da dahil olmak üzere rastgele öğelerin oluşturulmasını belirtmek için araçlar sağlar. Liste öğeleri için satır içi bir stil gibi bazı durumlarda, bu uygun olabilir, ancak genel olarak, yazarların HTML öğelerinin geleneksel yorumunu bu şekilde geçersiz kılmaktan vazgeçirilir.

Bu sorunla ilgili başka ipucu veren var mı?

Hazırladığınız HTML sürümüne bağlı olarak:

• HTML 5 ,<a>"içinde hiçbir etkileşimli içerik olmadığı sürece (örneğin, düğmeler veya diğer bağlantılar)" tüm paragraflar, listeler, tablolar vb. Tüm bölümlerin etrafına sarılabileceğinibelirtir.

• HTML 4.01 ,<a>öğelerin yalnızca satır içi öğeler içerebileceğinibelirtir. A<div>bir blok öğesidir , bu nedenle bir içinde görünmeyebilir<a>.

  Tabii ki, bir satır içi öğeyi bir blok gibi görünecek ya da gerçekten bir satırın satır içinde işlenecek şekilde biçimlendirmek için özgürsünüz. Terimlerin inlineve blockHTML'nin kullanımı , öğelerin belgenin semantik yapısı ile ilişkisini ifade ederken, CSS'deki aynı terimler öğelerin görsel stiliyle daha fazla ilgilidir. Satır içi öğelerin bloklu bir şekilde görüntülenmesini sağlarsanız sorun olmaz.

  Bununla birlikte, örneğin ekran okuyucu gibi yardımcı bir teknoloji aracılığıyla erişildiğinde veya gerçekten de güçlü Googlebot tarafından incelendiğinde, CSS'nin bulunmadığı durumlarda dokümanın yapısının hala anlamlı olduğundan emin olmalısınız.

Hayır geçerli kılmayacak, ancak evet genellikle modern tarayıcılarda çalışacaktır. Bununla birlikte, çapanızın içinde bir açıklık kullanın ve display: blocküzerine de yerleştirin, kesinlikle her yerde çalışacak ve geçerli olacak!

W3C doc gibi kavramları kullanmaz yanlış ve günah , ama sanki o kullanıyor araçlar temin , uygun olabilir ve cesaretini .

Aslında, 4. bölümün ikinci paragrafında , 4.01 özellikleri kelimelerini şu şekilde sıralamaktadır:

Bu belgede "ZORUNLU", "ZORUNLU DEĞİL", "GEREKLİ", "SHALL", "SHALL NOT", "SHOULD", "ÖNERİLMEMELİ", "ÖNERİLEN", "MAYIS" ve "İSTEĞE BAĞLI" anahtar kelimeleri [RFC2119] 'da anlatıldığı gibi yorumlanmalıdır. Ancak, okunabilirlik için, bu sözcükler bu belirtimdeki tüm büyük harflerde görünmez.

Bunu göz önünde bulundurarak, ben kesin ifadesi olduğunu düşünüyoruz 7.5.3 Blok seviyesinden ve satır içi öğeler yazan yere

Genel olarak, satır içi öğeler yalnızca veri ve diğer satır içi öğeleri içerebilir.

"Genellikle" koşulu, HTML 4.01'in satır içi öğelerin blok öğeleri içermesine izin verdiğini söylemek için yeterli belirsizliği ortaya koymaktadır.

Kesinlikle, CSS2, tanımladığınız amaca uygun gibi görünen bir satır içi blok özellikli bir görüntüleme özelliği değerine sahiptir . Hiç yaygın olarak desteklenip desteklenmediğinden emin değilim, ancak birileri bu tür davranışlara ihtiyaç duyduğunu öngörüyor.

DTD burada daha az bağışlayıcı görünüyor, ancak DTD metni spesifikasyona göre değişiyor:

HTML 4.01 belirtimi, DTD'lerde ifade edilemeyen ek sözdizimsel kısıtlamalar içerir.

Başka bir yorumda, bir bloğu bir sabitleyiciye sararak etkin hale getirmek istediğinizi önerirsiniz. HTML'nin bunu yasakladığına inanmıyorum ve CSS buna açıkça izin veriyor. Bu yüzden, başlığın doğru olup olmadığı hakkındaki soruya cevap vermek için evet diyorum. Standartlara göre, bazen doğrudur.

HTML5 spesifikasyonu ile ... Artık satır içi öğenin içine blok düzeyinde bir öğe koymak mümkündür. Bu yüzden şimdi bir 'a' öğesinin içine 'div' veya 'h1' koymak mükemmel bir şekilde uygundur.

Sen koyamazsınız <div>iç <a>- bu geçerli değil (X) HTML.

Display: block ile bir yayılma alanı stilinde olsanız bile, içine blok düzeyinde öğeler koyamazsınız: (X) HTML, (X) HTML DTD'ye (hangisini kullanırsanız kullanın) nasıl olursa olsun, yine de şeyleri değiştirir.

Tarayıcı muhtemelen istediğiniz gibi görüntüler, ancak bu doğru yapmaz.

Http://www.w3.org/TR/REC-html40/sgml/dtd.html adresinde HTML 4 için bir DTD var . Bu DTD, bir DTD'nin XML ve HTML 4'ü, özellikle "geçici" lezzetini yönetmesi sınırlamasıyla, spesifikasyonun makine ile işlenebilir biçimidir, "yasal" XML olmayan birçok şeye izin verir. Yine de, şartnamelerin niyetini kodlamaya yaklaştığını düşünüyorum.

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

Bu hiyerarşide listelenen etiketleri izin verilen toplam etiket olarak yorumlardım.

Spesifikasyon "satır içi elemanlar" diyebilse de , bir blok elemanının ekran türünü satır içi olarak bildirerek niyetin etrafından dolaşabileceğinizden emin değilim . Satır içi etiketler, bunları nasıl kötüye kullanabileceğinizden bağımsız olarak farklı anlambilime sahiptir.

Öte yandan, dahil edilmesinin specialyuvalama Aelemanlarına izin verdiğini merak uyandırıcı buluyorum . Muhtemelen XML sözdizimsel olarak doğru olsa bile buna izin vermeyen bazı güçlü ifadeler var, ancak sorunun konusu olmadığı için bunu daha fazla sürdürmeyeceğim.

Blok düzeyi öğeler HTML5'teki etiketlerle <div>sarılabilir <a>. Bir rağmen <div>bir olduğu düşünülür akış içerik konteyner / sarıcı ve <a>sitesindeki kabul edilir akış içeriğine göre MDN . Anlamsal olarak, blok düzeyinde elemanlar olarak işlev gören satır içi elemanlar oluşturmak daha iyi olabilir.

Div'ları bağlantı etiketlerinin içine yerleştirme anlamsal sorununu önlemek istiyorsanız, bağlantı etiketini div'lerle aynı düzeye yerleştirin, hepsini konum: göreceli olan bir kapla sarın, bağlantı etiketi konumunuzu kesin yapın: kabı doldurun. Ayrıca içerik akışının sonunda değilse, içeriğin üzerine yerleştirmek için oraya bir z-endeksi attığınızdan emin olun.

Önerildiği gibi bir biçimlendirme kodu ekledim:

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

Ve css:

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

Eğer <a>blok yapma çabasına gidecekseniz , neden <a>div'in içine koymuyorsunuz, bir blok elemanı olarak size aynı etkiyi verecektir.

Bir blok stili öğeye değiştirirseniz, hayır, artık 'yanlış' değildir, ancak muhtemelen doğrulanmayacaktır. Ama yaptığınız şeyi yapmak pek mantıklı değil. Bağlantı etiketini yalnızca iç div olmayan bir blok düzeyi öğesi olarak tutmalı veya div'i dışarıya koymalısınız.

Yanlış. Bir açıklık kullanın .

Çoğu zaman insanlar bu soruyu sorduklarında, sadece div içeren bir site oluşturduklarını ve şimdi div'den birinin bir bağlantı olması gerektiğini düşünüyorum.

Birisinin sadece bir div içinde bir bağlantı yapmak için bir çapa etiketi içinde şeffaf bir boş resim, PNG kullandığını gördüm ve görüntü div ile aynı boyuttaydı.

Aslında çok üzücü ... ama işe yarıyor ...

":: before" sözde elemanı ekleyerek bunu başarabilirsiniz

Saf CSS Hile;)

a:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

Tıpkı bir FYI gibi.

Hedefiniz div'inizi tıklanabilir yapmaksa jQuery / Java Script kullanabilirsiniz.

Div'inizi şu şekilde tanımlayın:

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

Daha sonra jQuery şu şekilde uygulanır:

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

Bu aynı zamanda birden çok div için de işe yarayacaktır - Tom'un bu konudaki yorumuna göre