Understand HTML5 footer tag | Cool html footer template:codingtuting

What is a Web Page Footer and what does it contain?

The bottom area of the Web Page which contains the general information about the website is known as Web Page Footer or Website Footer. This general information is - The Company Name, Web Page Links, Contact information, Copyright info, etc.

Website Responsive Footer Design using HTML5 CSS and jQuery

Responsive Footer Design using HTML5 CSS jQuery

Hello readers, I'm Jignesh and welcome to the CodingTuting. Friends I hope you like our last creation which is Cool Full Responsive Design Template. If you haven't check it yet, so please check it.

And in today's article, we'll learn about the Use of <footer> Tag in HTML5, and also we'll create a Responsive HTML Footer Template using HTML5, CSS and jQuery. So let's get started.

What does footer do in HTML?

The footer helps to identify the footer of the web page. Footer is the visible part of the web page. And this part is catchy because the visitors and the users can quickly get links of the other web pages, contact email, newsletter subscription, etc from the footer.

That's why they use of footer is the best choice to define such kind of information on the web page, section, article, etc.

What is the footer tag in HTML5?

The <footer> tag was introduced in HTML5. This tag is used to define the footer or the bottom area of the document, article, section, division, etc. The <footer> tag is a paired tag and it is used within the <body> tag.

Syntax

Default CSS:

footer
{
    display:block;
}

Browser support information

Browsers
Version	6.0	4.0	5.0	11.0	9.0

What is the purpose of the footer tag?

Before HTML5, frontend developers and designers used the <div> tag to define the footer. The <div> element is a common element for define any division of the web page, whatever it is header area of the web page, the middle area of the web page or the footer area of the web page.

So due to this - The Web Crawler was unable to differentiate in each particular section/division of the web page, and the footer was one of them. The footer area was also considered as a normal division of the web page.

So, HTML5 introduced the footer tag to solve this issue. The purpose of the HTML Footer Tag is to identify the footer area of the web page, container, section, etc. It helps the web browser and the search engine crawler to understand and to identify web pages in a better way.

With the help of the footer tag, the search engine's web crawler can understand the content and the structure of the web page better than before.

So, it became easier for web crawlers to get more accurate information from the websites. And they are providing more relevant information and results to the users and visitors.

Where does a footer go in HTML?

As it is clear by its name, the best place of the footer/footer element is the bottom area of the web page. The footer tag is not only used to define the web page footer but also to define the bottom area of the modal box, container, panel, division and any kind of section, etc.

Footer of the Modal Box

How do you tag a footer in HTML?

Footer can be used at many places and many times, if we want to define the footer of any article, so the <footer> tag goes at the end of the <article> tag. If we want to define the footer of any section, so the <footer> tag goes at the end of the <section> tag.

Same as this, if we want to define a common footer for the whole website, so the <footer> tag goes before the closing </body> tag.

Use footer in <section>

<section>
    <div>
        Main content of the section
    </div>

    <footer>
        Footer content of the section    
    </footer>
</section>

Use footer in <article>

<article>
    <div>
        Main content of the article
    </div>

    <footer>
        Footer content of the article
    </footer>
</article>

Use multiple footers

<section>
    <div>
        <h1> My heading </h1>
        <p> Some decription about the topic </p>
        
        <footer>
            <h3> About the writer </h3>
        </footer>
    </div>
 
    <article>
        <h1> My Article Heading </h1>
        <p> Explaination about the article </p>
  
        <footer>
            <h3> About Author </h3>
            <p> Introduction of the Author </p>
        </footer>
    </article>
</section>

2 Footer has used it in the last example. The first footer is to define the footer of the division <div>. And the second footer is used to define the footer of the article. Thus, the footer can be used multiple times on a single web page as per the need.

Does footer go after the body?

The <body>....</body> is the visible part of the web page. Above the body which is <header> tag presents. And this <header> contains the Title of the page, meta tags, links of CSS, etc. And this <header> part is not visible to the users.

But the <header> can be used as a visible part of the content too. We'll discuss <header> in detail in another article.

But the footer is always a visible part of the web page. Because it contains the web pages links, logo, forms, buttons, etc which are important to visible to the user. So the <footer> is only used inside the <body> tag. We can't use footer before and after the body.

Responsive HTML Footer Template

As you've briefly read about the HTML Footer and <footer> tag. And if you are an absolute beginner, then you may now be thinking about the design of the footer. And now, I'll share with you a beautiful responsive design of footer.

I've created a footer which has the following information and features-

The Company Logo/Name
Web Pages Links with hover animated underline
Circular Social Media Links
E-Mail Subscription From
Company Address
Copyright Text and The Designer Name

I've given a dark look to this footer which looks so good and less harmful for our eyes.

Preview of the Footer Design

Step by Step Talk about Design

I've used HTML5, CSS3, and jQuery to make this design. And I'm using Google Fonts and Fontawesome Icons in my code. You can use it too or any others as you like.

Focus on below step-by-step coding summary:-

I've created a basic HTML5 structure of the page. And write some dummy text to increase the height of the web page.
Then I used the <footer> tag for the web page footer container.
I placed the website heading at the top left corner of the footer.
I created some <li> list items and placed the web pages links in it.
Also, I created an empty <span> tag and give them an animated hover look with the help of CSS.
Then I created a jQuery Function() for toggle a class. This class is creating an animated line under the links.
I used CSS3 @media queries to make the whole footer responsive in all kinds of devices (mobile, tablet, etc). By using CSS3 @media queries, I took all the links in an accordion. This accordion is reducing the length of the footer and also giving an amazing look to the design.

Let's get the source code (HTML, CSS, jQuery) and the output. Copy and paste it in your system and run it.

See the Pen Responsive Footer HTML CSS by CodingTuting (@codingtuting) on CodePen.

Conclusion

You've gone through many points about the HTML5 footer and the <footer> tag. The information behind this article was to give you an actual meaning and the use of footer.

Because many people still avoid the many HTML5 tags and they are using old HTML coding. The main reason behind this is - "they haven't conceptual knowledge about each HTML5 tags".

So, they avoid the HTML5 tags and start to use <div> everywhere. Which is messy in today's web design world. I hope, now feel the importance of <footer> tag after reading this full article. The Use of <footer> tag is a good impact on your HTML coding skills.

Does this article give you brief information about the footer and <footer> tag?
Will you start using <footer> tag from now?
And, How about our template footer HTML CSS example? Did you like it?

If yes, then do let us know by your true words in the comment below.

We would like your suggestion on any topic. Please suggest to us, we'll try to post about that topic as soon as. If you've any queries regards Web Design, Development, etc. Please do comment.

Sharing is Caring

Thanks for Reading

Author : Jignesh Panchal

Hi, I'm Jignesh Panchal. I'm a Web Developer & Designer. I've started this blog to help the programmers using my experience and skills. You will get solutions and tips about Programming, Web Development etc.

4 Comments

Write Comments

Anonymous

September 24, 2020 at 6:53 PM delete

Hello, I have browsed most of your posts. This post is probably where I got the most useful information for my research. Thanks for posting, maybe we can see more on this. Are you aware of any other websites on this subject. monthly budget templates