Web tasarımında bağlantılar, kullanıcıları bir sayfadan başka bir sayfaya veya internet üzerindeki başka kaynaklara yönlendirmek için kullanılır. HTML, bağlantı elemanları eklemek için çok sayıda özellik sunar. Bu içerikte, HTML’deki bağlantı elemanları hakkında bilmeniz gereken her şeyi öğrenecek, web sayfalarınızı daha etkili hale getirmek için kullanabileceğiniz ipuçları edineceksiniz.
HTML Bağlantı Etiketi: <a>
HTML’de bir sayfaya bağlantı eklemek için kullanılan temel etiket <a> etiketidir. Bu etiketin içinde href özelliği yer alır ve bu özellik, bağlantının hedef URL’sini belirtir. Kullanıcı bu bağlantıya tıkladığında, belirttiğiniz URL’ye yönlendirilir.
Örnek:
<a href="https://www.ornek.com">Örnek Web Sitesine Git</a>
Bu örnekte:
<a>: Bağlantıyı tanımlar.href: Bağlantının hedef URL’sini belirtir.- “Örnek Web Sitesine Git”: Bağlantıya tıklanabilir metni belirtir.
Bağlantı Yönlendirme Türleri
HTML bağlantıları, farklı hedeflere yönlendirme yapacak şekilde özelleştirilebilir. İşte en yaygın yönlendirme türleri:
- Yeni Sekme veya Pencere Açma: Bağlantıya tıklanıldığında yeni bir sekme veya pencere açılmasını sağlamak için
target="_blank"özelliği kullanılır.
Örnek:
<a href="https://www.ornek.com" target="_blank">Yeni Sekmede Aç</a>
Bu örnekte, kullanıcı “Yeni Sekmede Aç” bağlantısına tıkladığında, bağlantı yeni bir sekmede açılır.
- Aynı Sayfada Açma: Bağlantı tıklandığında, hedef sayfa mevcut sayfada açılır. Bu, varsayılan davranıştır ve
target="_self"kullanılarak belirtilir (bu özellik genellikle belirtilmeden de çalışır).
Örnek:
<a href="https://www.ornek.com" target="_self">Aynı Sayfada Aç</a>
- Bağlantıya Duyarlı Açma: Eğer bir sayfa başka bir öğeye yönlendirilmek isteniyorsa,
idözelliği kullanılır. Kullanıcı, aynı sayfada belirli bir bölüme gitmek için bu bağlantıyı tıklayabilir.
Örnek:
<a href="#bölüm2">Bölüm 2'ye Git</a>
...
<h2 id="bölüm2">Bölüm 2</h2>
Bu örnekte, kullanıcı “Bölüm 2’ye Git” bağlantısına tıkladığında, sayfanın içinde yer alan “Bölüm 2” başlığına yönlendirilir.
Bağlantı Elemanlarında Diğer Özellikler
- Title Özelliği: Bağlantının üzerine gelindiğinde kullanıcıya ek bilgi sunmak için
titleözelliği kullanılabilir.
Örnek:
<a href="https://www.ornek.com" title="Örnek Web Sitesi hakkında daha fazla bilgi">Örnek Web Sitesine Git</a>
- Mailto Bağlantıları: Kullanıcıların e-posta göndermesini sağlamak için
mailto:protokolünü kullanabilirsiniz. Bu, e-posta istemcisinin açılmasını sağlar.
Örnek:
<a href="mailto:[email protected]">E-posta Gönder</a>
- Telefon Bağlantıları: Akıllı telefonlarda veya tabletlerde kullanıcıların doğrudan telefon numarasını aramasını sağlamak için
tel:protokolü kullanılır.
Örnek:
<a href="tel:+1234567890">Bizi Ara</a>
Bağlantı SEO ve Erişilebilirlik İçin İpuçları
- SEO İçin Bağlantı Metni: Bağlantılarınızın metni, SEO açısından önemlidir. Bağlantının içeriği, hedef sayfanın içeriği hakkında bilgi verir. Bu nedenle, bağlantılarınızın metni açıklayıcı ve anlamlı olmalıdır.
Örnek: Yanlış: <a href="https://www.ornek.com">Buraya Tıklayın</a> Doğru: <a href="https://www.ornek.com">HTML Bağlantı Elemanları Hakkında Daha Fazla Bilgi Edinin</a>
- Dış Bağlantılarda
rel="nofollow"Kullanımı: Dış bağlantılar içinrel="nofollow"özelliği ekleyerek, arama motorlarına bu bağlantıyı takip etmeme talimatı verebilirsiniz. Bu, SEO açısından daha kontrollü bir bağlantı stratejisi sağlar.
Örnek:
<a href="https://www.ornek.com" rel="nofollow">Örnek Web Sitesine Git</a>
- Erişilebilirlik İçin Bağlantı Metni: Bağlantılar için açıklayıcı metinler kullanmak, özellikle ekran okuyucu kullanan engelli bireyler için önemlidir. “Buraya tıklayın” gibi belirsiz ifadeler yerine, bağlantının amacını net bir şekilde açıklayan ifadeler kullanın.
HTML Bağlantı Elemanları Özet
- Temel Bağlantı Etiketi:
<a href="url">Metin</a> - Yeni Sekme Açma:
<a href="url" target="_blank">Metin</a> - E-posta Gönderme:
<a href="mailto:[email protected]">E-posta Gönder</a> - Telefon Araması:
<a href="tel:+1234567890">Bizi Ara</a> - Açıklayıcı Bağlantı Metni: SEO ve erişilebilirlik için bağlantı metnini anlamlı ve açıklayıcı yapın.