Some text some message..
Some text some message..
Some text some message..
Some text some message..

Elemen Footer Pada HTML

previous Previous Page

Elemen footer adalah elemen struktural yang digunakan untuk mengidentifikasi bagian catatan kaki sebuah halaman, dokumen, seksi, ataupun suatu artikel. Elemen footer biasanya diletakkan pada bagian paling bawah halaman HTML. Konten 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 elemen header, elemen header diperuntukkan untuk catatan atas sedangkan footer merupakan catatan bawah/kaki. Penempatan tag <footer> berlawanan dengan tag <header> karena diletakkan pada bagian paling bawah halaman html sedangkan tag <header> berada 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.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo menggunakan elemen footer</title>
6.     <style>
7.     footer{
8.       text-align: center;
9.     }
10.    ul li{
11.      display: inline;
12.    }
13.    a{
14.      padding: 5px;
15.      text-decoration: none;
16.    }
17.    </style>
18. </head>
19. <body>
20.    <article>
21.    <h1>Lorem ipsum</h1>
22.    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>
23.    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.
24.    </article>
25.    <hr>
26.    
27.    <footer>
28.    <ul>
29.      <li><a href="contact.html">Kontak</a></li>
30.      <li><a href="about.html">Mengenai</a></li>
31.      <li><a href="copyright.html">Copyright</a></li>
32.      <li><a href="privacy.html">Privacy Policy</a></li>
33.      <li><a href="sitemap.xml">Sitemap</a></li>
34.    </ul>
35.      Copyright© <a href="?">Maju Bersama.ltd</a> - 2020
36.    </footer>
37.  </body>
38.  </html>

Jika kode tersebut dijalankan maka hasilnya sebagai berikut :

footer html

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.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo menggunakan elemen footer</title>
6.     <style>
7.     footer{
8.       text-align: center;
9.     }
10.    .article_footer{
11.      text-align: left;
12.      color: #888;
13.    }
14.    
15.    ul li{
16.      display: inline;
17.    }
18.    a{
19.      padding: 5px;
20.      text-decoration: none;
21.    }
22.    </style>
23. </head>
24. <body>
25.    <article>
26.    <h1>Lorem ipsum</h1>
27.    <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>
28.    <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>
29.    <footer class='article_footer'>
30.    Dipublikasikan <time datetime="2020-07-04T11:17+07:00">04 Juli 2020</time><br>
31.    Kategori :<br>
32.    Pendidikan, Hiburan, Pariwisata, Teknologi
33.    </footer>
34.    </article>
35.    <hr>
36.    
37.    <footer>
38.    <ul>
39.      <li><a href="contact.html">Kontak</a></li>
40.      <li><a href="about.html">Mengenai</a></li>
41.      <li><a href="copyright.html">Copyright</a></li>
42.      <li><a href="privacy.html">Privacy Policy</a></li>
43.      <li><a href="sitemap.xml">Sitemap</a></li>
44.    </ul>
45.      Copyright© <a href="?">Maju Bersama.ltd</a> - 2020
46.    </footer>
47.  </body>
48.  </html>
49. 
footer html

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<footer>yayayayaya

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:

footer{
display : block;
}

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML