Menu

HTML footer Tag

HTML footer Tag

The <footer> tag is used to define the footer of the document. or in simpler words we can say to create the footer of a webpage/website.

  • The <footer> tag is new in HTML5. The <footer> tag can be used to hold various information like links and copyright data related to the webpage or a section of the webpage.
  • The <footer> tag is used inside the <body> tag. The <footer> tag requires both the start(opening) tag as well as the end(closing) tag.
  • The <footer> tag is not sectioning content and therefore doesn't introduce a new section.
  • The <footer> tag is a structural element that is used to identify the footer of a page, document, article, or section.
  • Also, this is a block-level element.

<footer> tag typically contains:

  • authorship information,
  • copyright information,
  • contact information,
  • sitemap,
  • back to top links etc.

HTML <footer> Tag - Syntax and Usage

The <footer> tag requires the start(opening) tag and end(closing) tag.

<footer>
    ..content here
</footer>

HTML <footer> Tag Basic Example

Below we have a basic example for clear understanding of <footer> tag:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Footer Tag Basic Example</title> 
        <style> 
            .column { 
                float: left; 
                width: 27%; 
                height: 300px; 
            } 
            p { 
                font-size:20px; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
    <body> 
        <footer> 
            <div class="column"> 
                <p>Company</p> 
                <ul style="list-style-type:disc"> 
                    <li>About Us</li> 
                    <li>Careers</li> 
                    <li>Privacy Policy</li> 
                    <li>Contact Us</li> 
                </ul> 
            </div> 
                
            <div class="column"> 
                <p>Learn</p> 
                <ul> 
                    <li>Algorithms</li> 
                    <li>Data Structures</li> 
                    <li>Languages</li> 
                    <li>CS Subjects</li> 
                    <li>Video Tutorials</li> 
                </ul> 
            </div> 
                
            <div class="column"> 
                <p>Practice</p> 
                <ul> 
                    <li>Company-wise</li> 
                    <li>Topic-wise</li> 
                    <li>Contests</li> 
                    <li>Subjective Questions</li> 
                </ul> 
            </div> 
        </footer> 
    </body> 
</html>

Another Example:

In this example we will add a few links to the footer, which is usually the case with most of the websites.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>HTML footer Tag</title> 
        <style> 
            a { 
                font-size:25px; 
                text-decoration:none; 
            } 
            p { 
                font-size:25px; 
            } 
        </style> 
    </head> 
    <body> 
        <footer> 
                <p> 
                    <a href= "https://www.studytonight.com/about/">About Us</a> | 
                    <a href= "https://www.studytonight.com/contact/">Contact</a>
                </p> 
            <p>&copy; Studytonight. Rights Reserved.</p> 
        </footer> 
    </body> 
</html>

HTML <footer> Tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes.

Default CSS Settings for HTML <footer> Tag

footer {
    display: block;
}

Browser Support for HTML <footer> Tag

Following browsers support this attribute:

  • Firefox 4+
  • Google Chrome 6+
  • Internet Explorer 9+
  • Apple Safari 5.1+
  • Opera 11.1+