Footer trong HTML: thẻ footer, ví dụ và bố cục

Cách làm footer trong HTML

Đặt phần nội dung khép lại trang trong phần tử <footer>, thường là thứ cuối cùng trong <body>. Giống <header>, nó không có giao diện mặc định; CSS biến nó thành một thanh chân trang:

<!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>

© in ra ký hiệu ©. <small> đánh dấu dòng bản quyền là chữ in nhỏ, đó là ý nghĩa của nó trong HTML chứ không chỉ là font nhỏ hơn. Các danh sách liên kết là danh sách <ul> thật, nên phần lớn trình đọc màn hình sẽ đọc ra mỗi cột có bao nhiêu liên kết.

Giữ footer ở cuối trang

Trên một trang ít nội dung, footer nằm ngay dưới nội dung đó và để lại khoảng trống bên dưới. Cách khắc phục là một cột flex: khối chứa cao ít nhất bằng cửa sổ, và vùng nội dung chính chiếm hết phần chiều cao còn lại. Khối màu xám bên dưới đóng vai một cửa sổ trình duyệt:

<!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>

Bỏ flex: 1 khỏi main là footer nhảy lên ngay dưới đoạn văn. Trên trang thật, hãy đặt cùng các quy tắc đó cho <body> với min-height: 100vh (và margin: 0) thay cho chiều cao cố định, để footer nằm ở cuối những trang ngắn và nằm sau nội dung ở những trang dài.

Footer bên trong bài viết

Một <footer> khép lại article hoặc section gần nhất chứa nó, nên một bài blog hay một bình luận có thể có footer riêng, ghi tác giả, ngày hoặc thẻ phân loại:

<!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>

Trình đọc màn hình chỉ coi footer cấp trang là landmark contentinfo. Footer bên trong một bài viết chỉ là một nhóm bình thường, nên không cạnh tranh với footer của trang web.

Thông tin liên hệ với address

Với thông tin liên hệ của trang hoặc chủ sở hữu trang, hãy dùng <address> bên trong footer. Thẻ này chỉ dành cho thông tin liên hệ (không dành cho mọi địa chỉ bưu điện xuất hiện trong nội dung), và trình duyệt mặc định hiển thị nó bằng chữ nghiêng:

<!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>

Ngắt dòng bên trong address là một trong những cách dùng hợp lý của <br>. Để tìm hiểu thêm về liên kết email, xem trang mailto.

Footer có thể chứa gì

Footer có thể chứa liên kết, danh sách, biểu mẫu (đăng ký nhận bản tin), hình ảnh và một <nav>. Nó không được chứa <header>, một <footer> khác hay <main>. Menu thứ hai ở footer có thể là một <nav> kèm nhãn để phân biệt với menu chính:

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

Lỗi thường gặp

• Đặt <footer> bên ngoài <body>. Mọi thứ hiển thị đều nằm trong <body>, kể cả footer.
• Dùng position: fixed để giữ footer ở dưới. Footer cố định che mất nội dung trên màn hình nhỏ và cần thêm padding ở khắp nơi. Hãy dùng mẫu cột flex.
• Dùng <address> cho mọi địa chỉ. Thẻ này dành cho thông tin liên hệ của trang hoặc tác giả bài viết. Địa chỉ cửa hàng trong danh sách chi nhánh chỉ là một <p> bình thường.
• Dựng cột liên kết bằng thẻ <br>. Hãy dùng danh sách <ul> để cấu trúc được đọc ra.
• Ghi cứng năm cũ. Cập nhật năm bản quyền trong template, hoặc in nó ra từ máy chủ hay bước build.