footer | Codingku

Tag <footer> mewakili footer dari dokumen HTML atau bagian dalam dokumen.

Footer biasanya berisi informasi seperti informasi penulis, informasi hak cipta, tautan ke ketentuan penggunaan, kebijakan privasi, dll.

Syntax

Tag <footer> ditulis seperti <footer></footer> dengan konten footer diletakkan diantara tag pembuka dan penutup.

<footer>
	Footer content...
</footer>

Contoh Sederhana

<!doctype html>
<html>
<head>
	<title>Page title...</title>
</head>
<body>
	<header>
		<h1>Heading</h1>
		<b><p>Header content...</p></b>
	</header>
	<nav>
		Nav content...
	</nav>
	<main>
		<article>
			<p>Article content...</p>
		</article>
	</main>
	<footer>
		Footer content...
	</footer>
</body>
</html>

<!doctype html>
<html>
<head>
	<title>Page title...</title>
</head>
<body>
	<footer>
		Footer content...
	</footer>
	<main>
		<article>
			<p>Article content...</p>
		</article>
	</main>
</body>
</html>

<!doctype html>
<html>
<head>
	<title>Page title...</title>
</head>
<body>
	<footer>
		<a href="/">Home</a>
	</footer>
	<main>
		<article>
			<p>Article content...</p>
		</article>
	</main>
	<footer>
		<a href="/">Home</a>
	</footer>
</body>
</html>

Contoh Section Footer

<!doctype html>
<html>
<head>
	<title>Page title...</title>
</head>
<body>
	<main>
		<article>
			<p>Article content...</p>
			<footer>
				Footer content...
			</footer>
		</article>
		<article>
			<p>Article content...</p>
			<footer>
				Footer content...
			</footer>
		</article>
	</main>
	<footer>
		Footer content...
	</footer>
</body>
</html>

Contoh sebagai Alamat

<!doctype html>
<html>
<head>
	<title>Page title...</title>
</head>
<body>
	<main>
		<article>
			<p>Article content...</p>
		</article>
	</main>
	<footer>
		<address>
			Contact: <a href="mailto:homer@example.com">Homer Shakespeare</a>
		</address>
	</footer>
</body>
</html>

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <footer> dengan pengaturan CSS:

footer {
  display: block;
}