Tutorialspoint.dev

HTML5 | <footer> Tag

The <footer> tag in HTML is used to define a footer of HTML document. This section contains the footer information (author information, copyright information, carriers etc). The footer tag are used within body tag. The <footer> tag is new in the HTML5. The footer elements require a start tag as well as an end tag.

Syntax :

<footer> ... </footer>

A footer element typically contain authorship information, copyright information, contact information, sitemap, back to top links, related documents etc

Below examples illustrate the <footer> Tag in HTML elements:

Example:



<!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>
            <nav>
                <p>
                    <a href="https://tutorialspoint.dev/slugresolver/about/">About Us</a> |
                    <a href="https://tutorialspoint.dev/slugresolver/privacy-policy/">Privacy Policy</a> |
                    <a href="https://tutorialspoint.dev/slugresolver/careers/">Careers</a
                </p>
            </nav>
            <p>@geeksforgeeks, Some rights reserved</p>
        </footer>
    </body>
</html>                    

Output:

Example 2:

<!DOCTYPE html>
<html>
    <head>
        <title>footer tag</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>

Output:

Browser Support: The footer tag is new in HTML5 and it supports in the browser which are listed below:

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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter