HTML’de <a> etiketi

Bağlantı Oluşturmanın Temel Yolu (Ama Sandığından Çok Daha Fazlası)

İnterneti internet yapan şey nedir biliyor musun?
Ne CSS, ne JavaScript…
Bağlantılar.

Evet, o masum görünen <a> etiketi var ya…
O olmasa web, yalnız sayfaların sessiz çığlığı olurdu 🥲

Bu yazıda <a> etiketini:

• Sadece nasıl kullanılır değil
• Nasıl doğru, nasıl akıllıca, nasıl profesyonelce kullanılır

onu öğreneceğiz.

Kahveni al ☕
Link atmaya başlıyoruz 🔗

<a> Etiketi Nedir? (Anchor = Çapa)

<a> etiketi, İngilizce anchor kelimesinden gelir.
Yani “çapa”.

Bir noktaya tutunur ve seni oraya taşır.

Web dünyasında anlamı şudur:
👉 Kullanıcıyı bir yerden başka bir yere götüren kapı

Bu yer:

• Başka bir web sitesi olabilir
• Aynı sitenin başka bir sayfası olabilir
• Aynı sayfanın altı olabilir
• Mail uygulaması olabilir
• Telefon araması bile olabilir 📞

Yani <a> etiketi tam bir gezgin 🧭

En Temel Kullanım (Linklerin Atası)

Önce DNA’sını çözelim:

<a href="https://www.google.com">Google’a Git</a>

Burada olan biten şeyler:

• <a> → Link başlar
• href → “Nereye gidiyoruz?” sorusunun cevabı
• Google’a Git → Kullanıcının gördüğü yazı

🧠 Bilgelik notu:
href yoksa <a> çalışmaz.
O zaman sadece link gibi görünen bir hayal olur.

href Nedir? (Linkin Kalbi ❤️)

href = Hypertext Reference

Yani:

“Bu linke tıklanınca tarayıcı nereye gitsin?”

Örnekler:

1️⃣ Dış Site

<a href="https://openai.com">OpenAI</a>

2️⃣ Aynı Site İçindeki Sayfa

<a href="hakkimizda.html">Hakkımızda</a>

3️⃣ Klasör İçindeki Sayfa

<a href="pages/iletisim.html">İletişim</a>

📌 Pratik ipucu:
Link çalışmıyorsa %90 ihtimalle dosya yolu yanlıştır.

Yeni Sekmede Açmak (target="_blank")

Kullanıcı linke tıkladı…
Ve sen diyorsun ki:

“Git ama beni terk etme.”

İşte bu durumda:

<a href="https://github.com" target="_blank">
  GitHub
</a>

Peki bu yeterli mi?

Profesyonel cevap: Hayır.

Güvenli Versiyon (Senior Developer Mood 😎)

<a 
  href="https://github.com"
  target="_blank"
  rel="noopener noreferrer"
>
  GitHub
</a>

🛡️ Bu ne işe yarar?

• Yeni sekmenin senin sayfanı kontrol etmesini engeller
• Performans ve güvenlik sağlar

Küçük detay, büyük fark.

Mail Gönderen Link (HTML Sürprizi ✉️)

Form yapmadan, JavaScript yazmadan:

<a href="mailto:ornek@mail.com">
  Bana Mail At
</a>

Daha havalısı:

<a href="mailto:ornek@mail.com?subject=Merhaba&body=Selam!">
  Konulu Mail Gönder
</a>

📌 Not:

• subject → Mail başlığı
• body → Mail içeriği

Evet, HTML bazen sihirbaz 🪄

Telefon Araması Yapan Link 📞

Mobil kullanıcıları seviyorsan bunu seveceksin:

<a href="tel:+905551112233">
  Hemen Ara
</a>

Tıklayan kullanıcı:
📱 “Alo?”

📌 Özellikle:

• Restoran siteleri
• Danışmanlık siteleri
• Acil durum sayfaları

için altın değerinde.

Sayfa İçi Linkler (Teleport Özelliği 🚀)

Uzun bir sayfa var.
Kullanıcı aşağı kaydır kaydır yoruldu.

Çözüm?

<a href="#iletisim">İletişime Git</a>

...

<section id="iletisim">
  <h2>İletişim</h2>
</section>

🧠 Mantık:

• #iletisim → Aynı ID’ye ışınlan
• Scroll = puf 💨

📌 SEO + UX dostu bir yöntemdir.

Linklere Stil Vermek (Çirkin Maviye Son 🎨)

Varsayılan link:

• Mavi
• Altı çizili
• 2003 vibes 😬

Biz frontend’ciyiz, kabul etmiyoruz.

a {
  text-decoration: none;
  color: #ff5722;
  font-weight: 600;
}

a:hover {
  color: #000;
  text-decoration: underline;
}

Bonus efekt:

a {
  transition: color 0.3s ease;
}

✨ Küçük animasyon = büyük mutluluk

<a> Etiketini Buton Gibi Kullanmak

Bazen link, bazen buton gibi görünmeli:

<a href="/kayit-ol" class="btn">
  Kayıt Ol
</a>

.btn {
  padding: 10px 20px;
  background: black;
  color: white;
  border-radius: 8px;
}

📌 Kural:

• Bir yere gidiyorsa → <a>
• Bir işlem yapıyorsa → <button>

Bu ayrımı bilen frontend’ci 1-0 öndedir 🏆

En Sık Yapılan Hatalar (Kırmızı Kart 🚨)

❌ <a> etiketi ama href="#"
❌ “Buraya tıkla” (Nereye? Niye?)
❌ Her link yeni sekme
❌ Linkin tıklanabilir olduğu anlaşılmıyor
❌ Erişilebilirlik düşünülmemiş

SEO & Accessibility Mini İpuçları 🧠

✅ Link metni açıklayıcı olsun

<a href="/blog/html-a-etiketi">
  HTML’de a Etiketi Rehberi
</a>

❌ Kötü örnek:

<a href="/blog/html-a-etiketi">Buraya tıkla</a>

Google da kullanıcı da neye tıkladığını bilmek ister.

Özet: <a> Küçük Ama Efsane

• <a> etiketi link oluşturur
• href olmazsa olmaz
• Yeni sekme bilinçli kullanılır
• Mail, telefon, sayfa içi linkler mümkündür
• CSS ile karakter kazanır
• SEO ve erişilebilirlik fark yaratır

🎯 Son Söz:
<a> etiketi HTML’in en basit etiketi gibi görünür
ama doğru kullanıldığında seni
amatörden profesyonele taşıyan köprüdür.