HTML tag elemen footer merupakan elemen struktural yang digunakan untuk mengidentifikasi bagian catatan kaki sebuah halaman, dokumen, seksi, ataupun artikel. Elemen footer biasanya diletakkan pada posisi bagian paling bawah suatu halaman HTML. HTML tag elemen footer dapat berisi informasi tentang nama perusahaan, kontak, copyright dan nama pembuat web.
Elemen footer juga dapat digunakan sebagai menu navigasi pelengkap yang belum disertakan pada menu utama. Jika anda sebelumnya sudah mempelajari HTML tag elemen header, elemen tersebut ditujukan untuk bagian catatan atas sedangkan footer ditujukan pada bagian catatan bawah (kaki). Penempatan HTML tag <footer> berlawanan dengan HTML tag <header>. Hal ini disebabkan karena HTML tag footer diletakkan pada bagian paling bawah konten halaman sedangkan HTML tag <header> diletakkan pada bagian paling atas halaman HTML.
Pada halaman HTML yang mempunyai artikel yang cukup panjang, didalam footer dapat diberi navigasi yang sama yang sebelumnya berada di menu navigasi atas. Hal ini membantu memudahkan pengguna agar tidak perlu melakukan scolling/penggulungan layar ke atas, karena menu pengganti sudah berada di bagian elemen footer.
Berikut ini contoh penggunaan elemen footer pada halaman html :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Elemen tag FOOTER</title>
<style>
footer{
text-align: center;
}
ul li{
display: inline;
}
a{
padding: 5px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Belajar Menggunakan HTML Elemen tag FOOTER</h1>
<article>
<h1>Lorem ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br>
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
</article>
<hr>
<footer>
<ul>
<li><a href="contact.html">Kontak</a></li>
<li><a href="about.html">Mengenai</a></li>
<li><a href="copyright.html">Copyright</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="sitemap.xml">Sitemap</a></li>
</ul>
Copyright <a href="?">Maju Bersama.ltd</a> - 2020
</footer>
</body>
</html>
Jika kode tersebut dijalankan maka hasilnya sebagai berikut :
Di dalam satu halaman web, biasanya terdapat hanya satu buah elemen footer saja. Sebenarnya elemen footer dapat diletakkan di dalam seksi-seksi lain yang merupakan bagian dari induk dokumen. Elemen footer ini adalah catatan kaki untuk memperjelas informasi bagi setiap seksi atau induk dokumen tersebut.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Elemen tag FOOTER</title>
<style>
footer{
text-align: center;
}
.article_footer{
text-align: left;
color: #888;
}
ul li{
display: inline;
}
a{
padding: 5px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Belajar Menggunakan HTML Elemen tag FOOTER</h1>
<article>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.</p>
<footer class='article_footer'>
Dipublikasikan <time datetime="2020-07-04T11:17+07:00">04 Juli 2020</time><br>
Kategori :<br>
Pendidikan, Hiburan, Pariwisata, Teknologi
</footer>
</article>
<hr>
<footer>
<ul>
<li><a href="contact.html">Kontak</a></li>
<li><a href="about.html">Mengenai</a></li>
<li><a href="copyright.html">Copyright</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="sitemap.xml">Sitemap</a></li>
</ul>
Copyright <a href="?">Maju Bersama.ltd</a> - 2020
</footer>
</body>
</html>
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <footer> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <footer> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <footer> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <footer> pada HTML:
CSS
1
2
3
Previous Pagefooter{
display : block;
}
Halaman Terkait
 | Elemen Header Pada HTML html |
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
