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>

Sıradaki ders: Özet - Çok dilli menü

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler