Lompat ke konten Lompat ke sidebar Lompat ke footer

Contoh Penggunaan Footer pada HTML

Tag <footer> pada HTML digunakan untuk mendefinisikan footer pada dokumen HTML. Section ini mengandung informasi footer seperti informasi author, informasi copyright, karir, dan lain sebagainya. Tag footer digunakan bersama dengan tag bodyTag <footer> adalah bagian baru dari HTML5. Elemen footer mempersyaratkan penggunaan tag pembukaan dan juga tag penutup.


Sebelum mempelajari materi tentang Contoh Penggunaan Footer pada HTML, terlebih dahulu pelajari materi tentang: Kotak Dialog pada HTML dan Fungsinya, Tag Figcaption pada HTML dan Fungsinya, dan Tag Figure pada HTML dan Fungsinya.

Dalam pengembangan web, HTML5 menyediakan serangkaian elemen yang memungkinkan pengembang untuk membangun struktur yang lebih semantik dan mudah dimengerti oleh mesin pencari maupun pengguna. Salah satu elemen penting dalam HTML5 adalah tag <footer>, yang digunakan untuk menandai bagian bawah dari sebuah dokumen atau bagian dari sebuah halaman web.

Sebuah tag footer secara umum mengandung informasi pengarang, informasi copyright, informasi kontak, sitemap, link back to top, dokumen terkait, dan masih banyak lagi. Berikut ini contoh ilustrasi tag <footer> pada elemen HTML.

Tag <footer> merupakan elemen HTML5 yang digunakan untuk menandai bagian akhir dari suatu konten atau bagian dari halaman web. Ini berbeda dengan elemen <header>, yang menandai bagian atas dari sebuah halaman.

Tag <footer> pada HTML5 digunakan untuk mendefinisikan bagian footer pada sebuah dokumen HTML. Footer biasanya berisi informasi tambahan tentang dokumen, seperti: Hak cipta, Penulis, Tanggal publikasi, Kontak, dan Link ke halaman lain.

Sintak:
<footer> ... </footer>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Tag Footer HTML

</title>

 

<style>

{

font-size:25px;

text-decoration:none;}

 

{

font-size:25px;}

</style>

</head>

 

<body>

<footer>

 

<nav>

<p>

<

href=

"https://www.penelitian.id/p/about-us.html">

Profil

</a>|

 

<

href=

"https://www.penelitian.id/p/kebijakan-privasi.html">

Kebijakan Privasi

</a>|

 

<

href=

"https://www.penelitian.id/">

BKTIK

</a>

</p>

</nav>

 

<p>

Blog Ilmu Komputer

</p>

 

</footer>

</body>

 

</html>

Output:

Blog Ilmu Komputer


Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

tag footer

</title>

 

<style>

.column 

{

float: left;

width: 27%;

height: 300px;}

 

{

font-size:20px;

font-weight:bold;}

</style>

</head>

 

<body>

<footer>

 

<div class="column">

<p>

Bio

</p>

<ul style="list-style-type:disc">

<li>Profil</li>

<li>Karir</li>

<li>Kebijakan Privasi</li>

<li>Kontak</li>

</ul>

</div>

 

<div class="column">

<p>

Materi

</p>

<ul>

<li>Algoritma</li>

<li>Struktur Data</li>

<li>Bahasa Pemrograman</li>

<li>Materi</li>

<li>Video</li>

</ul>

</div>

 

<div class="column">

<p>

Practice

</p>

<ul>

<li>Company-wise</li>

<li>Topic-wise</li>

<li>Contests</li>

<li>Pertanyaan</li>

</ul>

</div>

 

</footer>

</body>

 

</html>

Output:

Bio

  • Profil
  • Karir
  • Kebijakan Privasi
  • Kontak

Materi

  • Algoritma
  • Struktur Data
  • Bahasa Pemrograman
  • Materi
  • Video

Practice

  • Company-wise
  • Topic-wise
  • Contests
  • Pertanyaan


















Contoh: Berikut penggunaan tag <footer> pada HTML.

<!DOCTYPE html>

<html lang="id">


<head>

<meta charset="UTF-8">

<title>

Contoh Tag Footer

</title>

</head>


<body>

<h1>Judul Halaman</h1>


<p>Isi Halaman</p>


<footer>

<p>

&copy; 2023 - Hak Cipta Milik Saya

</p>


<p>

Penulis: Guru Informatika

</p>


<p>

Tanggal Publikasi: 26 Desember 2023

</p>

</footer>


</body>

</html>


Penjelasan: Pada contoh sebelumnya, tag <footer> digunakan untuk membungkus informasi tentang hak cipta, penulis, dan tanggal publikasi. Tag <p> digunakan untuk membuat paragraf.

Contoh: Penggunaan tag <footer> dalam HTML5 relatif sederhana. Berikut contoh penggunaannya.

<!DOCTYPE html>

<html>


<head>

<title>

Contoh Tag Footer HTML5

</title>

</head>


<body>


<header>

<!-- Konten header -->

</header>


<main>

<!-- Konten utama halaman -->

</main>


<footer>

<p>

&copy; 2023 Nama Perusahaan. Hak Cipta Dilindungi.

</p>


<nav>

<ul>


<li>

<a href="/tentang-kami">

Tentang Kami

</a>

</li>

<li>

<a href="/kontak">

Kontak

</a>

</li>


</ul>

</nav>

</footer>


</body>

</html>


Peran dan Fungsi Tag Footer:
  • Penandaan Bagian Akhir Halaman: Tag <footer> secara khusus digunakan untuk menandai bagian terakhir dari suatu konten, seperti informasi hak cipta, tautan ke halaman terkait, informasi kontak, atau tanda air lainnya yang relevan dengan halaman tersebut.
  • Meningkatkan Keterbacaan: Dengan menggunakan tag <footer>, pengembang web dapat meningkatkan keterbacaan dan struktur halaman, karena mesin pencari dan teknologi bantu dapat mengenali dengan lebih baik bagian akhir dari suatu konten.
  • SEO yang Lebih Baik: Penggunaan tag <footer> secara tepat dapat membantu mesin pencari dalam memahami struktur halaman web. Hal ini dapat berdampak positif pada peringkat SEO, karena mesin pencari cenderung memberikan nilai tambah pada halaman web yang terstruktur dengan baik.

Tips Penggunaan Tag Footer:
  • Gunakan dengan Tepat: Pastikan tag <footer> digunakan untuk menandai bagian akhir yang relevan dari suatu konten atau halaman.
  • Jangan Gunakan untuk Halaman Pribadi: Jika suatu halaman web hanya terdiri dari satu bagian konten (tanpa header atau bagian lainnya), tag <footer> mungkin tidak perlu digunakan.
  • Kepatuhan terhadap Standar: Selalu pastikan penggunaan tag <footer> berada dalam kesesuaian dengan standar HTML5 dan praktik terbaik dalam pengembangan web.

Tag <footer> adalah alat penting dalam membangun halaman web yang terstruktur dengan baik. Dengan menggunakan tag ini secara tepat, pengembang dapat meningkatkan keterbacaan, navigasi, dan SEO halaman web secara signifikan. Oleh karena itu, penting untuk memahami dan mengimplementasikan tag <footer> dengan benar dalam pengembangan web berbasis HTML5.

Kelebihan Tag <footer> dalam HTML5

