Hangisi daha doğru: <h1> <a>… </a> </h1> VEYA <a> <h1>… </h1> </a>

Her iki Are <h1><a ...> ... </a></h1>ve <a ...><h1> ... </h1></a>geçerli HTML veya sadece bir doğrudur? Eğer ikisi de doğruysa, anlam bakımından farklı mıdır?

Her iki sürüm de doğrudur. Aralarındaki en büyük fark, <h1><a>..</a></h1>sadece başlıktaki metnin tıklanabilir olması.

<a>Etrafına koyarsanız <h1>ve css displayözelliği block(varsayılan olarak budur), tüm blok ( <h1>içinde bulunan kabın genişliğinin yüksekliği ve% 100'ü <h1>) tıklanabilir olacaktır.

Tarihsel olarak bir satır öğesini bir satır içi öğenin içine koyamazdınız, ancak artık HTML5 için geçerli değildir. <h1><a>..</a></h1>Yine de yaklaşımın daha geleneksel olduğunu düşünüyorum .

Başlığa bir çapa koymak istediğinizde <a id="my-anchor"><h1>..</h1></a>, idya da nameniteliğini şu şekilde kullanmaktan daha iyi bir yaklaşım : <h1 id="my-anchor">..</h1>veya<h1 name="my-anchor">..</h1>

HTML 5 öncesi bu

<a><h1>..</h1></a>

doğrulanmayacak. HTML 5'te kullanabilirsiniz. Ancak, ben bunu kullanacağım:

<h1><a>..</a></h1>

<a> içine <h1> değerinden fazla eklemeniz gerekmedikçe

<a><h1></h1></a>değil W3C geçerli ... Temel olarak, koyamazsınız olan blok elemanları içine satır içi öğeler

<h1><a>..</a></h1>ve <a><h1>..</h1></a>stil sayfaları oluşturmayı etkilemediğinde neredeyse aynı şekilde davrandılar. Neredeyse ama tam olarak değil. Sekme tuşunu kullanarak gezinir veya bir bağlantıya başka bir şekilde odaklanırsanız, çoğu tarayıcıda bağlantının etrafında bir "odaklama dikdörtgeni" görünür. Çünkü <h1><a>..</a></h1>, bu dikdörtgen yalnızca bağlantı metninin etrafındadır. İçin <a><h1>..</h1></a>biçimlendirme yaptığı için, dikdörtgen, mevcut yatay boşluk boyunca uzanan aeleman oluşturma bir blok elemanı varsayılan% 100 genişliği işgal.

Aşağıda, odaklanmanın <a href=foo><h1>link</h1></a>Chrome tarafından nasıl oluşturulduğu gösterilmektedir :

Bu, örneğin stilleri bağlantılar için bir arka plan rengi ayarlayarak şekillendirirseniz, efektlerin benzer şekilde farklı olduğu anlamına gelir.

Tarihsel olarak, <a><h1>..</h1></a>HTML 2.0'da geçersiz ilan edildi ve sonraki HTML özellikleri bunu izledi, ancak HTML5 bunu değiştirdi ve geçerli olarak ilan etti. Resmi tanım tarayıcıları etkilemedi, sadece doğrulayıcıları etkiledi. Bununla birlikte, bazı kullanıcı aracılarının (muhtemelen normal tarayıcılar değil, örneğin özel HTML oluşturucular, veri çıkarıcılar, dönüştürücüler, vb.) <a><h1>..</h1></a>Spesifikasyonlarda izin verilmediği için düzgün işlememesi uzaktan mümkündür .

Bir başlıkta başlık veya metin oluşturmak için nadiren iyi bir neden vardır. (O. Kullanılabilirlik çoğunlukla mantıksız ve kötü) Ama (bir başlık veya metin) bir başlık potansiyel yaparken benzer bir soru sıklıkla ortaya çıkmış hedefi örneğin kullanarak bir bağlantı için <h2><a name=foo>...</a></h2>karşı <a name=foo><h2>...</h2></a>. Benzer düşünceler bunun için de geçerlidir (her ikisi de işe yarar, bir fark olabilir, çünkü ikincisi aöğeyi bir blok yapar ve HTML5'ten önce yalnızca öncekine resmi olarak izin verilir). Ancak ek olarak, her iki türde modası geçmiş olan ve kullanan idbaşlık elemanı doğrudan özelliğini şimdi önerilir: <h2 id=foo>...</h2>.

H1 elemanları blok seviyeli elemanlardır ve ankrajlar satır içi elemanlardır. Bir blok düzeyi öğesinde satır içi öğeye sahip olmanıza izin verilir, ancak bunun tersi olmaz. Kutu modelini ve HTML spesifikasyonunu düşündüğünüzde bu mantıklıdır.

Sonuç olarak en iyi yol:

<h1><a href="#">Link</a></h1>

köprü <a href="…">/ kullanmak a:linkistiyor musunuz, yoksa başlığınıza çapa mı eklemek istiyorsunuz? bir çapa eklemek istiyorsanız, sadece bir kimlik atayabilirsiniz <h1 id="heading">. daha sonra olarak bağlayabilirsiniz page.htm#heading.

başlığı tıklanabilir (bağlantı) yapmak istiyorsanız, önce <h1><a></a></h1>/ h1 > a- blocklevel öğelerini ve içindeki satır içi öğeleri kullanın

Ayrıca, stil hiyerarşisi farklılıkları vardır. Varsa <h1><a href="#">Heading here</a></h1>, çapanın stilleri h1 öğesinin stillerini geçersiz kılacaktır. Misal:

a {color:red;font-size:30px;line-height:30px;}

AŞIRI GELECEK

h1 {color:blue;font-size:40px;line-height:40px;}