bağlantılar (<a> etiketi) ve başlıklar (<h1> etiketi) web standardında nasıl karıştırılır?


95

Web standartlarına göre başlık 1 ile bağlantı oluşturmak için doğru kod nedir?

bu mu

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

veya

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

Teşekkürler

Yanıtlar:


143

Web standartlarına göre, blok öğelerini satır içi öğelere koymanıza izin verilmez.

Olarak h1bir blok elemanıdır ve adoğru bir şekilde bir satır içi elemandır:

<h1><a href="#">This is a title</a></h1>

İşte daha fazlasını öğrenebilmeniz için bir bağlantı: w3 Görsel biçimlendirme modeli

Ancak HTML5'teki o (gibi blok seviyesindeki elemanları sarmak için geçerli olduğunu bir istisna vardır div, pya h*bağlantı etiketlerine). Çapalar dışındaki satır içi öğelerde blok düzeyindeki öğelerin sarılması yine de standartlara aykırıdır.


19
HTLM5'te bu değişti. Her iki örnek de geçerli olacaktır - validator.w3.org .
— Atadj

güzel bir. Yapması kolay bir hata ve her ikisi de doğal olarak satır içi öğelerin blok seviyesi öğelerinin soyundan gelmesi gerektiği mantığını doğrulayacak.
— bigmadwolf

@pushplaybang - Başlığın yalnızca bir kısmının tıklanabilir olması gerekmedikçe başlığı bir bağlantıya sarmanın daha anlamsal olduğunu söyleyebilirim (bunun için bir kullanım durumu düşünemiyorum). Ne olursa olsun, her ikisinin de html5'te desteklenmesi güzel.
— aaaaaa


2

Anladığım kadarıyla HTML5, blok düzeyindeki öğeleri bağlantı etiketlerine sarmanıza izin veriyor. Ancak eski tarayıcılarda hatalar görünebilir. Bununla Firefox 3.6.18 ile karşılaştım ve koduma moz-rs-heading = "" ekledim. Böylece stillerim kırıldı. Çevrenizdeki bir işi önemsiyorsanız, bağlantı etiketlerini div'lere sarabilirsiniz. Aşağıda, ek kodun neden çalıştığına dair daha iyi bir açıklama sağlanmaktadır http://oli.jp/2009/html5-block-level-links/


2

a > h1 metin seçiminde zorluğa neden olur

Metin Seçimi Sorunları

Her ikisi de HTML5'te tamamen geçerli olduğundan, kullanmak daha iyidir h1 > a

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.