Dalam pengembangan web dengan HTML5, penggunaan tag <footer> memiliki banyak kelebihan yang membantu dalam meningkatkan struktur, aksesibilitas, dan optimasi mesin pencari pada halaman web. Mari eksplorasi beberapa kelebihan utama dari penggunaan tag <footer> ini:
  • Struktur yang Lebih Semantik: Tag <footer> memberikan struktur yang lebih semantik bagi halaman web. Dengan menggunakan tag ini, pengembang dapat dengan jelas menandai bagian akhir dari suatu konten atau halaman, yang membantu browser dan mesin pencari untuk memahami struktur halaman dengan lebih baik.
  • Meningkatkan Aksesibilitas dan Navigasi: Menggunakan tag <footer> memungkinkan pengembang untuk menempatkan informasi penting seperti tautan navigasi, informasi kontak, atau hak cipta di bagian bawah halaman. Ini membantu pengguna dalam menavigasi lebih mudah dan menemukan informasi terkait atau tautan penting yang berkaitan dengan konten yang sedang dibaca.
  • SEO yang Ditingkatkan: Penggunaan tag <footer> dapat memberikan dampak positif pada optimasi mesin pencari. Dengan memberikan informasi penting atau tautan berkualitas di bagian bawah halaman, ini dapat membantu mesin pencari untuk memahami konteks halaman dengan lebih baik dan meningkatkan peringkat SEO.
  • Ketersediaan untuk Teknologi Bantu: Tag <footer> juga mendukung aksesibilitas web dengan memastikan informasi penting atau tautan navigasi yang diletakkan di bagian bawah halaman dapat diakses dengan mudah oleh teknologi bantu seperti pembaca layar, memastikan pengalaman yang lebih baik bagi pengguna dengan disabilitas.
  • Pemeliharaan yang Lebih Mudah: Pemisahan elemen footer dari konten utama dapat membuat pemeliharaan halaman web menjadi lebih mudah. Dengan memiliki tag <footer> terpisah, pengembang dapat mengelola dan memperbarui informasi atau tautan di bagian bawah halaman tanpa harus mengubah konten utama.
  • Meningkatkan Pengalaman Pengguna: Penyusunan informasi penting di bagian bawah halaman menggunakan tag <footer> dapat meningkatkan pengalaman pengguna secara keseluruhan. Pengguna dapat dengan mudah menemukan informasi kontak, tautan penting, atau hak cipta tanpa harus mencari secara intensif di seluruh halaman.

Tag <footer> dalam HTML5 memiliki peran penting dalam memperjelas struktur halaman web, meningkatkan aksesibilitas, memperbaiki SEO, dan menyediakan akses mudah terhadap informasi penting bagi pengguna. Dengan menggunakan tag ini secara tepat dan sesuai dengan konteks, pengembang dapat membuat halaman web yang lebih terstruktur dan mudah dimengerti oleh pengguna maupun mesin pencari.

Referensi Tambahan:

Artikel ini didedikasikan kepada: Maulana Fadil Ibrahim, Mayang Wulansari, Meidito Dewa Saputra, Mohammad Kafabi Murtajaya, dan Naeli Nurul Amalia.

5 komentar untuk "Contoh Penggunaan Footer pada HTML"

  1. Apa yang dimaksud dengan tag footer pada html?

    BalasHapus
    Balasan
    1. Elemen HTML merepresentasikan footer untuk konten bagian terdekat atau elemen root bagian. Footer biasanya berisi informasi tentang penulis, data hak cipta, tautan, dan lain sebagainya.

      Hapus
    2. Tag footer digunakan dalam bagian elemen body. Tag footer merupakan elemen baru yang disertakan pada HTML5. Elemen footer membutuhkan tag awalan dan juga tag akhiran. Elemen footer biasanya berisi informasi penulisan, informasi hak cipta, informasi kontak, peta situs, tautan back to top, dokumen, dan lain sebagainya.

      Hapus
  2. Apakah tag footer penting untuk disertakan pada website html?

    BalasHapus
    Balasan
    1. Footer pada situs website merupakan elemen yang ditemukan pada bagian bawah dari halaman website, sering kali mendapatkan perhatian yang sedikit dalam bagian perancangn situs atau website. Namun demikian, footer ternyata memiliki peran penting untuk kinerja suatu situs. Dengan footer pengembang bisa menyediakan beberap konten yang sifatnya harus selalu disertakan dalam suatu website namun tidak mengganggu tampilan utama dari website tersebut.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -