HTML A Etiketi Nedir? Öznitelikleri Nelerdir?

HTML a etiketi, çapa anlamına gelen “anchor” kelimesinin baş harfini temsil eder. HTML a etiketi, bir HTML dökümanında iç veya dış bağlantı (köprü) yani link oluşturmanıza yardımcı olur. En çok kullanılan HTML etiketlerinin başında gelen a etiketinin en yaygın kullanım şekli aşağıda yer almaktadır.

<a href="https://teknoloji.org">teknoloji.org</a>

İçindekiler

• HTML a Etiketinin Öznitelikleri
  • HTML <a> download Özniteliği
  • HTML <a> href Özniteliği
  • HTML <a> hreflang Özniteliği
  • HTML <a> ping Özniteliği
  • HTML <a> rel Özniteliği
  • HTML <a> target Özniteliği
  • HTML <a> type Özniteliği

HTML a Etiketinin Öznitelikleri

HTML a etiketi, HTML global özniteliklerinin yanı sıra aşağıda listelenen özniteliklere sahiptir. En çok kullanılan a etiketinin öznitelikleri “href”, “rel” ve “target”dir.

Sıra No.	Öznitelikler	Açıklama
1	download	Belirtilen hedefin kullanıcı tarafından indirilmesini sağlar.
2	href	Belirtilen hedefin kullanıcı tarafından ziyaret edilmesini sağlar.
3	hreflang	Ziyaret edilecek olan bağlantının hangi dilde olduğunu belirtir.
4	ping	Bağlantının izlenmesine yardımcı olur.
5	rel	Bağlantı verilen adres ile ilişki türünü belirler.
6	target	Bağlantının nerede görüntüleneceğini belirler.
7	type	Bağlantı hedefinin türünü belirtir.

HTML <a> download Özniteliği

a etiketinin download özniteliği HTML elemanının normalde ziyaret ettiği hedefi kullanıcı tarafından indirilmesini sağlar. download özniteliğini kullanırken isteğe bağlı olarak indirilecek olan dosyanın adını da belirleyebilirsiniz.

<!-- Birinci download kullanım örneği --> <a href="https://teknoloji.org/en-guzel-istanbul-manzarasi.jpg" download>Görseli indir</a> <!-- İkinci download kullanım örneği (Dosya ismi belirterek) --> <a href="https://teknoloji.org/en-güzel-istanbul-manzarasi.jpg" download="istanbul">Görseli indir</a>

Birinci örnekte “Görseli indir” bağlantısına tıklandığı zaman inecek olan dosyanın adı “en-guzel-istanbul-manzarasi.jpg” iken, ikinci örnekte inecek olan dosyanın adı “istanbul.jpg” olacaktır.

HTML <a> href Özniteliği

a etiketinin href özniteliği değer olarak belirtilen hedef bağlantının ziyaret edilmesini sağlar. href özniteliği a etiketinin en yaygın kullanılan özniteliğidir ve Hypertext REFerence, yani köprü metin referansı anlamına gelir. Kullanımı, yazının başında ve aşağıda örneklendirildiği gibidir.

<!-- href kullanım örneği --> <a href="https://teknoloji.org">Teknoloji Haberleri</a>

a etikenin içeriği olan “Teknoloji Haberleri” yazısına tıklandığı zaman tarayıcınız sizi belirtilen teknoloji.org adresine yönlendirecektir.

Yukarıda yer alan href özniteliği Mutlak Bağlantı (Absolute links) yapısı ile oluşturulmuştur. href özniteliği Mutlak Bağlantı (Absolute links) ve Göreceli Bağlantı (Relative Links) olmak üzere iki adet bağlantı yapısına sahiptir.

Mutlak Bağlantılar (Absolute links)

Mutlak bağlantı (absolute links) yapısı internet protokolleri üzerinden kurulan bir bağlantı yapısıdır. Mutlak bağlantılarda tam alan adı kullanımı zorunludur. Aşağıdaki örnekte mutlak bağlantı yapısının bir doğru bir de yanlış örneğini görebilirsiniz.

<!-- DOĞRU href mutlak bağlantı yapısı --> <a href="https://google.com">Google</a> <!-- YANLIŞ href mutlak bağlantı yapısı --> <!-- Yanlış örnekte internet protokolü (http veya https) belirtilmemektedir --> <a href="google.com">Google</a>

Doğru örnekte Google yazısına tıkladığınız zaman kullandığınız web tarayınız Google web sayfasını ziyaret ederken, yanlış örnekte muhtemelen 404 hata sayfa bulunamadı hatası ile karşılaşacaksınız.

Hata sayfası ile karşılaşma sebebiniz yanlış örnekteki Google yazısına tıkladığınızda web tarayıcınız sizi (bu örnekte teknoloji.org sitesinde olduğumuzu düşünelim) https://teknoloji.org/google.com adresine götürmeye çalışacak ve bunun sonucunda ilgili sayfa bizim web sayfamızda bulunmadığı için 404 numaralı sayfa bulunamadı hatasına sebep olacaktır.

Göreceli Bağlantılar (Relative links)

Göreceli bağlantı yapısı aynı alan, dizin veya döküman içerisindeki hedefler için en uygun bağlantı yapısıdır. Dış döküman ve/veya alanlara bağlantı verileceği, ancak hedefin hangi internet protokolünü kullandığı konusunda bilinmezlik olduğunda da kullanılabilir.

<!-- Kök dizine göreceli bağlantı yapısı (Kök dizin: https://teknoloji.org) --> <a href="/hakkimizda">Hakkımızda</a> <!-- Mevcut dizine göreceli bağlantı yapısı (Mevcut dizin: https://teknoloji.org/nedir) --> <a href="./html-nedir">HTML Nedir?</a> <!-- İnternet Protokolü göreceli bağlantı yapısı --> <a href="//google.com">Google</a>

Kök dizine göreceli bağlantı yapısı örneğinde bağlantı web tarayıcınızı https:/teknoloji.org/hakkimda sayfasına yönlendirecektir. Mevcut dizine göreceli bağlantı yapısı örneğinde ise web tarayıcınız https://teknoloji.org/nedir/html-nedir sayfasını ziyaret edecektir.

Göreceli bağlantıların son örneği olan internet protokolü göreceli bağlantı yapısı ise, -her ne kadar günümüzde çok kullanılmasa da- web tarayıcınızın https://google.com adresini ziyaret etmesini sağlayacaktır. Hedef adresin protokolü (https://google.com), bağlantıyı veren sayfasının internet protokolü baz alınarak (https://teknoloji.org) oluşturulur. Hedef alan eğer erişilebilir değil ise, web tarayıcınız muhtemelen sizi bir hata mesajı ile karşılayacaktır.

Mutlak veya göreceli bağlantı yapılarının SEO konusuna hiç bir direkt etkisi olmasa da, göreceli bağlantı yapısının hataya daha açık oluşu riskli bir durumdur. Bu sebeple Google’ın da önerdiği gibi mümkün olduğunca mutlak bağlantı yapılarının tercih edilmesi web sayfanızın veya dökümanınızın bağlantı sağlığı açısından önemlidir.

E-Posta adresine köprü (bağlantı) oluşturma (mailto: protokolü)

HTML’de e-posta adreslerine bağlantı oluşturmak için href öznitelik değerine mailto: protokol yardımı ile bağlantı oluşturabiliriz. Bu yöntem ile web tarayıcısı üzerindeki bağlantı kurulan yazı veya görsele tıklandığı zaman varsayılan e-posta uygulaması ile belirtilen e-posta adresine e-posta gönderilir. HTML mailto: protokolü ile e-posta bağlantısı oluşturmanın örneği aşağıda yer almaktadır.

<!-- mailto: protokolü ile bir e-posta adresine bağlantı --> <a href="mailto:test@teknoloji.org">Bize E-Posta Gönderin</a> <!-- mailto: protokolü ile birden fazla e-posta adresine bağlantı --> <a href="mailto:test-1@teknoloji.org,test-2@teknoloji.org">Bize E-Posta Gönderin</a> <!-- mailto: protokolü ile karbon kopyalı e-posta bağlantısı --> <a href="mailto:test-1@teknoloji.org?cc=test-2@teknoloji.org">Bize E-Posta Gönderin</a> <!-- mailto: protokolü ile e-posta adresi olmadan bağlantı oluşturma --> <a href="mailto:">E-Posta Gönderin</a>

Yukarıda yer alan son örneğe tıklandığı zaman varsayılan e-posta uygulamanız yine de açılacak ve adres kısmı boş olarak yeni bir e-posta oluşturma ekranını getirecektir. Buradan mailto: protokolüne eklenen e-posta adresinin isteğe bağlı bir seçenek olduğunu anlayabiliriz.

Diğer aksiyonlu köprü türleri (tel:, sms: ve fax: protokolleri)

Yukarıda yer alan mailto: protokolü ile aynı kullanım şekline sahip olan tel:, sms: ve fax: protokollerinin kullanım örneklerini aşağıda bulabilirsiniz.

<!-- tel: protokolü ile aranabilir telefon numarası bağlantısı --> <a href="tel:0555-555-5555">Bizi arayın!</a> <!-- sms: protokolü ile sms gönderilebilir bağlantı --> <a href="sms:0555-555-5555">Bize mesaj gönderin!</a> <!-- fax: protokolü ile fax gönderilebilir bağlantı --> <a href="fax:0555-555-5555">Bize fax gönderin!</a>

HTML <a> hreflang Özniteliği

hreflang özniteliği bağlantının hangi dilde olduğunu belirtmemize yardımcı olmaktadır. Google, kendilerine şematik yapıları ile yardımcı olan web sayfalarına pozitif yaklaşımı ile bilinen bir arama motoru olduğundan ve hreflang özniteliği de Google tarafından kullanılması desteklenen bir öznitelik olduğu için ayrıca önem kazanmaktadır.

<!-- hreflang özniteliği kullanım örneği --> <a href="https://teknoloji.org" hreflang="tr">Teknoloji Haberleri</a>

Örnekten de görülebileceği gibi hreflang özniteliğinin değeri olarak ISO dil kodları kullanılmaktadır. ISO 639 dil kodlarının tam listesinden ihtiyacınız olan dil kodunu öğrenebilirsiniz.

HTML <a> ping Özniteliği

ping özniteliği çok yaygın bir kullanım ağına sahip olmasa da, özel istatistik oluşturma, tıklanmayı takip etme konusunda oldukça yararlı olabilcek bir özniteliktir. Google’ın da bağlantı takiplerinde kullandığı belirtilen ping özniteliğinin kullanım şekli aşağıda yer almaktadır.

<!-- ping özniteliği kullanım örneği --> <a href="https://teknoloji.org/haberler" ping="https://teknoloji.org/takip.php">Teknoloji Haberleri</a>

Yukarıdaki örnekte bağlantıya tıklandığı zaman sunucuya POST metodu ile bilgilendirme yapılmaktadır. Böylelikle JavaScript kodu kullanılmadan basit bir bağlantı takip sistemi kurmak mümkündür. ping özniteliği a etiketinin yanı sıra aynı kullanım şekli ile HTML area etiketi için de kullanılabilir.

HTML <a> rel Özniteliği

a etiketinde kullanılan rel özniteliği bağlantı verilen dökümanın, bağlantı veren döküman ile ilişkisini belirtmeye yardımcı olur. Özellikle SEO konularında “nofollow” değeri en çok tercih edilen kullanım şekli iken, güvenlik konularında ise “noreferrer noopener” ikilisi kullanılmaktadır.

<!-- rel nofollow kullanım örneği --> <a href="https://teknoloji.org" rel="nofollow">Teknoloji Haberleri</a> <!-- rel noreferrer noopener kullanım örneği --> <a href="https://teknoloji.org" rel="noreferrer noopener">Teknoloji Haberleri</a>

rel=”nofollow” belirttiğimiz bağlantılarda arama motorlarına kısa bu bağlantıyı takip etmemesini belirtmiş oluyoruz. SEO puanını paylaşmamak adına bu tarz yöntemler tercih edilebiliyor. rel=”nofollow” kullanılmayan bağlantılar varsayılan olarak “dofollow” şeklinde değerlendirilmektedir. Ancak gerçekte HTML’in dofollow diye tanıdığı bir değer bulunmamaktadır. “nofollow” belirtilmeyen tüm bağlantılar, arama motorları tarafından takip edilmektedir.

rel=”noreferrer noopener” kullanımı ise oldukça kritik ve önemlidir. Farklı bir döküman ve ya alan adına bağlantı oluştururken, noreferrer ve ya noopener değerlerini belirtmeniz, hatta en iyi uygulama olarak aralarında bir boşluk ile iki değere de yer vermeniz önemlidir.

rel=”noreferrer noopener” kullanımı, aşağıdaki target özniteliğinde bahsedeceğimiz yeni pencerede bağlantı açıldığı (target=”_blank”) zaman, hem web sayfanızın performansını, hem de güvenliğini korumaktadır.

HTML <a> target Özniteliği

a etiketinin target özniteliği hedef bağlantının nerede gösterileceğini belirlemektedir. Web tarayıcısının mevcut ekranında ve yeni bir tab veya pencerede görüntüleme gibi seçenekleri bulunmaktadır.

<!-- target özniteliği ile bağlantıyı mevcut ekranda açmak --> <!-- mevcut ekranda bağlantıyı göstermek için iki yöntemimiz var Eğer target belirtmezsek, web tarayıcımız varsayılan olarak bağlantıyı mevcut ekranda açacaktır. Veya target="_self" değerini kullanabiliriz. --> <a href="https://teknoloji.org">Teknoloji Haberleri</a> <a href="https://teknoloji.org" target="_self">Teknoloji Haberleri</a> <!-- target özniteliği ile bağlantıyı yeni tab veya yeni pencere üzerinde açmak --> <a href="https://teknoloji.org" target="_blank">Teknoloji Haberleri</a>

İkinci örnekte yer alan “_blank” değerinin bir takım performans ve güvenlik risklerini barındırdığını “rel” değerinde bahsetmiştik. Dış bir dökümana bağlantı verildiğinde rel=”noreferrer noopener” kullanılmadığını düşünelim. Açılan web sayfasının çeşitli JavaScript kodları sizin performansınızı düşürebilme riskine sahiptir. Bir diğer riskli konu ise kötü niyetli web sayfalarıdır. window.opener API’leri ile web sayfanıza -çok ciddi olmasa da- zarar verebilirler. Bu sebeple target=”_blank” olarak belirlenilen tüm bağlantıları rel=”noreferrer noopener” ile desteklemek yerinde bir karar olacaktır.

HTML <a> type Özniteliği

HTML a etiketindeki type özniteliği, bağlantının tipini belirten öznitekliktir. Medya ve İçerik tipi de denilen bu özniteliğin kullanım şekli aşağıda bulunmaktadır.

<!-- Bağlantı tipini belirtmek --> <a href="https://teknoloji.org" type="text/html">Teknoloji Haberleri</a>