Open-Source Internship opportunity by OpenGenus for programmers. Apply now.
HTML is the standard markup language for creating websites and web pages that can be read by web browsers. HTML is organized into sections that give each section some meaning. Just like a books page can be organized as having a heading with a title and some notes, a body with some paragraphs and a footer with some information, HTML tries to organise in a similar way. The "footer" tag is one such important html tag.
<html>
<head>
</head>
<body>
<header>
<header/>
<section>
<article>
</article>
<footer>
<a href="similar article"></a>
</footer>
<section/>
<footer>
<p>Author: Zvinodashe Mupambirei</p>
<a href="https://twitter.com/Zed_Developer">Lets connect on Twitter</a>
</footer>
</body>
</html>
The "footer" tag is normally used for defining the footer or end part of a section on html page. Is it not similar to a "div" one may ask? Well, due to the rising importance of ensuring accessibility of web pages, screen readers, ARIA, and need for readable html code it is import to rely on semantic HTML. Semantic html allows proper description of use of a tag to a browser and other developers. "footer" like "article", "header" tag is one of the newer tags to help structure a page.
As seen in the example markup, a page can have several footer elements. Each "footer" will have information about its containing element. The first "footer" in the section will have information about the article. The second "footer" in the "body" has information about the page author.
Usage of tag
- author information
- copyright information
- contact information normally inside and "address" tag
- links to related topic, content or documents
- sitemap
- notes on article
Parent tags
- Any html tag that is in the flow contect category
DOM Interface
- HTMLELement
Global Attributes
Also supports and only includes global attributes.
Event Attributes
Also supports the Event Attributes in HTML.
Default CSS Settings
footer {
display: block;
}
Browser support
Full browser support starts from the versions below
- CHROME 5.0
- INTERNET EXPLORER 9.0
- FIREFOX 4.0
- OPERA 11.1
- SAFARI 5.0
Impact of ommitting tag
Not using the "footer" tag will not break the html page. However as stated earlier the need for semantic html makes it a good practise to use when relevant. When used both opening and closing tags are required
Summary why good to use "footer tag"
- organize your page into relevant sections
- allow browser extensions to identify your code
- allow screen readers to make sense of your code
- allow your code to be readable to other developers
- semantic html, accessibility
