- Home
- /
- Tutorials
- /
- HTML Tutorial
- /
- HTML <footer> Tag
HTML Tags
HTML <footer> Tag
The
<footer>tag represents a footer section for its nearest sectioning content (like<body>,<article>,<section>).
It typically contains copyright info, author details, navigation links, or contact information.
Syntax
html
<footer>
<!-- Footer content like copyright, links, contact info -->
</footer>Attributes
| Attribute | Description |
|---|---|
| id | Assigns a unique identifier. |
| class | Specifies one or more class names. |
| style | Inline CSS styling. |
| title | Additional information about the element. |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Tag Example</title>
</head>
<body>
<main>
<h1>Welcome to My Website</h1>
<p>This is an example of semantic footer usage.</p>
</main>
<footer style="background-color: #f0f0f0; padding: 15px; text-align: center;">
<p>© 2025 My Website. All rights reserved.</p>
<nav>
<a href="#">Privacy Policy</a> |
<a href="#">Terms of Service</a>
</nav>
</footer>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
All major browser supports <footer> tag.
Notes
<footer>is semantic, providing meaning to the page structure.- Can appear multiple times (e.g., for a main footer and individual articles).
- Helps improve SEO and accessibility.
- Can contain text, links, forms, or scripts.
Conclusion
The <footer> tag is ideal for bottom-of-page or section content, like copyright, contact, or links.
It adds semantic meaning and structural clarity to web pages.
