Tutorial

How To Add a Footer To Your Webpage With HTML

Updated on August 9, 2021

Senior Manager, DevEd

How To Add a Footer To Your Webpage With HTML

A website footer is the final block of content at the bottom of a webpage. Footers can contain any type of HTML content, including text, images, and links. In this final tutorial of the series, we’ll create the following basic footer for our webpage using a <footer> element:

Footer

To get started, paste the following code snippet after your closing </div> tag and before your closing </body> tag:

. . .
<!--Footer--> 
<footer style="height:auto; background-color:#F7C201;">
  <h1><Made with 🤍 at DigitalOcean</h1>
</footer>
. . .

In this snippet, <!--Footer--> is a comment that will not be read by the browser and is used to help organize our html file for the purpose of human readability. Below this comment, we have added a <footer> element, specified its background color, and used the style attribute to set its height to automatically adjust to the content inside. A <footer> element is a semantic element in that its name tells the developer the purpose of the content. This is helpful for developers as well as for site visitors who use screen readers. Otherwise, the <footer> element works just like a <div> element.

We have also added text content and an emoji inside the <h1> element. Feel free to change this text content with a message and emoji of your choosing.

Save your file and reload it in the browser to check the results. You should receive something like this:

Unstyled footer

Notice that our footer content is not quite like the one in the demonstration site. Our footer content has a white bottom margin and the text has different styling. To remove the bottom margin and style the text, add the highlighted attributes to your <h1> element like so:

<h1 style="color:white; padding:40px; margin:0; text-align:center;"Made with 🤍 at DigitalOcean</h1>

Save the file and reload it in the browser. You should now have a footer styled in the same manner as the demonstration site pictured at the top of this tutorial.

In this tutorial you have learned how to create and style a footer. You can now explore adding different types of content and styling to your footer using elements from this tutorial series.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


Tutorial Series: How To Build a Website with HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

About the authors
Default avatar

Senior Manager, DevEd

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more