HTML - <footer> Tag

Quiz

Introduction to the <footer> Tag

The HTML <footer> tag is used to specify the footer for its nearest preceding 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 does not divide 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 <footer> tag −

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

Attributes

The HTML <footer> tag supports both Global and Event attributes.

Example: Creating a Footer Section

In following example showing the usages the HTML <footer> tag to create a website's footer section. This HTML code lists fronted technologies and includes a footer with copyright information for "fronted technologies" in 2023.

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

Example: Styling Footer using CSS

Consider the following example, where we use the <footer> tag and apply CSS properties. This HTML code styles a footer and a navigation with the list items, links, and a centered, styled footer section.

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

Example: Adding Image to a Footer

In this example, the <img> tag is used within the <footer> tag to include an image in the footer of the HTML code creates a centered footer containing a logo image and copyright text.

<!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"> &copy 2023 
   </footer>
</body>
</html>

Example: Adding a GIF to a Footer

Let's consider another scenario, where we use the <img> tag within the <footer> tag to include a GIF in the footer of 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

Print Page