HTML - <footer> Tag

HTML <footer> tag is used to specify the footer for its nearest predecessor document or section. Generally, the footer element contains information about the author of the section or document, copyright data, or links to related documents

The <footer> element is not dividing the content and therefore does not introduce a new section in the outline. We can also use the img and video elements within the <footer> tag to specify the footer images and videos.

Syntax

<footer>.....</footer>

Attribute

HTML footer tag supports Global and Event attributes of HTML.

Examples of HTML footer Tag

Bellow examples will illustrate the usage of footer tag. Where, when and how to use footer tag to create footer elements of any website.

Creating Footer Section using footer Tag

In following example showing the usages the HTML <footer> tag to create a footer section of a website.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML footer tag</title>
</head>
<body>
   <h1>Following are list of the frontend technologies.</h1>
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Bootstarp</li>
      <li>Angular</li>
      <li>React</li>
   </ul>
   <footer>
      <small>Copyright © frontend technologies 2023.</small>
   </footer>
</body>
</html>

Styling the footer Element

Consider the following example, where we are going to use the <footer> tag and applying the CSS properties.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML footer tag</title>
   <style>
      footer {
         width: 92%;
         margin: auto;
         background-color: rgb(7, 7, 114);
         color: white;
         text-align: center;
         padding: 10px;
         border-radius: 10px;
         position: relative;
         top: 100px;
      }

      ol li {
         list-style: none;
         display: inline;
         width: 100px;
      }

      ol li a {
         text-decoration: none;
         background-color: aquamarine;
         padding: 10px;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <nav>
      <ol>
      <li>
         <a href="">HOME</a>
      </li>
      <li>
         <a href="">BLOG</a>
      </li>
      <li>
         <a href="">ContactUs</a>
      </li>
      <li>
         <a href="">About</a>
      </li>
      </ol>
   </nav>
   <footer> copyright © 2023. </footer>
</body>
</html>

Implementing image in footer Element

In this example, we are using the <img> tag within the <footer> tag to specify the footer image for the HTML document or section.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML footer tag</title>
   <style>
      footer {
         width: 90%;
         margin: auto;
         padding: 5px;
         height: 50px;
         border: 2px solid black;
         text-align: center;
      }

      footer>img {
         width: 200px;
         position: relative;
         top: 15px;
      }
   </style>
</head>
<body>
   <h2>'footer' tag with the img element example</h2>
   </nav>
   <footer> 
      Copyright <img src=
"https://www.tutorialspoint.com/static/images/logo.png?v3" 
            alt="logo"> © 2023 
   </footer>
</body>
</html>

Implementing gif in footer Element

Let's look at the another scenario , where we are going to use the <img> tag within the <footer> tag to specify the footer GIF for an HTML document or section.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML footer tag</title>
   <style>
      footer {
         width: 90%;
         margin: auto;
         height: 50px;
         border: 2px solid black;
         text-align: center;
      }

      footer>img {
         width: 10px;
         height: 10px;
         position: relative;
         top: 5px;
         border: 5px solid black;
      }
   </style>
</head>
<body>
   <h2>'footer' tag with the img(type GIF) element example</h2>
   </nav>
   <footer> 
    Copyright 
        <img src="/html/images/rotate.gif" alt="">
    © 2023 </footer>
</body>
</html>

Supported Browsers

Tag
footer	Yes 5.0	Yes 9.0	Yes 4.0	Yes 5.0	Yes 11.1

html_tags_reference.htm