Learn HTML – Part 24 – footer Tag – Footer Content Section

Learn HTML – Part 24 – footer Tag – Footer Content Section

The HTML footer tag is used to define the footer section of a webpage or a specific section.

It usually contains information such as copyright details, contact links, navigation links, or author information.


What is the footer Tag?

The footer tag is a semantic HTML element introduced in HTML5.

It represents a container for the footer content of a document or section.


Common Elements Inside footer

  • Copyright information
  • Contact details
  • Privacy policy links
  • Terms and conditions
  • Navigation links

Basic Syntax

<footer>
   <p>© 2026 WPDeveloperTips</p>
</footer>

Example – Website Footer

<footer>
   <p>© 2026 WPDeveloperTips</p>
   <p>All rights reserved.</p>
</footer>

Output:

© 2026 WPDeveloperTips

All rights reserved.


Using footer Inside Articles

The footer tag can also be used inside elements such as article to display author information or publication details.

<article>
   <h2>HTML Basics</h2>
   <p>HTML is used to structure web pages.</p>

   <footer>
      <p>Written by John Doe</p>
   </footer>
</article>

footer vs header – Key Difference

TagPurpose
headerDefines introductory content
footerDefines closing or footer content

Why Use the footer Tag?

  • Improves webpage structure
  • Provides semantic meaning
  • Helps search engines understand page layout
  • Improves accessibility

The footer tag should contain closing or supplementary information related to the content.


Common Mistakes Beginners Make

  • Using the footer for unrelated content
  • Adding too many elements that do not belong to footer information
  • Confusing it with the page layout structure

Conclusion

The HTML footer tag defines the footer section of a webpage or a section.

It typically contains copyright information, navigation links, or contact details related to the content.

What’s Next?

Now that you understand the footer tag, the next step is learning about the nav tag, which is used to define navigation links on a webpage.

Next: Learn HTML – Part 25 – nav Tag – Navigation Links Section →


Series: Learn HTML Series

Facebook
WhatsApp
Twitter
LinkedIn
Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Articles from the Series

learn-html-part-63-complete-html-project-thumbnail
Learn HTML – Part 63 – Complete HTML Project (Build a Web Page)
Learn HTML – Part 63 – Complete HTML Project In this final lesson, we will build a complete HTML webpage...
learn-html-part-62-time-tag-date-time-thumbnail
Learn HTML – Part 62 – time Tag – Date & Time
Learn HTML – Part 62 – time Tag – Date & Time The HTML time tag is used to represent dates and times...
learn-html-part-61-mark-tag-highlight-text-thumbnail
Learn HTML – Part 61 – mark Tag – Highlight Text
Learn HTML – Part 61 – mark Tag – Highlight Text The HTML mark tag is used to highlight text that is...
learn-html-part-60-figcaption-tag-figure-caption-thumbnail
Learn HTML – Part 60 – figcaption Tag – Figure Caption
Learn HTML – Part 60 – figcaption Tag – Figure Caption The HTML figcaption tag is used to define a caption...
learn-html-part-59-figure-tag-media-content-thumbnail
Learn HTML – Part 59 – figure Tag – Media Content
Learn HTML – Part 59 – figure Tag – Media Content The HTML figure tag is used to group media content...
learn-html-part-58-track-tag-video-subtitles-thumbnail
Learn HTML – Part 58 – track Tag – Video Subtitles
Learn HTML – Part 58 – track Tag – Video Subtitles The HTML track tag is used to add subtitles, captions,...
learn-html-part-57-source-tag-media-sources-thumbnail
Learn HTML – Part 57 – source Tag – Media Sources
Learn HTML – Part 57 – source Tag – Media Sources The HTML source tag is used to define multiple media...
learn-html-part-56-picture-tag-responsive-images-thumbnail
Learn HTML – Part 56 – picture Tag – Responsive Images
Learn HTML – Part 56 – picture Tag – Responsive Images The HTML picture tag is used to display responsive...
learn-html-part-55-dialog-tag-modal-dialog-thumbnail
Learn HTML – Part 55 – dialog Tag – Modal Dialog
Learn HTML – Part 55 – dialog Tag – Modal Dialog The HTML dialog tag is used to create modal or popup...
learn-html-part-54-summary-tag-details-caption-thumbnail
Learn HTML – Part 54 – summary Tag – Details Caption
Learn HTML – Part 54 – summary Tag – Details Caption The HTML summary tag is used to define a visible...
Scroll to Top