HTML footer tag | belajar <footer> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML footer tag. Tutorial dan panduan mengenai element <footer>...</footer> yang digunakan pada catatan kaki (bagian bawah element). Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <footer>.

Deskripsi
Penjelasan HTML

HTML <footer> element merepresentasikan sebuah catatan kaki (bagian kaki / footer) untuk elemen yang menaunginya (berada di dalamnya), seperti catatan kaki pada sebuah <article> element, <section> element, catatan kaki untuk induk dokumen (<body> element) dan lain sebagainya.

Di dalam <footer> element, dapat ditulis konten yang berkaitan dengan informasi mengenai penulis artikel atau dokumen, lisensi atau hak cipta tulisan dan beberapa link yang berkaitan dengan dokumen tersebut.

<footer> tidak boleh ditulis di dalam <address>, <header> dan <footer> element lainnya (bertumpuk / nested).

<footer> element tidak digunakan untuk mengelompokkan konten (sectioning content) dan ia tidak menunjukkan bagian baru (new section).

Global Attributes
Atribut Secara Global (Keseluruhan)

<footer> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<footer> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <footer> element

Contoh 1

Contoh <footer> yang berisi deretan link yang biasanya terletak dibawah halaman.

HTML 
<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>
</footer>
Contoh 2

Contoh <footer> yang didalamnya terdapat <address> element. Contoh ini, biasanya ditulis didalam <article> element yang menginformasikan mengenai penulis artikel tersebut.

HTML 
<footer>
  <address>
    Penulis: <a href="mailto:contohemail@example.com?Subject=Hai%20Sobat">dul</a> <br/>
    Website: http://www.apacara.com
  </address>
</footer>

Bila Contoh 1 dan Contoh 2 digabungkan, hasilnya dapat dilihat dan diedit secara lengkap pada demo editor dibawah ini:

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML footer tag</title>
    <style>
      ul {text-align:center}
      ul li {display:inline;}
    </style>
  </head>
  <body>
    <article>
      <h1>Apa itu Pisces?</h1>
      <p>Pisces adalah habitat hewan yang hidup di air dengan bernafas menggunakan insang. Contohnya, ikan.</p>
    <footer>
      <address>
        Penulis: <a href="mailto:contohemail@example.com?Subject=Hai%20Sobat">dul</a> <br/>
        Website: http://www.apacara.com
      </address>
    </footer>
    </article>

    <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>
    </footer>
  </body>
</html>
SHARE
Previous Article Next Article