HTML <a> Etiketi

Sayfa içeriği

<a> Etiketinin Tanımı

Genel olarak, bir sayfada bir bağlantıyı görüntülemek için <a> etiketi aşağıdaki şekilde kullanılır:

<a href="url">metin</a>

"metin" yerine, kullanıcının görmesini istediğimiz metni; "url" yerine ise kullanıcıyı yönlendirmek istediğimiz bağlantıyı yazabiliriz.

Varsayılan olarak, eklenen bağlantı aşağıdaki şekilde görüntülenir:

Henüz tıklanmadıysa, bağlantı mavi renkte ve altı çizilidir.
Daha önce tıklandıysa, bağlantı mor renkte ve altı çizilidir.
Bağlantıya tıklandığında, bağlantı kırmızı renkte görüntülenir.

Tarayıcı Desteğin Konsepti

Bazı tarayıcı tarafından desteklenmeyen farklı etiketler vardır.
Aşağıdaki tabloda <a> etiketini destekleyen ve desteklemeyen tarayıcıların listesi ekledim.

Tarayıcı	Destekliyor mu?
Chrome	Destekleniyor
Edge	Destekleniyor
Firefox	Destekleniyor
Opera	Destekleniyor
Safari	Destekleniyor
Android Webview	Destekleniyor
Android için Chrome	Destekleniyor
Android için Firefox	Destekleniyor
Android için Opera	Destekleniyor
IOS için Safari	Destekleniyor
Samsung Internet	Destekleniyor

<a> Etiketin Özellikleri

Önemli ve gerçekten çok kullanılan özelliklerden bahsedeceğimi ve kullanılması önerilmeyen özellikleri göz ardı edeceğimi belirtmek isterim.

Donwload Özelliği

Tarayıcıya bir bağlantı tıklandığında bir dosyanın indirileceğini bildirmek için etikete eklenebilirler.
Aşağıdaki tablo, hangi tarayıcıların bu özelliği desteklediğini göstermektedir.

Tarayıcı	Destekliyor mu?
Chrome	14
Edge	18
Firefox	20
Opera	15
Safari	10.1
Android Webview	Destekleniyor
Android için Chrome	18
Android için Firefox	20
Android için Opera	73
IOS için Safari	Desteklenmiyor
Samsung Internet	1.0

href Özelliği

Kullanıcıların sayfadaki belirli bir bağlantıya tıkladıklarında yönlendirilmek istediğimiz hedef bağlantıyı <a> etiketine ekliyoruz. Genel olarak, tarayıcıların bu etiketleri bağlantı olarak tanıması ve diğer etiketlere eklenen özelliklerin çalışabilmesi için <a> etiketinde href özelliğin eklenmesi gerekmektedir.

Aşağıdaki tablo, hangi tarayıcıların bu özelliği desteklediğini göstermektedir.

Tarayıcı	Destekliyor mu?
Chrome	Destekleniyor
Edge	12
Firefox	Destekleniyor
Opera	Destekleniyor
Safari	Destekleniyor
Android Webview	Destekleniyor
Android için Chrome	Destekleniyor
Android için Firefox	Destekleniyor
Android için Opera	Destekleniyor
IOS için Safari	Destekleniyor
Samsung Internet	Destekleniyor

hreflang Özelliği

Kullanıcının yönlendirileceği bağlantının dilini belirtmek için etikete eklenebilir.

Aşağıdaki tablo, hangi tarayıcıların bu özelliği desteklediğini göstermektedir.

Tarayıcı	Destekliyor mu?
Chrome	Destekleniyor
Edge	12
Firefox	Destekleniyor
Opera	Destekleniyor
Safari	Destekleniyor
Android Webview	Destekleniyor
Android için Chrome	Destekleniyor
Android için Firefox	Destekleniyor
Android için Opera	Destekleniyor
IOS için Safari	Destekleniyor
Samsung Internet	Destekleniyor

rel Özelliği

Bu özelliği <a> etiketine ekleyerek, mevcut bağlantı ile kullanıcının yönlendirileceği hedef bağlantı arasındaki ilişkiyi belirlemeyi amaçlarız. Bu, arama motorları için son derece önemli bir faktördür.

Aşağıdaki tablo, hangi tarayıcıların bu özelliği desteklediğini göstermektedir.

Tarayıcı	Destekliyor mu?
Chrome	Destekleniyor
Edge	12
Firefox	Destekleniyor
Opera	Destekleniyor
Safari	Destekleniyor
Android Webview	Destekleniyor
Android için Chrome	Destekleniyor
Android için Firefox	Destekleniyor
Android için Opera	Destekleniyor
IOS için Safari	Destekleniyor
Samsung Internet	Destekleniyor

Kullanıcının mevcut bağlantıdan yönlendirileceği hedef bağlantı arasındaki ilişkiyi belirlemek için, önceden tanımlanmış bir değeri "rel" özelliğine iletmek gerekmektedir. Bu özellik, bağlantılar arasındaki ilişkiyi tanımlamak için kullanılır ve arama motorları için önemlidir.

