Introduction to Footer Tag in HTML

Footer represents data related to the author, data that contains copyright information or some links related to that data. This author information enclosed within <address> element. This type of tag known as <footer> tag in HTML. Footer Tag in HTML is defined within <footer>tag.

One can use footer element within <article>, <body>, <aside>, <section>, <nav>, <details>, <fieldset>, or on the <figure>. It is always placed within the <body> tag. It is included within the individual blocks. Footer Tag in HTML used to show the footer part of the webpage or any section. <footer> doesn’t work as sectioning element so it doesn’t create a new section in the outline.

Syntax for <footer> Tag:

<body> <footer> <p>Some text</p> </footer> </body>

<footer>tag can be represented within <body> tag enclosed with <footer>–</footer> tag having some text within it which we are going to show within footer section.
<Footer> is one of the most useful elements within the HTML5 webpage or for another HTML document. It is considered as part of individual blocks.
HTML <footer > don’t have any special kind of attributes list, but it supports all global attributes like accesskey, data, class, contenteditable, dir, draggable, hidden, id, lang, dropzone, spellcheck, style, title, translate, etc. as well as event attributes like onafterprint, onbeforeprint, onbeforeunload, onerror, onload, onhashchange, onmessage, onoffline, onpopstate, onstorage, onresize, etc.

Examples of Footer Tag in HTML

There are multiple ways to include footer into the HTML documents; let’s see some of them one by one:

Example #1

Simply include <footer> tag inside the body of the web document like.

HTML Code:

<body> <h2> Footer Example </h2> <footer> <p>Published by EDUCBA</p> <p>Contact us: <a href=”mailto:info@educba.com”> <u> Email US </u> </a> </footer> </body>

Output:

Example #2

Footer object is used to represent most reparative HTML element i.e <footer> element. It can be access through getElementById();.This example illustrates how to access the footer through the object as well as how to create a new object to access footer data.

HTML Code:

<body> <h3>Footer Object Example </h3> <footer id="footerDemo"> <p>all rights reserved @ EDUCBA </p> </footer> <p>Press button to check footer section.</p> <button onclick=" footerFunction()">Click Me</button> <p id="footerobject"></p> <script> function footerFunction() { var f = document.getElementById("footerDemo").innerHTML; document.getElementById(" footerobject ").innerHTML = f; } </script> </body> Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,492 ratings)Course Price
₹6999 ₹41999
View Course

Output:

Example #3

Following is an example of the data that contains copyright information.

HTML Code:

<html> <head> <style type="text/css"> #shareicons img { width: 50px; padding: 10px; display: inline; } </style> </head> <body> <h1>Uday Wire Industries</h1> <h4> <u> About US </u> </h4> <p>We provide all types of HB wires in different size 5.5 mm , 6.5 mm , 7 mm , 8 mm , 12mm.All those wires drawn from the machines which works on new latest technology for producing best quality of HB wires. Those are kinds of raw material which is going to be useful for various wire industries , Cement pipe making industries ,for nails manufacturing industries and many other industries in the market. Nails also in various sizes 1/10' , 1.5/10' , 2/10' , 2.5/10' , 3/10' 4/10 etc. We are dealing with wire rods and cut rods also. Binding wires also with various different types.</p> <h4>Our Specialty</h4> <ul> <li> Good quality </li> <li> Smooth Wire rods</li> <li> perfect coil bundle </li> <li> No cut rods in coil </li> <li> coils in small size packaging bundle </li> </ul> <p>Please send us Your requirements to us .So we can give best to You! <br> Thank You !</p> <h2>Share on</h2> <div id="shareicons"> <a href="https://accounts.google.com/signin/v2/identifier?service=mail&flowName=GlifWebSignIn&flowEntry=ServiceLogin"> <img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email"/> </a> <a href="https://www.facebook.com/login/" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" /> </a> <a href="https://www.google.com/" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" /> </a> <a href="https://in.linkedin.com/" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" /> </a> <a href="https://in.pinterest.com/"> <img src="https://simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" /> </a> <a href="javascript:;" onclick="window.print()"> <img src="https://simplesharebuttons.com/images/somacro/print.png" alt="Print" /> </a> <a href="https://twitter.com/login?lang=en" target="_blank"> <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter"/> </a> </div> <br> <br> <address> <p> Uday wire Industries <br> Shed No. 5 , 6, 7 ,8 <br> Industrial Area, MIDC Sector <br> Pune. </p> </address> <br> <br> <footer> <h4 style="background-color:darkgray;"> All rights reserved @Uday wire Industries </h4></footer> </body> </html>

Output:

Example #4

Following is an example of a Fixed Footer.

HTML Code:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .footerdemo { position: fixed; left: 0; bottom: 0; width: 100%; background-color:blanchedalmond; color: black; text-align: left; } </style> </head> <body> <img src="img.jpg" style="height:20%; width:100%;"> <div class="footerdemo"> <h4>About US</h4> <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Career </a> </li> <li> <a href="#"> Contact US </a> </li> <li> <a href="#"> Visit Here </a> </li> </ul> </div> </body> </html>

Output:

Example #5

In the example below, the footer is used to show copyrights things.

HTML Code:

<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } .header { background-color:aliceblue; padding: 10px; text-align: center; } .part { float: left; width: 25%; padding: 10px; } .footer{ position: fixed; left: 0; bottom: 0; width: 100%; background-color:darkgoldenrod; } </style> </head> <body> <div class="header"> <h1>Latest Technology trends in market </h1> </div> <div class="row"> <div class="part"> <h2>Robotic Process Automation</h2> <p>RPA is latest trending technology which is automating jobs. It deals with the software to automate business methodologies like processingtransactions, replying to the emails, iterpreting with data etc.</p> </div> <div class="part"> <h2>Machine Learing</h2> <p>Machine learing is the process considered as subset of Artificial Intelligence.Its based on neural networks, deep learing and natural language processing (NLP)</p> </div> <div class="part"> <h2>Artificial Intelligence</h2> <p>One of the fastest growing technology is AI, which is based on system which built human intelligence to perform tasks. It helps to complete tasks more perfectly and in short time than humans. </p> </div> <div class="part"> <h2>BlockChain</h2> <p>blockchain is trendy technology in upcoming days for maintaining transactions with encrypted and decentralized nature. Here you are going to make chain of data, so there is no need to trust on third party.</p> </div> </div> <br> <div class="footer"> <h4>All rights reserved @Techpanda 2019</h4> </div> </body>

Output:

Conclusion

So, we can overcome that footer is used to show authors information, copyrights things, some important things, and other data. It always has to put within the body section. One can use more than one footer within documents.

Introduction to Footer Tag in HTML