Pinned

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.

2 Contoh Sederhana Cara Mendefinisikan Footer pada HTML5
Ilustrasi Footer HTML5

Sebelum memahami lebih dalam materi tentang Contoh Penggunaan Footer pada HTML, terlebih dahulu pelajari materi tentang: Tag Figure pada HTML dan Fungsinya [klik], Tag Figcaption pada HTML dan Fungsinya [klik], dan Kotak Dialog pada HTML dan Fungsinya [klik].

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

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

Baca Juga: 

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


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


















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

5 komentar:

  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-2514-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 come from small things -