<a> (bağlantı etiketi) href niteliği olmadan kullanmak geçerli mi?

Bir site oluşturmak için Twitter Bootstrap kullanıyorum ve işlevselliğinin çoğu, <a>Javascript'i çalıştıracak olsalar bile, bir şeyleri sarmalamaya bağlı . href="#"Bootstrap belgelerinin önerdiği taktikle ilgili sorunlar yaşadım , bu yüzden farklı bir çözüm bulmaya çalışıyordum.

Ama sonra hrefözelliği tamamen kaldırmayı denedim . Ben kullanıyorum <a class='bunch of classes' data-whatever='data'>ve gerisini Javascript hallediyor. Ve çalışıyor.

Yine de bir şey bana bunu yapmamamı söylüyor. Sağ? Demek istediğim, teknik <a>olarak bir şeye bağlantı olması gerekiyor, ama bunun neden bir sorun olduğundan tam olarak emin değilim . Yoksa öyle mi?

<a>Nchor eleman veya bazı içerikten sadece bir çapa olduğunu. Başlangıçta HTML spesifikasyonu adlandırılmış bağlantılar ( <a name="foo">) ve bağlantılı bağlantılar ( <a href="#foo">) için izin veriliyordu .

Parça tanımlayıcı artık bir [id]öznitelik belirtmek için kullanıldığından, adlandırılmış bağlantı biçimi daha az kullanılır (geriye dönük uyumluluk için yine de [name]öznitelikler belirtebilirsiniz ). Bir <a>bir olmadan eleman [href]özelliğinde hala geçerlidir .

Anlambilim ve stil söz konusu olduğunda, <a>öğe :linkbir [href]niteliği olmadığı sürece bir bağlantı ( ) değildir . Bunun bir yan etkisi, <a>olmayan bir öğenin [href]varsayılan olarak sekme sırasında olmayacak olmasıdır.

Gerçek soru, <a>tek başına elemanın a'nın uygun bir temsili olup olmadığıdır <button>. Anlamsal düzeyde, a linkve a arasında belirgin bir fark vardır button.

Düğme, tıklandığında bir eylemin gerçekleşmesine neden olan bir şeydir.

Bağlantı, geçerli belgede gezinmede değişikliğe neden olan bir düğmedir. Oluşan gezinme, parça tanımlayıcıları ( #foo) durumunda belge içinde hareket edebilir veya url'ler ( /bar) durumunda yeni bir belgeye geçebilir .

Bağlantılar özel bir düğme türü olduğundan, alternatif işlevleri gerçekleştirmek için genellikle eylemlerini geçersiz kılarlar. Bir çapayı düğme olarak kullanmaya devam etmek tutarlılık açısından tamamdır, ancak semantik olarak tam olarak doğru olmasa da.

Bir <a>öğeyi (veya <span>, veya <div>) düğme olarak kullanmanın anlamı ve erişilebilirliği konusunda endişeleriniz varsa , aşağıdaki nitelikleri eklemelisiniz:

<a role="button" tabindex="0" ...>...</a>

Düğme rolü özellikle eleman yatan unsur olmuş olabilir ne olursa olsun anlambilim için geçersiz kılınmış olarak bir düğme olarak tedavi ediliyor bu kullanıcıyı söyler.

İçin <span>ve <div>elemanları için JavaScript anahtar dinleyicileri eklemek isteyebilirsiniz Spaceveya Entertetiğe clickolay. <a href>ve <button>öğeler bunu varsayılan olarak yapar, ancak düğme olmayan öğeler yapmaz. Bazen clicktetiği farklı bir anahtara bağlamak daha mantıklıdır . Örneğin, bir web uygulamasındaki bir "yardım" düğmesine bağlı olabilir F1.

Cevabınızı burada bulabileceğinizi düşünüyorum: href niteliği olmayan bir bağlantı etiketi güvenli midir?

Ayrıca href ile hiçbir bağlantı işlemi istemiyorsanız, bunu şu şekilde kullanabilirsiniz:

<a href="javascript:void(0);">something</a>

Evet, bağlantı etiketini bir hreföznitelik olmadan kullanmak geçerlidir .

Eğer aeleman hiç sahip hrefniteliğini, daha sonra eleman alakalı olsaydı bir bağlantı aksi takdirde sadece öğenin içeriğini oluşan, yerleştirilmemiş olabilir nerede için yer tutucu temsil eder.

Evet, kullanabilirsiniz classve diğer özellikler, ancak kullanamazsınız target, download, rel, hreflang, vetype .

target, download, rel, hreflang, Ve typehref özelliği yoksa nitelikler ihmal edilmelidir.

" Yapmalı mıyım? " Kısmına gelince , ilk alıntıya bakın: " Bir bağlantı başka türlü konuyla ilgili olsaydı nereye yerleştirilmiş olabilirdi ". Bu yüzden, " JavaScript olmasaydı, bu etiketi bağlantı olarak kullanır mıydım? " Diye sorardım . Cevap evet ise, o zaman evet,<a> onsuz kullanmalısınız href. Hayır ise, o zaman yine de kullanırdım, çünkü üretkenlik benim için uç durum anlamından daha önemlidir, ama bu sadece benim kişisel görüşüm.

Ek olarak, farklı davranış ve stillere dikkat etmelisiniz (örneğin, alt çizgi yok, imleç yok, a değil ).:link

Kaynak: W3C HTML5 Önerisi

Geçerlidir. Örneğin, modları (veya yanıt veren benzer şeyleri data-toggleve data-targetöznitelikleri) göstermek için kullanabilirsiniz.

Gibi bir şey:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Burada bir modal göstermek için a ayerine etiket olarak daha iyi olan font-awesome simgesini kullanıyorum button. Ayrıca ayar role="button", işaretçinin bir eylem türüne dönüşmesini sağlar. Ya hrefda olmadan role="button"imleç işaretçisi değişmez.