Buton vs bağlantı
Hangi durumda <button> hangi durumda <a> kullanılacağını öğrenirsin.
Ne zaman a, ne zaman button?
Bir sayfa ile başka bir sayfa arasında geçiş yapacaksan <a> kullanırsın; bağlantı bir URL'i hedefler. Sayfa üzerinde bir eylem yapacaksan <button> kullanırsın; örneğin form gönder, menü aç, veriyi sırala.
Yanlış seçim erişilebilirliği bozar. <a> tıklanınca bir adrese gider; <button> tıklanınca bir eylem başlatır. Ekran okuyucu ve klavye kullanıcıları bu ayrımı bekler.
İki örnek karşılaştırması
Şu iki örneği karşılaştır: <a href="/hakkında">Hakkında</a> başka bir sayfaya götürür — gezinme. <button>Menüyü aç</button> ise aynı sayfada bir paneli açar — eylem.
Bir <button>'a type="button" verirsen form göndermesini engeller, yalnızca tıklama eylemi kalır. <a>'ya href olmadan düğme gibi davranması isteniyorsa, erişilebilirlik için yine de <button> tercih edilir.
Uygulama Menüye bağlantı ve buton ekle
Mevcut <ul> içine iki <li> ekle. Birinci <li>'nin içine bir bağlantı yaz: href ile /hakkında adresine, metni Hakkında. İkinci <li>'nin içine bir buton yaz: metni Menüyü aç.
Örnek çözümü göster
<li><a href="/hakkında">Hakkında</a></li>
<li><button>Menüyü aç</button></li>Kendini test et
-
Açılır bir menüyü açma/kapama görevi için hangisi daha uygundur?
- <a>
- <button>
- <span>
- <div>
Cevabı göster
<button> — Doğru. Menüyü açma bir eylemdir; <button> bunun içindir.
-
Buton etiketini yaz
<____ type="button">Menüyü aç</button>Cevabı göster
<button type="button">Menüyü aç</button> -
Görevi doğru etiketle eşleştir
- Sayfaya git
- <a> etiketi
- Formu gönder
- <button> etiketi
- Açılır menüyü aç
- Eylem: <button>
- Dış sayfaya geç
- Gezinme: <a>