Özellik	Anlamı
alternate	Mevcut bağlantının alternatif bir bağlantı olduğunu ve bu alternatifin daha iyi ve diğer özelliklerle uyumlu olduğunu belirtmek için "rel" özelliğine "alternate" değeri verilir. Bu, mevcut bağlantının alternatif bir seçenek olduğunu ve arama motorlarının bu ilişkiyi anlamasını sağlar.
author	"author" değeri, ilgili bağlantının içeriğin yazarını tanıttığı veya onunla iletişim kurma yöntemi sağladığı anlamına gelir. Bu değer, kullanıcılara içerik yazarı hakkında daha fazla bilgi edinme veya iletişim kurma imkanı sunar. Özellikle bloglar, makaleler veya haber sitelerinde yazarların profil sayfalarına veya iletişim bilgilerine yönlendiren bağlantılar için kullanılabilir.
bookmark	"bookmark" değeri, ilgili bağlantının kalıcı olduğunu ve kullanıcının ileride tekrar erişmek veya yer imi olarak kaydetmek isteyebileceği bir bağlantı olduğunu belirtmek için kullanılır. Bu değer, kullanıcılara önemli sayfaları veya içerikleri işaretlemelerine ve kolayca erişmelerine olanak sağlar.
external	Yerleştirilen bağlantının, sayfanın bulunduğu site ile bağlantısı olmadığını belirtmek için.
help	Yerleştirilen bağlantının yardım sunduğunu belirtmek için.
license	Yerleştirilen bağlantının, sayfada görüntülenen içeriğin lisansını belirttiğini belirtir.
next	Konu bağlantısının, bir şeyi takip etmek için gidilecek bir sonraki bağlantı olduğunu gösterir.
nofollow	"nofollow" değeri, ilgili bağlantının web sitesinin tamamlayıcısı olmadığını ve dolayısıyla onun bir parçası olarak kabul edilmediğini belirtmek için kullanılır. Özellikle Google AdSense gibi reklam hizmetlerini kullananlar için, Google şirketi bu değerin her reklam bağlantısı için eklenmesini zorunlu kılar. Bu şekilde, AdSense'in belirlediği reklam politikalarıyla çakışmayacak şekilde, web sitesinde yer alan reklam bağlantılarının işaretlenmesi sağlanır.
noreferrer	Tarayıcının kullanıcının isteği ile herhangi bir bilgi göndermesini engellemek, bu da kullanıcının bağlantıya tıkladığında yönlendirildiği siteye anonim olarak gireceği anlamına gelir.
noopener	window.open() koduyla tarayıcıda açılan pencerenin, kullanıcının önceki sayfada girdiği hassas bilgilere erişebilecek potansiyel zararlı JavaScript kodlarının yürütülmesini engellemek için, bir bağlantıya tıklanıldığında kullanılan önlem olarak kullanılabilir.
prev	"prev" değeri, bir sonraki adıma geçmek için geçilmesi gereken bağlantının, mevcut bağlantıdan önceki bağlantı olduğunu belirtmek için kullanılır. Bu, bir işlemi veya eylemi sürdürmek için takip edilmesi gereken sonraki bağlantıyı ifade eder.
search	Önceki arama sonuçlarına dayalı bir arama düğmesi göstermek için, her sayfa oluşturulduğunda aramada yardımcı olacak özel bilgilerin belirtilmesi gerektiğinden ve genellikle kullanıcıların site içinde mevcut olan bir arama kutusunu veya Google aramasını tercih ettiğinden dolayı bunu önermiyoruz.
tag	Bağlantının içeriğinin, mevcut sayfadaki içeriğin aynı türüne ait olduğunu belirtmek için "tag" özelliği kullanılır. Bu özellik, arama motorlarına, bağlantının mevcut sayfadaki içeriğe uyumlu olduğunu anlamalarına yardımcı olur.

<a> Etiketin Kullanma Örnekleri

Aşağıdaki örnekte, tek satırlık bir yorum ekledim.

<!-- Yorum olarak yerleştirilen yorum kullanıcılara görüntülenmez. -->
<p>HTML çok kolay, kullanışlı ve eğlenceli bir dildir.</p>

kod dene

Aşağıdaki örnekte birkaç satırdan oluşan bir yorum ekledim.

<!--
   Bu üç
   satıra
   yazılan bir yorum
-->
<p>HTML İnternet üzerinde web sitesi oluşturmak için kullanılan bir betik dildir.</p>

kod dene

Varsayılan Tasarımı

Temelde kullanıcının önünde gösterilmeyen bir şey olduğu için varsayılan bir tasarımı yoktur.

İpuç Ve Notlar

Eklenen yorumlar kullanıcının önünde görünmez, çünkü sayfa tasarımcısı bunları kullanıcının okuması için değil, esas olarak kendisi için yerleştirir, ancak bu, kullanıcının isterse bunları göremeyeceği anlamına gelmez. Bu nedenle, yorumlara asla hassas bilgiler yazma çünkü kullanıcı sayfa koduna göz atarsa kolayca görebilir.

Herhangi bir açık sayfanın kodu bilgisayarda Ctrl + U tuşlarına basılarak veya linkin başına view-source: kelimesi eklenerek aşağıdaki gibi kolayca görülebilir:

view-source:https://www.k-html.com/2023/05/html-etiketi.html

Derse dön Derse dön