Çalıştırılabilir HTML Dokümanları: HTML footer

Q: Footer'ı sayfanın en altında nasıl tutarım?

body'yi en az pencere kadar yüksek bir flex sütun yap (display: flex; flex-direction: column; min-height: 100vh;) ve elementine flex: 1 ver. Ana alan böylece boş alanı doldurmak için büyür ve kısa sayfalarda footer'ı aşağı iter.

Q: HTML'de telif hakkı simgesi nasıl yazılır?

Q: Bir sayfada birden fazla footer olabilir mi?

Evet. Her ya da yazar bilgisi ya da etiketler için kendi footer'ına sahip olabilir. Ekran okuyucular için yalnızca article, aside, main, nav ya da section içinde olmayan bir footer sayfanın contentinfo landmark'ıdır.

Sayfanın kapanış içeriğini, genellikle <body> içindeki son şey olan bir <footer> elementine koy. <header> gibi onun da varsayılan bir görünümü yoktur; onu bir footer çubuğuna CSS çevirir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

© © simgesini yazdırır. <small> telif hakkı satırını küçük yazı olarak işaretler; bu, HTML'deki anlamıdır, sadece daha küçük bir yazı tipi değil. Link listeleri gerçek <ul> listeleridir, bu yüzden çoğu ekran okuyucu her sütunda kaç link olduğunu duyurur.

Az içerikli bir sayfada footer o içeriğin hemen altında durur ve altında boş alan kalır. Çözüm bir flex sütundur: kapsayıcı en az pencere kadar yüksektir ve ana alan kalan yüksekliğin tamamını alır. Aşağıdaki gri kutu bir tarayıcı penceresinin yerini tutuyor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

main üzerindeki flex: 1 değerini kaldır, footer paragrafın altına zıplar. Gerçek bir sayfada aynı kuralları sabit bir yükseklik yerine min-height: 100vh (ve margin: 0) ile <body> üzerine koy; böylece footer kısa sayfalarda en altta, uzun sayfalarda da içerikten sonra durur.

Makalelerin içindeki footer'lar

Bir <footer> en yakın makalesini ya da bölümünü kapatır, bu yüzden bir blog yazısının ya da bir yorumun yazar, tarih ya da etiketlerle kendi footer'ı olabilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

Ekran okuyucular yalnızca sayfa seviyesindeki footer'ı contentinfo landmark'ı olarak ele alır. Bir makale içindeki footer sıradan bir gruptur, yani site footer'ıyla rekabet etmez.

address ile iletişim bilgileri

Sayfa ya da sahibi hakkındaki iletişim bilgileri için footer içinde <address> kullan. Yalnızca iletişim bilgileri içindir (içeriğindeki herhangi bir posta adresi için değil) ve tarayıcılar onu varsayılan olarak italik gösterir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

Adresin içindeki satır sonu, <br> etiketinin iyi kullanımlarından biridir. E-posta linkleri hakkında daha fazlası için mailto sayfasına bak.

Bir footer'a neler girebilir

Bir footer linkler, listeler, formlar (bir bülten kaydı), resimler ve bir <nav> barındırabilir. Bir <header>, başka bir <footer> ya da bir <main> içeremez. Footer'daki ikinci bir menü, onu ana menüden ayıran bir label'ı olan bir <nav> olabilir:

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

Sık yapılan hatalar

<footer> elementini <body> dışına koymak. Görünen her şey, footer dahil, <body> içine girer.
Onu aşağıda tutmak için position: fixed kullanmak. Sabit bir footer küçük ekranlarda içeriği örter ve her yerde padding gerektirir. Flex sütun kalıbını kullan.
Her adres için <address> kullanmak. Sayfanın ya da makale yazarının iletişim bilgileri içindir. Bir konum listesindeki bir mağaza adresi düz bir <p> olur.
<br> etiketleriyle kurulmuş link sütunları. Yapı duyurulsun diye <ul> listeleri kullan.
Geçen yılı sabit yazmak. Telif hakkı yılını şablonunda güncelle ya da sunucundan veya build adımından yazdır.

Sıkça Sorulan Sorular

HTML'de footer etiketi nedir?

<footer> bir sayfanın ya da bölümün kapanış içeriği için semantik bir elementtir: telif hakkı, iletişim bilgileri, ilgili linkler ya da yazar bilgisi. Varsayılan stili olmayan bir blok kutudur.

Bir web sitesinin footer'ında neler olmalı?

Tipik footer'lar telif hakkı notunu, gizlilik ve kullanım koşulları gibi yasal sayfalara linkleri, iletişim bilgilerini, sosyal medya linklerini ve kısa bir site haritasını içerir. Her ziyaretçi sona kadar kaydırmadığı için ana gezinmeyi de üstte bir <nav> içinde tut.

Footer'ı sayfanın en altında nasıl tutarım?

body'yi en az pencere kadar yüksek bir flex sütun yap (display: flex; flex-direction: column; min-height: 100vh;) ve <main> elementine flex: 1 ver. Ana alan böylece boş alanı doldurmak için büyür ve kısa sayfalarda footer'ı aşağı iter.

HTML'de telif hakkı simgesi nasıl yazılır?

Bir sayfada birden fazla footer olabilir mi?

Evet. Her <article> ya da <section> yazar bilgisi ya da etiketler için kendi footer'ına sahip olabilir. Ekran okuyucular için yalnızca article, aside, main, nav ya da section içinde olmayan bir footer sayfanın contentinfo landmark'ıdır.

İlgili kavramlar