Table of Contents
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:
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 the cloud provider</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:
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 the cloud provider</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.
