HTML Link Verme: a href ile Link Nasıl Oluşturulur

Q: HTML'de nasıl link verilir?

Anchor elementini kullan: Example . href hedeftir, etiketlerin arasındaki metin de okurun tıkladığı şeydir.

Q: Bir sayfanın belirli bir bölümüne nasıl link veririm?

Hedef elemente bir id ver, sonra ona diyez ile link ver: FAQ ve FAQ . Başka bir sayfadan link veriyorsan diyezi URL'ye ekle: .

Q: www yazdığımda linkim neden yanlış sayfaya gidiyor?

https:// olmadan tarayıcı www.example.com adresini kendi sitendeki göreli bir yol olarak ele alır, yani link yoursite.com/www.example.com gibi bir yere gider. Dış linklerde şemayı her zaman yaz: href="https://www.example.com".

Q: Bir a etiketi div içerebilir mi?

Evet. HTML5'te bir , bir , bir başlık ve bir paragraf gibi blok içerikleri sarabilir; bütün bir kartı link yapmak böyle olur. Başka bir link, bir buton ya da başka etkileşimli bir element içeremez.

HTML'de nasıl link verilir

Link, href özelliği olan bir anchor elementidir, yani <a>. href linkin gittiği yerdir; etiketlerin arasındaki içerik de okurun tıkladığı şeydir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

Tarayıcılar linkleri mavi ve altı çizili gösterir ve imleci ele çevirir. Son satır href özelliğinin neden önemli olduğunu gösterir: o olmadan <a> düz metindir. Odaklanamaz, tıklanamaz ve link gibi görünmez.

Mutlak ve göreli URL'ler

href değeri linkin nereye gideceğine karar verir. Başlıca biçimler:

`href`	Gittiği yer
`https://example.com/page`	Mutlak bir URL: tam olarak o adres
`/about`	Geçerli sitenin kökündeki `about`
`about.html`	Geçerli sayfayla aynı klasördeki `about.html`
`../index.html`	Bir üst klasördeki `index.html`
`#pricing`	Bu sayfada `id="pricing"` olan element
`/help#faq`	Bu sitedeki başka bir sayfanın `faq` bölümü
`mailto:hi@example.com`	Okurun e-posta uygulamasında yeni bir e-posta
`tel:+15551234567`	Arama yapabilen cihazlarda bir telefon araması

Başka siteler için mutlak URL'ler, kendi sitende ise köke göre yollar (/about) kullan: bunları içeren sayfa başka bir klasöre taşındığında da çalışmaya devam ederler.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

Son satır en yaygın link hatasıdır. https:// olmadığında tarayıcı www.wikipedia.org ifadesini geçerli klasördeki bir dosya adı olarak okur.

E-posta ve telefon linklerinin kendi sayfası var: HTML mailto linki.

Sayfanın bir bölümüne link vermek

id özelliği olan her element bir hedeftir. Ona # ve ardından id ile link ver, tarayıcı oraya kayar. Önizlemedeki linklere tıkla:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

Bazı ayrıntılar:

id büyük küçük harf dahil tam olarak eşleşmeli. href="#FAQ", id="faq" olan elementi bulmaz.
href="#top" ve href="#", id'si top olan bir element olmasa bile sayfanın en üstüne kayar.
:target seçicisi, URL'nin o anda gösterdiği bölüme stil verir. Gerçek bir sayfada burada vurgulanır; önizleme adresini değiştirmeden kaydığı için vurgu orada görünmez.
Başka bir sayfanın bir bölümüne link vermek için diyezi o sayfanın URL'sine ekle: <a href="/docs/html/table#caption">.

Sabit bir header altında sayfa içi linkler

Yapışkan ya da sabit bir header, atladığın bölümün üst kısmını örter. Hedeflerdeki scroll-margin-top onun için yer bırakır, scroll-behavior: smooth da atlamayı canlandırır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

scroll-margin-top satırını sil ve Two'ya yeniden tıkla: başlık koyu header'ın arkasında gizli kalır.

İndirme linkleri

