Table of Content
The <footer> tag defines a footer section in HTML. It creates a clear endpoint for a page or section. Browsers and tools recognize it to help parse the document.
It groups details such as copyright or legal information. Authors use it to show site ownership or contact details.
You usually place it at the bottom of a page or article. It adds structure and improves accessibility for users and screen readers.
HTML <footer> Tag Syntax
The syntax looks like this.
<footer>
<p>© 2025 MySite</p>
</footer>You write it like this to mark footer content. You can place paragraphs, navigation links, or addresses inside. It acts as a block-level element and accepts flow content.
Place <footer> inside <body>, <article>, or <section>. Inline elements cannot contain it. It’s place at the end of the <body> for a site-wide footer.
Also, don’t nest one <footer> inside another or inside a <header>. Place it to match the semantic structure of your content.
So, why does the HTML footer tag matter for SEO?
Screen readers identify it as the end of a page or section. Search engines treat it as a signal for key details such as contact or copyright info.
It adds clear structure and semantics to your content. The HTML Footer tag allows keyboard users to navigate sections with ease.
Examples of HTML <footer> Tag
Footer with Navigation Links:
<footer>
<nav>
<a href="#">Home</a> |
<a href="#">About</a>
</nav>
</footer>Contains quick navigation links for better user access.
Footer with Contact Info:
<footer>
<address>
Email: info@example.com
</address>
</footer>Shows contact details to help users reach you easily.
Styled Footer with CSS:
<footer style="background:#333;color:#fff;padding:1em;">
<p>Footer Content Here</p>
</footer>Adds styling directly to make the footer stand out.
Semantic Footer with Multiple Sections:
<footer>
<section>
<h4>About</h4>
<p>Info here.</p>
</section>
<section>
<h4>Links</h4>
<a href="#">Contact</a>
</section>
</footer>Group content in sections for a clear structure and SEO.
Wrapping Up
In this tutorial, you learned what the HTML <footer> tag does and how to use it. You saw where to place it, how it works with SEO and accessibility, and what content it usually holds.
Here is a quick recap:
- The
<footer>tag defines the end of a section or page. - You can use it to hold copyright, links, or contact details.
- You place it at the end of
<body>,<article>, or<section>. - It improves structure, screen reader access, and search indexing.
- CSS lets you style it clearly and responsively.
- Modern browsers support it fully without extra setup.
What is the purpose of the tag in HTML?
How is the
Can
What does the
Can the
Should
Similar Reads
The HTML blockquote tag defines a long quote from another source. It sets the quoted text apart from other content.…
The HTML canvas tag draws shapes and images. It also helps you draw text with code. It gives control over…
The HTML bdi tag marks text that has an unknown or mixed direction. It makes sure that this part does…
In this article, you will learn how the browsers read nested lists in HTML and how to use them with…
HTML select tag and option tags let users pick values in a form. You use them to create dropdowns. The…
The <wbr> tag in HTML helps the browser decide where it can break a word. It does not force a…
The address tag in HTML shows contact details. The <address> tag helps show who owns the page or article. Understand…
The nav tag defines a navigation block in HTML. It holds main links to other parts of your site. Search…
The HTML hidden attribute hides elements from users but keeps them in the code. You can use it when you…
HTML code does not always show the same result on every browser. Old browsers follow outdated rules while modern browsers…
