HTML - <footer> Tag

The 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

Following is the syntax of the <footer> tag −

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

Example

The following program showing the usages the HTML <footer> tag.

<!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>

When we run the above code, it will generate an output consisting of the list item along with a footer text displayed at the bottom of the webpage.

Example

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>

On running the above code, the output window will pop up, consisting of the navigation bar along with a footer applied with a CSS displayed on the webpage.

Example

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;
         height: 50px;
         border: 2px solid black;
         text-align: center;
      }

      footer>img {
         width: 200px;
         position: relative;
         top: 5px;
      }
   </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=""> © 2023 
   </footer>
</body>
</html>

When we run the above code, it will generate an output consisting of the img uploaded to the webpage at the footer section of the page.

Example

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: 30px;
         height: 30px;
         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>

When we run the above code, it will generate an output consisting of the gif type img in the footer section displayed on the webpage.

html_tags_reference.htm
Advertisements