Create a Basic Footer with HTML

Introduction

The <footer> tag can be used to create the footer of a webpage/website. In this lab, you will learn how to create a basic footer using HTML footer tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") subgraph Lab Skills html/basic_elems -.-> lab-70761{{"`HTML Document/Footer Section`"}} html/head_elems -.-> lab-70761{{"`HTML Document/Footer Section`"}} html/para_br -.-> lab-70761{{"`HTML Document/Footer Section`"}} html/lists_desc -.-> lab-70761{{"`HTML Document/Footer Section`"}} html/layout -.-> lab-70761{{"`HTML Document/Footer Section`"}} html/nav_links -.-> lab-70761{{"`HTML Document/Footer Section`"}} end

Set up the basic structure of the webpage

Create a new file with the .html extension, and name it index.html. This is where we will add the HTML code to create a footer.

In this step, we will create the basic structure of the webpage. Here is the code:

<!doctype html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <!-- Header will be here -->
    <main>
      <!-- Main content will be here -->
    </main>
    <!-- Footer will be here -->
  </body>
</html>

Add the following code after the main tag to create a basic footer:

<footer>
  <p>Copyright © 2021 My Webpage. All Rights Reserved.</p>
</footer>

In this example, we have added a simple paragraph tag to the footer with some text. You can customize the footer to add links, authorship information, sitemap, and other content.

Save the index.html file and open it in your web browser. You should see a basic webpage with a footer at the bottom.

In this step, we will customize the footer by adding some more information. Here is an example:

<footer>
  <p>Contact us:</p>
  <ul>
    <li>Email: info@example.com</li>
    <li>Phone: 123-456-7890</li>
  </ul>
  <p>Follow us:</p>
  <ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
  </ul>
</footer>

In this example, we have added two paragraphs and two unordered lists. The first list contains contact information for the website, and the second contains links to social media profiles.

Save the index.html file and open it in your web browser. You should see your custom footer at the bottom of the webpage.

Summary

In this lab, we learned how to create a basic footer using HTML footer tag. The footer tag is used to define the footer of the webpage and can be used to hold various information such as links and copyright data related to the webpage. We also learned how to customize the footer to include contact information and social media links.

HTML Document/Footer Section

Introduction

Skills Graph

Set up the basic structure of the webpage

Add the footer code

Customizing the Footer

Summary

Other HTML Tutorials you may like