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.

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.

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



Comments