Footer HTML marks supporting information for the nearest page or section. Use one document-level footer for site-wide details, or place a footer inside an article when the information belongs specifically to that article.
The element provides meaning, not a fixed visual position. CSS determines whether the footer stays in normal flow, appears at the bottom of a layout, or changes position at a particular viewport width.
What does footer HTML represent, and does it set a visual position?
The footer element represents closing or supporting content for its nearest sectioning context. At page scope, it describes information about the whole document. Inside an article, it describes information about that article. Inside another sectioning element, such as section, it belongs to that section.
A footer tag HTML example is interpreted by this surrounding structure; the element does not automatically mean “the bottom of the screen.” It can contain copyright information, related links, author details, publication dates, contact information, or other content associated with its scope.
A document footer does not have to be the final child of the body. Place it where the document structure and reading order make sense, then use CSS for spacing, alignment, columns, backgrounds, or fixed positioning.
How should a document-level footer be marked up with site information and navigation?
Use a document-level footer for information that supports the entire site or page. Site identification, a navigation list, legal links, and general contact details are appropriate examples. The following footer HTML code shows those items together:
<footer> <p>© 2025 Example Journal</p> <nav aria-label=”Footer navigation”> <ul> <li><a href=”/about”>About</a></li> <li><a href=”/privacy”>Privacy</a></li> <li><a href=”/contact”>Contact</a></li> </ul> </nav> <address>Email: <a href=”mailto:[email protected]”>[email protected]</a></address> </footer>
The nav element identifies the group as navigation, while the list organizes its links. The address element is suitable for contact information related to the site or its owner. A footer can contain several navigation groups, but each group should have a clear purpose and accessible label.
For a page-specific shell, the same structure can sit after the main content inside a wrapper. Its scope remains document-level if it is not nested inside an article or another sectioning context.
When should you use the HTML footer tag inside an article for author metadata?
Use an article footer when the information describes the article rather than the whole site. Common content includes the author, publication date, update date, categories, tags, licensing information, or links to related article resources.
This example shows an article footer with author metadata:
<article> <h2>Choosing Accessible Color Contrast</h2> <p>Readable contrast supports visitors across devices and lighting conditions.</p> <footer> <p>Written by Maya Chen</p> <p>Published on January 12, 2025; updated on February 3, 2025</p> </footer> </article>
Here, the inner footer belongs to the article because it is nested within the article element. A separate site footer can still appear outside the article and provide global navigation or contact details. Do not use an article footer merely to force content below the article with CSS.
What belongs in footer HTML code, including contact details?
Choose footer content according to scope:
- Document scope: site name, copyright notice, global navigation, privacy links, accessibility information, and general contact details.
- Article scope: author name, publication or update dates, categories, tags, licensing details, and article-specific related links.
- Section scope: supporting information that applies only to that section, such as a section editor or a link to its complete archive.
Keep the structure meaningful. Use paragraphs for short notices, lists for groups of links, and navigation markup for a distinct navigation region. Contact details can appear in an address element when they identify the relevant site, organization, or author. A footer supplies semantics and reading structure; it does not create columns, a sticky bar, a bottom alignment, or any other visual treatment without CSS.