The HTML footer Tag is a special container used to group content at the bottom of a webpage or a section. It usually holds important facts like who wrote the page, copyright dates, and contact links. Think of it as the “bottom margin” of your digital school report that stays organized.
Why do we use it?
- Information: It shows who owns the website and how to find them.
- Organization: It keeps the “end-of-page” stuff separate from the main story.
- Helpful Links: It can hold buttons for social media or a “back to top” link.
- Clean Look: It helps the website look neat by putting boring but important facts in one spot.
Key Rules for the Tag
| Rule | What it means |
| Location | Usually at the bottom of a page, but can be at the bottom of an article. |
| Repeat | You can use more than one footer on a single page if you have many articles. |
| Content | You can put text, links, and even images inside it. |
| Old Tags | Unlike the old frameset tag, this tag is modern and works everywhere. |
HTML footer Tag for beginners
If you are just learning to build sites, the HTML footer Tag is very easy to use. In the past, people used complicated tags like the frameset tag to divide screens, but now we use simple tags like the footer. It is much easier for a student to learn because it just wraps around the text at the bottom.
HTML footer Tag explained
When you use the HTML footer Tag, you are giving the bottom of your page a name. Instead of just using a regular box, you use the footer tag so that search engines (like the ones you use to find games) know where the contact info is. Using this tag is a smart move for any beginner.
Easy Steps to Remember
- Finish writing your main website content.
- Type <footer> to start the bottom section.
- Add your copyright year or your name.
- Type </footer> to close it.
HTML footer Tag with examples
Looking at code is a great way to see how things work. These HTML footer Tag examples show you different ways to use the tag on your own site.
Example 1: A Simple Copyright Footer
This is the most common way to use it. It just tells people who made the page.
HTML
<footer>
<p>Created by: Sam Smith</p>
<p>© 2026 My Awesome Website</p>
</footer>
Example 2: Footer with Links
You can put links inside the HTML footer Tag so people can find your other pages easily.
HTML
<footer>
<p>Contact us at: mail@example.com</p>
<a href=“about.html”>About Me</a> |
<a href=“games.html”>My Games</a>
</footer>
Example 3: Footer inside an Article
You can even put a footer inside a specific story or blog post to show when it was written.
- Story: “The Brave Cat.”
- Footer: Written on January 29 by Mrs. White.
- Result: This keeps the author’s name tied to that specific story.
HTML footer Tag step by step
Let’s build a footer together! This HTML footer Tag tutorial will show you the right way to do it.
Step 1: Find the Bottom
Go to the very end of your HTML code, just before the closing body tag.
Step 2: Open the Tag
Write <footer>. This is the start of your bottom “drawer.” This is a key step in any HTML footer Tag guide.
Step 3: Add Contact Info
Most footers have an email address or a phone number. Use the <address> tag inside your footer for this. It is a HTML footer Tag best practice to keep contact info here.
Step 4: Add the Copyright Symbol
To make the little “C” in a circle, type ©. This looks very professional and shows you know how to use special codes!
Step 5: Close it Up
Close with </footer>. Now your page has a clear ending that the computer can recognize.
HTML footer Tag use cases
There are many HTML footer Tag use cases that you will see on the internet every day.
Common Places to Use It
- School Projects: Put your name, grade, and date at the bottom.
- Business Sites: Put the office address and a map link.
- Blogs: Show the “Related Posts” or “Social Media” icons.
- Portfolio: Show a “Back to Top” button so people don’t have to scroll up.
Why not use the old frameset tag?
Some old lessons might mention the frameset tag. I have changed the focus here to show that while framesets divide the whole screen into messy boxes, the HTML footer Tag is much cleaner. It lets your page flow like a real document.
Important Tips
- Don’t hide it: Make sure your text color is easy to read against the footer background.
- Keep it tidy: Don’t put too much stuff in the footer or it will look cluttered.
- Be honest: Always put the real year so people know your site is new.
You can use CSS to make your footer stay at the bottom of the screen even if the page is short. This is a vital part of making a site look great!
FAQs
Can I have more than one footer?
Yes! You can have one for the whole page and one inside every <article> or <section> you write.
Do I have to put the copyright symbol in it?
No, you don’t have to, but most people do it to show they own their work.
Does the footer always have to be at the bottom?
Usually, yes. While you can move it with CSS, it makes the most sense to keep it at the end of your content.
Can I put a menu in my footer?
Yes! Many websites put a “Site Map” or a list of links in the footer to help people find their way.
Is the footer tag new?
It was added in HTML5. Before that, people used <div> tags, but the footer tag is much better for computers to read.
|
🔹 Web Development Introduction & Fundamentals
|
|
🔹 Frontend Development Basics
|
|
🔹 HTML Fundamentals
|
| HTML Dir Tag |
| HTML Dfn Tag |
| HTML Del Tag |
| HTML DD Tag |
| HTML Data Tag |
|
🔹 CSS Fundamentals & Layouts
|
|
🔹 JavaScript Basics & Core Concepts
|
|
🔹 Frontend Frameworks & Libraries
|
|
🔹 Backend Development Basics
|
|
🔹 Databases & Storage
|
|
🔹 Full Stack Web Development
|
|
🔹 Responsive, Mobile & Cross-Browser Design
|
|
🔹 Web Hosting, Deployment & DevOps
|
|
🔹 Web Development Tools
|
|
🔹 Web Developer Interview & Preparation
|
|
🔹 Web Development Jobs & Career
|
|
🔹 Comparisons & Technology Choices
|
|
🔹 Web Trends & Advanced Topics
|
|
🔹 Other / Unclassified Web Development Topics
|