HTML5 Footer Tags - How to Add Them to Your Pages

Udemy Editor

The new HTML element tags offered by HTML5 promise to make website developers lives a little more structured and a little easier. HTML tags like the new header and HTML5 footer tags are far cleaner and more organized than the old division tags. Not that division tags have been scrapped, but the new tags provide a better way to structure your information on the page. If you want to learn about HTML5 and how to use the new features in your web pages, enroll in the HTML5 Beginners Crash Course now. This course has 46 lectures designed to teach you web development in HTML5 from scratch. The course starts with 15 lessons that will teach you the basics of HTML. You will then learn all about HTML5 and elements like using the canvas element for drawing. The course will teach you how to add geolocation, local storage and advanced forms to your website. You will learn how to embed video and audio.

This tutorial will show you how to use the new footer tag within your HTML5 pages to structure the footer for your page and for the sections on your page. To use the footer tag, you need to:

1. Create an HTML5 document

2. Add the footer tag to sections

3. Add the footer tag to the page itself

Create an HTML5 Document

To create an HTML5 document you need to use the DOCTYPE tag at the start of the page. An HTML5 page has the following structure:

<!DOCTYPE html><html><body></body></html>

Add Footer Tags to the Sections

There are a number of new tags available in HTML5. The article tag for example creates a section that browsers will recognize as an article. The header tag creates a header section for the page.

The footer tag can be placed within any section of the page or in a number of sections on the page. Let’s create an article section and then add a footer tag to add the article details, like author, date, sources etc.

Take a look at the code below

<!DOCTYPE html><html><head></head><body>
<article>
<header>
<h1>My New Article</h1>
<h3>My Footer Tutorial</h3>
</header>
<p> This is an article about how to add a footer to a section.</p>
<p> This is part of the article section of our page.</p>
</br>
<p>The footer section will contain the author name and post date</p>
<br>
<footer>
<font color="blue" style="font-size:14px" face="verdana">
<p>Author: Brigitta Schwulst</p>
<p>Date: 31 May 2014</p>
</font>
</footer>
</article>
</body>
</html>

The code creates an article section by using the article tag. We then added a header section to our article section for our article heading. Then we have the body of the article and finally we add a footer tag to include details about the author and publication date of our article.

The article, header and footer tags make indexing by bots easier for search engine purposes. Although there has been no confirmation that search engines have implemented the new tags in their search and SEO algorithms yet, experts seem to agree that pages formatted using the new HTML5 tags will be indexed better in future by search engines.

Footers within your sections should be used to reflect important information about that section. A page footer should be used to include important information about the page and the website. It is important to note that not all browsers currently support HTML5 so it is also important to have alternative strategies for the browsers that don’t support HTML5. If you want to learn to add HTML5 tags to your designs then sign up for the Learn Complete Web Development From Scratch course now. This course contains 46 lectures designed to teach you web development from start to finish. You will learn all about HTML and CSS and how to use these to structure and format your website. You will also learn JavaScript and JQuery so that you can create powerful scripts for your pages. The course will introduce you to PHP and MySQL so that you can add websites and other applications to your websites. You will learn about JSON and Ajax and how to implement these technologies into your websites to create great websites and apps.

Add HTML5 Footer Tags to Your Page

Often users who browse the web find a page and have no idea about the website that it has been published on or the purpose of the website. Page footers are a great place to add information about the page or to add links to certain sections of the website that may not necessarily be included in the main navigation system of your website.

To add a footer section to your web page, you can use the <footer> tag. You can in fact add as many footer elements as you would like to your page. Take a look at the following code:

<!DOCTYPE html><html><head></head><body>
<article>
<header>
<h1>My New Article</h1>
<h3>My Footer Tutorial</h3>
</header>
<p> This is an article about how to add a footer to a section.</p>
<p> This is part of the article section of our page.</p>
</br>
<p>The footer section will contain the author name and post date</p>
<br>
<footer>
<font color="blue" style="font-size:14px" face="verdana">
<p>Author: Brigitta Schwulst</p>
<p>Date: 31 May 2014</p>
</font>
</footer>
</article>
</br>
</br>
<footer>
<font color="red" style="font-size:9px" face="verdana">
<p>Add links, website home page, contact information and other information</p>
<p>To this section of the website to help your users find out more</p>
<p> About your page</p>
</footer>
</body>
</html>

This is what your final page will look like:

To learn more about the new HTML5 tags including the header tag, footer tag, article tags etc, try Code a Responsive Website Using HTML5 and CSS for Beginners. This course contains 134 lectures that will teach you how to code webpages that work on various devices and in different browsers. You will learn how to create webpages and how to link documents and images. The course will teach you to create forms and other HTML5 elements. You will learn how to create multiple page websites that use CSS for style and formatting.