download özelliği tarayıcıdan dosyayı açmak yerine kaydetmesini ister. Bir değer verirsen, o değer önerilen dosya adıdır:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download yalnızca sayfayla aynı origin'deki (aynı şema, host ve port) dosyalar ve data: ile blob: URL'leri için çalışır. Başka bir origin'deki bir dosya için, bir alt alan adı bile olsa, tarayıcılar onu yok sayar ve dosyaya normal bir link gibi gider. Sunucu Content-Disposition: attachment header'ıyla herhangi bir dosyanın indirilmesini zorunlu kılabilir.

Anlamlı link metni

Ekran okuyucu kullananlar bir sayfada çoğunlukla linkten linke ilerler ve yalnızca link metnini duyar. "Click here" ve "Read more" onlara hiçbir şey söylemez.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

title özelliği fareyle üzerine gelince bir ipucu gösterir, ama dokunmatik ekranlarda ve klavye kullananların çoğuna gösterilmez; bu yüzden içine önemli bir şey koyma.

Bütün bir kartı link yapmak

Bir <a> blok içerikleri sarabilir: bir başlık, bir resim ve bir paragraf tek bir link olabilir. Tıklanabilir kartlar böyle yapılır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block yalnızca metni değil, bütün kutuyu tıklanabilir yapar. Kartın içeriğini kısa tut, çünkü bir ekran okuyucu hepsini linkin adı olarak okur. İçine asla başka bir link ya da buton koyma: etkileşimli elementler <a> içine yerleştirilemez.

a etiketinin diğer özellikleri

Özellik	Ne yapar
`href`	Hedef. O olmadan `<a>` bir link değildir
`target`	Nerede açılacağı; `target="_blank"` yeni sekmede açar, bkz. linki yeni sekmede açma
`rel`	Hedefle ilişki: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	Dosyayı açmak yerine kaydet
`hreflang`	Link verilen sayfanın dili, ipucu olarak
`referrerpolicy`	Geçerli URL'nin ne kadarının referrer olarak gönderileceği

Sık yapılan hatalar

Dış URL'de şema olmaması. href="www.site.com" göreli bir yoldur. https:// yaz.
Bir JavaScript eylemi için <a href="#">. En üste kayar ve URL'ye # ekler. Tıklamak bir yere götürmüyorsa <button> kullan.
Link içinde link ya da link içinde buton. İkisi de geçersiz HTML'dir: ikinci bir <a> ayrıştırıcının ilkini erken kapatmasına yol açar, link içindeki bir butona tıklamanın da net bir hedefi olmaz.
Dosya adlarında boşluk. href="my file.html" genellikle çalışır, çünkü tarayıcı boşluğu kodlar, ama my-file.html bu soruyu baştan ortadan kaldırır.
Link metni olarak "Click here". Onun yerine hedefi tarif et.
id'lerde büyük küçük harf uyumsuzluğu. #Pricing ile id="pricing" farklıdır.

Sıkça Sorulan Sorular

HTML'de nasıl link verilir?

Anchor elementini kullan: <a href="https://example.com">Example</a>. href hedeftir, etiketlerin arasındaki metin de okurun tıkladığı şeydir.

href neyin kısaltması?

Hypertext reference. Linkin gösterdiği URL'yi tutar: tam bir adres, aynı sitede /about gibi bir yol, sayfanın #pricing gibi bir bölümü ya da mailto: gibi bir şema.

Bir sayfanın belirli bir bölümüne nasıl link veririm?

Hedef elemente bir id ver, sonra ona diyez ile link ver: <h2 id="faq">FAQ</h2> ve <a href="#faq">FAQ</a>. Başka bir sayfadan link veriyorsan diyezi URL'ye ekle: <a href="/help#faq">.

www yazdığımda linkim neden yanlış sayfaya gidiyor?

https:// olmadan tarayıcı www.example.com adresini kendi sitendeki göreli bir yol olarak ele alır, yani link yoursite.com/www.example.com gibi bir yere gider. Dış linklerde şemayı her zaman yaz: href="https://www.example.com".

Bir a etiketi div içerebilir mi?

Evet. HTML5'te bir <a>, bir <div>, bir başlık ve bir paragraf gibi blok içerikleri sarabilir; bütün bir kartı link yapmak böyle olur. Başka bir link, bir buton ya da başka etkileşimli bir element içeremez.

İlgili kavramlar