Ara
  • Temel Bilgileri
  • HTML Dile Genel Bakış
  • HTML Editörler
  • HTML Temelleri
  • Paragraf Koordinasyon
  • HTML Paragraflar
  • HTML Başlıklar
  • HTML Metin Biçimlendirme
  • HTML Metin Düzenleme
  • HTML Alıntılar
  • HTML Kod biçimlendirme
  • HTML Bağlantılar
  • Listeler ve Tablolar
  • HTML Tablolar
  • HTML Sıralamalı listeler
  • HTML Sırasız Listeler
  • HTML Açıklama listeleri
  • Medya ve Dahili Sayfalar
  • HTML Dosya Yolları
  • HTML Resimler
  • HTML Videolar
  • HTML Sesleri
  • HTML Iframe
  • Form oluşturma
  • HTML Formlar
  • HTML Form Öğeleri Adresleme
  • HTML Form Giriş Alanları
  • HTML Formda Normal Düğmeler
  • HTML Onay Kutuları
  • HTML Radyo Düğmeleri
  • HTML Açılır Listeler
  • HTML Seçim Aralıkları
  • HTML Formun Ortak Öğelerini Toplamak
  • Sayfanın dilini belirtmek
  • HTML Dil Kodları
  • HTML Ülke Kodları
  • HTML Farklı Dillerde Sayfalar
  • Kapsamlı Referanslar
  • HTML Dilin Tüm Etiketleri Ve Özellikleri
  • Diğer dersler
  • HTML Yazı Arası Boşluk
  • Database - Veritabanları
  • HTML5 Nedir?
  • ens

K-kudo

HTML öğren

HTML araçları

  • Ana Sayfa
  • Kod Editor
  • Kod Dönüştürücü
  • Color Picker
  • Araştırma

HTML <a> Etiketi

Derse dön Derse dön
Sayfa içeriği
  • › <a> Etiketinin Tanımı
  • › Tarayıcı desteğin konsepti
  • › <a> etiketin özellikleri
  • › <a> etiketin kullanma örnekleri
  • › Varsayılan tasarımı
  • › İpuç ve notlar

<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

Kullanım Koşulları ve Gizlilik Politikası © 2021-2023 HTML öğren.

Ankara Lastik Tamiri