<footer>: The Footer element
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <footer> trong HTML biểu diễn footer cho phần tử tổ tiên nội dung sectioning hoặc sectioning root gần nhất của nó. Một <footer> thường chứa thông tin về tác giả của section, dữ liệu bản quyền hoặc các liên kết đến các tài liệu liên quan.
Try it
<article>
<h1>How to be a wizard</h1>
<ol>
<li>Grow a long, majestic beard.</li>
<li>Wear a tall, pointed hat.</li>
<li>Have I mentioned the beard?</li>
</ol>
<footer>
<p>© 2018 Gandalf</p>
</footer>
</article>
article {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
footer {
display: flex;
justify-content: center;
padding: 5px;
background-color: #45a1ff;
color: white;
}
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính toàn cục.
Ghi chú sử dụng
- Đặt thông tin về tác giả trong phần tử
<address>có thể được bao gồm trong phần tử<footer>. - Khi phần tử sectioning content hoặc sectioning root tổ tiên gần nhất là phần tử body, footer áp dụng cho toàn bộ trang.
- Phần tử
<footer>không phải là nội dung sectioning và do đó không giới thiệu một section mới trong outline.
Khả năng tiếp cận
Trước khi phát hành Safari 13, vai trò landmark contentinfo không được VoiceOver hiển thị đúng cách. Nếu cần hỗ trợ các trình duyệt Safari cũ, hãy thêm role="contentinfo" vào phần tử footer để đảm bảo landmark sẽ được hiển thị đúng cách.
Ví dụ
html
<body>
<h3>FIFA World Cup top goalscorers</h3>
<ol>
<li>Miroslav Klose, 16</li>
<li>Ronaldo Nazário, 15</li>
<li>Gerd Müller, 14</li>
</ol>
<footer>
<small>
Copyright © 2023 Football History Archives. All Rights Reserved.
</small>
</footer>
</body>
css
footer {
text-align: center;
padding: 5px;
background-color: #abbaba;
color: black;
}
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung flow, nội dung palpable. |
|---|---|
| Nội dung được phép |
Nội dung flow, nhưng không có phần tử con <footer> hay
<header>.
|
| Bỏ qua thẻ | Không, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha được phép |
Bất kỳ phần tử nào chấp nhận
nội dung flow. Lưu ý rằng phần tử <footer> không được là
phần tử con của <address>,
<header> hoặc phần tử
<footer> khác.
|
| Vai trò ARIA ngầm định |
contentinfo, hoặc
generic
nếu là phần tử con của
article,
aside,
main,
nav hoặc
section element, hoặc
một phần tử với
article,
complementary,
main,
navigation
hoặc
region role
|
| Vai trò ARIA được phép |
group, presentation hoặc
none
|
| Giao diện DOM | HTMLElement |
Thông số kỹ thuật
| Specification |
|---|
| HTML # the-footer-element |