Google Plus Facebook Twitter RSS YouTube

HTML5 footer tag element

footer is a HTML5 web element which declares a bottom place of a web section or bottom area of the web document. As you know, every website usually displays a section at bottom of the every web document to show site related data. Similarly except homepage, all remaining web pages display the users' helpful content in a section and websites are much interested to show content related data at bottom of the content section as per current web trends. In these types of cases, usage of footer element is recommendable as per HTML5 web designing standards.

Syntax

HTML5 footer element is a body section element and it is declared in body section using tagging syntax method. Hence, it can be called footer tag.

HTML5 Code

<footer> 

  Footer Content Here 
    
</footer>
  1. Insert footer start tag which is denoted by <footer>
  2. Place footer content
  3. Close footer section by using </footer> tag

HTML5 footer element can be used in body section as many times as you want but it must be used to declare the footer area of a section or document. This element works in only latest version Mozilla Firefox, Google Chrome, Safari, Opera and Internet Explorer 9 onwards. So, footer element gets disturbed in older version web browsers. Hence designers have to use this feature if designer is sure all site visitors visit designed site using modern latest web browsers.

footer at content section

HTML5 footer element is declared in content section to display the content related data. In content wise sections, content related data like author picture or company logo, author information, published time and date, tags, categories, content sources or recommendable readings and any other data that related the content are placed in footer element within that content section. There is no rule to use this element in content section at particular position which means it can be used at top of the content, bottom of the content or both places of the content within the content section because some websites completely move content related data to bottom of the content but some websites show data at both top and bottom areas of the content.

Two footer elements have to be declared if site owner wants to show content related data at top and bottom areas of the content. Similarly, one footer element is used if site designers interested to show content related data at either top or bottom of the content area in that web section. When designer declares the footer element within the content section, HTML5 web designing technology understands that the footer declared in content section is associated to the content published in that section.

Usually, dynamic blog sites display author information at the bottom of the blog posts to give a credit to the guest bloggers. Similarly, forums or discussion communities enable signature to show information of the qualified contributors.

HTML5 Code

<article>
Content data is here
<footer>

 <img src="../../css/icon.jpg" width="75" height="75" alt="Web Doubts"> 
 
 Mr. X is contributed this article for Web Doubts readers. He is a professional web  
 designing expert and designed several websites to top branded companies  internationally. 
 He demonstrated this article how to use footer tag in HTML5  web designs for you. You  
 can reach him at <a href="http://webdoubts.com/">http://webdoubts.com/</a> | 
 <a href="http://twitter.com/WebDoubts">@WebDoubts</a>

<strong>Resources:</strong>
<ol>
   <li><a href="http://webdoubts.com/html/">Learn HTML Web Designing</a></li>
   <li><a href="http://php.net/">Learn PHP Hypertext Preprocessor</a></li>
   <li><a href="http://www.w3.org/">Learn Web Standards from World Wide Web 
   Consortium</a></li>
</ol>  

</footer>
</article>

For example, footer element is declared in a content section to show some content related data at bottom of the content as given in the code box. HTML5 web technology understands it and displays the author information at same place as per css styling system as shown in below screenshot. Similarly, footer tag is also used to display the content related reference links or resources at bottom of the content section, just like above stated example. Such useful recommendable hyperlinks can be placed between content and author's information or after author information. It is completely site designer's choice. It is demonstrated in our website and it displays author information as exampled in below screenshot. Similarly, it displays content related links through footer element. 

HTML5 footer element at bottom of content section

In this way, HTML5 standards' websites use footer element in content sections as demonstrated above. No need to use footer tag in content section if site owner does not want to show content related information in content section.

footer at bottom of page

HTML5 footer element is most commonly used to declare at bottom of the every web page just before to close body tag (</body>) to display site related data as exampled in below code box.

HTML5 Code

<footer> 
Copyright © Web Doubts

  <nav>
      <li><a href="http://webdoubts.com/">Home</a></li>
      <li><a href="http://webdoubts.com/about-us.html">About Us</a></li>
      <li><a href="http://webdoubts.com/faq.html">FAQ</a></li>
      <li><a href="http://webdoubts.com/privacy-policy.html">Privacy Policy</a></li>
      <li><a href="http://webdoubts.com/advertise.html">Advertise</a></li>
      <li><a href="http://webdoubts.com/subscribe.html">Subscribe</a></li>
      <li><a href="http://webdoubts.com/contact-us.html">Contact Us</a></li>
  </nav>
</footer>

At bottom of every page, site designers have to declare footer element to display site related data for example copyright information and site related links. When site developer uses this element at bottom of the every web document, it displays the footer section in user specified styling system. You can observe a live demonstration in this page, not only in this page and in all pages, our website displays our site related data at bottom area by using footer element.

footer section at bottom of the page

This element has to be used even websites display more than one footer to show site related links. Web designers who interested to implement HTML5 technology in site designing must use footer element as explained here.

Follow Us
Google Plus Facebook Twitter RSS YouTube
Subscribe via Email
Save or Share This HTML5 Tutorial with Your Friends
Save or Share HTML5 Tutorial