View video tutorial
HTML Footer
HTML
The <footer> tag defines a footer contents for a document, section or a page.
HTML footer tag
The <footer> tag provides the footer content of a web page.
Rooter usually contains copyright or author information in the HTML document.
Footer also contains contact information, sitemap, back to top links of the page.
The <footer> contains general information and link that are common to all pages,So best practice is to make this footer reusable to all pages in the web site.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Footer Example</title>
<meta charset="utf-8" />
<style>
.footer {
width: 100%;
background-color: #5f5f5f;
padding: 10px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h2>HTML Footer Example</h2>
<div class="footer">
<p>© Copyright 2022</p>
</div>
</body>
</html>Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Footer Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
.container {
margin: 10px;
}
#left {
border: 1px solid blue;
width: 33%;
float: left;
height: 200px;
}
#middle1 {
border: 1px solid blue;
width: 33%;
float: left;
height: 200px;
}
#right {
border: 1px solid blue;
width: 34%;
float: right;
height: 200px;
}
.section {
border: 1px solid green;
height: 95%;
margin: 5px;
}
.hcenter {
display: flex;
justify-content: center;
}
/**********/
.footer-left {
height: 150px;
width: 100%;
border: 1px solid red;
}
.footer-left a {
text-decoration: none;
display: inline;
padding: 2px 5px;
text-align: center;
font-size: 10pt;
color: black;
margin: 0;
font-family: sans-serif;
}
.footer-left a:hover {
background-color: black;
padding: 5px;
color: white;
}
/**********/
.footer-center {
margin-top: 10px;
height: 150px;
width: 100%;
border: 1px solid red;
}
/**********/
.footer-right {
margin-top: 10px;
height: 150px;
width: 200px;
float: right;
border: 1px solid red;
}
.footer-icons a {
font-size: 12pt;
color: black;
padding: 10px;
margin: 5px;
}
.footer-icons :hover {
background-color: black;
color: white;
}
.about {
padding: 0 15px 0 15px;
text-align: justify;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div id="left">
<section class="section hcenter">
<div class="footer-left">
<center>
<h3>Company<span>logo</span></h3>
</center>
<p style="margin:10px;text-align:center;">
<a href="#">Home</a>|
<a href="#"> Blog</a>|
<a href="#">About</a>|
<a href="#">Contact</a>
</p>
<center>
<p>Company Name©2022</p>
</center>
</div>
</section>
</div>
<div id="middle1">
<section class="section hcenter">
<div class="footer-center">
<div style="margin:10px;">
<i class="fa fa-map-marker"></i>
<p style="display:inline;margin-left:10px;"><span>722 ND AVE ,</span><br /> <span
style="margin-left:25px;">Florida USA .</span></p>
</div>
<div style="margin:10px;">
<i class="fa fa-phone"></i>
<p style="display:inline;margin-left:10px;">+1.123.123.1234</p>
</div>
<div style="margin:10px;">
<i class="fa fa-envelope"></i>
<p style="display:inline;margin-left:10px;"><a style="color:black;"
href="mailto:support@company.com">info@domain.com</a></p>
</div>
</div>
</section>
</div>
<div id="right">
<section class="section hcenter">
<div class="footer-right">
<p class="about">
<span>About the company</span>
Lorem ipsum dolor sit amet auctor vehicula.
</p>
<div class="footer-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>Click on the "Try it Now" button to see how it works.