COURSE SYLLABUS

1. Introduction to HTML

Introduction to HTML HTML Document Structure How HTML Works HTML vs CSS vs JavaScript

2. Basic HTML

Basic HTML HTML Elements HTML Attributes Headings Paragraphs Comments Line Breaks Horizontal Rules

3. HTML Tags

4. Text Formatting

Text Formatting Text Formatting Elements Bold & Strong Italic & Emphasis Underline & Highlight Subscript & Superscript Quotations Abbreviations Special Characters

5. Links & Media

Links & Media Hyperlinks Link Attributes Images Image Attributes Audio Video Iframes

6. Lists & Tables

Lists & Tables Unordered Lists Ordered Lists Description Lists Nested Lists Tables Table Headers Colspan & Rowspan

7. HTML Forms

Forms Form Basics Form Attributes Input Types Labels Text Area Select & Option Radio Buttons Check Boxes Buttons Form Validation

8. Semantic HTML

Semantic HTML Semantic Elements Header Nav Main Section Article Aside Footer HTML Page Layout

9. HTML5 Features

HTML5 Features HTML5 Introduction New Input Types Audio & Video Canvas SVG Progress & Meter Details & Summary Data Attributes

10. Advanced HTML

Advanced HTML Global Attributes Meta Tags Viewport HTML Accessibility ARIA Basics HTML Best Practices SEO-Friendly HTML

HTML Footer Element

The HTML <footer> element represents footer information for a webpage, section, or article.

It commonly contains copyright information, contact details, related links, author information, or other supporting content.

Easy Way to Remember: The <footer> is the supporting information at the bottom of a page or a specific content area.

1. What is the footer Element?

The <footer> element is a semantic HTML element used for footer-related content.

<footer>

    <p>
        © 2026 My Website
    </p>

</footer>

Output

2. What is Usually Placed in a Footer?

A footer can contain different types of supporting information.

Copyright information
Contact information
Author information
Privacy and Terms links
Related links
Company information
Social media links

3. Basic Footer Example

<footer>

    <p>
        © 2026 CIIT Training Institute
    </p>

</footer>

4. Footer with Contact Information

A footer can contain contact information for the website or organization.

<footer>

    <h3>Contact Us</h3>

    <p>
        Email: training@example.com
    </p>

</footer>

5. Footer with Navigation Links

Important supporting links can also be placed in the footer.

<footer>

    <nav>

        <a href="/about">About</a>
        <a href="/contact">Contact</a>
        <a href="/privacy">Privacy Policy</a>

    </nav>

</footer>

Note: A footer can contain a <nav> when the links form a meaningful navigation area.

6. Footer for a Complete Web Page

A common page structure places the footer after the main content.

<header>

    <h1>
        Learning Portal
    </h1>

</header>

<nav>

    <a href="#">Home</a>
    <a href="#">Courses</a>

</nav>

<main>

    <h2>
        HTML Course
    </h2>

    <p>
        Learn HTML step by step.
    </p>

</main>

<footer>

    <p>
        © 2026 Learning Portal
    </p>

</footer>

7. Footer Inside an Article

A footer does not have to belong only to the entire webpage. It can also belong to a specific article.

<article>

    <h2>
        Introduction to HTML
    </h2>

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

    <footer>

        <p>
            Author: Web Development Team
        </p>

    </footer>

</article>

8. Footer Inside a Section

A section can also have its own footer for information related specifically to that section.

<section>

    <h2>
        HTML Course
    </h2>

    <p>
        Learn HTML fundamentals.
    </p>

    <footer>

        <p>
            Updated October 2026
        </p>

    </footer>

</section>

9. Footer vs Bottom of the Page

A footer often appears at the bottom of a webpage, but the <footer> element is not simply a styling container.

It identifies content that is related to the footer of the page or a specific section.

10. Footer vs div

Element	Purpose
`<footer>`	Semantic element for footer-related content.
`<div>`	Generic container without specific semantic meaning.

11. Footer vs Header

Element	Purpose
`<header>`	Introduces a page or section.
`<footer>`	Provides supporting or closing information.

12. Footer with Copyright

<footer>

    <p>
        © 2026 Learning Portal. All rights reserved.
    </p>

</footer>

13. Footer with Multiple Links

<footer>

    <nav>

        <a href="/about">
            About
        </a>

        <a href="/contact">
            Contact
        </a>

        <a href="/privacy">
            Privacy
        </a>

        <a href="/terms">
            Terms
        </a>

    </nav>

    <p>
        © 2026 Learning Portal
    </p>

</footer>

14. Footer with Address

Contact information can be represented using the <address> element when appropriate.

<footer>

    <address>

        Email:
        training@example.com

    </address>

</footer>

15. Footer with Social Links

A footer may also contain links to social media or other external resources.

<footer>

    <p>
        Follow us:
    </p>

    <a href="#">
        LinkedIn
    </a>

    <a href="#">
        Instagram
    </a>

</footer>

16. Footer for a Course Website

<footer>

    <h3>
        CIIT Training Institute
    </h3>

    <p>
        Technology Training and Learning
    </p>

    <nav>

        <a href="#">Courses</a>
        <a href="#">Contact</a>
        <a href="#">Privacy Policy</a>

    </nav>

    <p>
        © 2026 CIIT Training Institute
    </p>

</footer>

17. Multiple Footer Elements

A page can have a footer for the webpage and separate footer elements inside articles or sections.

<main>

    <article>

        <h2>
            HTML Basics
        </h2>

        <p>
            Learn HTML fundamentals.
        </p>

        <footer>
            Updated October 2026
        </footer>

    </article>

</main>

<footer>

    <p>
        © 2026 Learning Portal
    </p>

</footer>

Important: A footer can describe the containing page, section, or article. Its meaning depends on where it is placed.

18. Footer and Accessibility

Semantic footer elements help describe the document structure. Users and assistive technologies can better understand that the content belongs to the footer area of a page or section.

19. Complete Semantic Page Example

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>
        Learning Portal
    </title>

</head>

<body>

    <header>

        <h1>
            Learning Portal
        </h1>

    </header>

    <nav>

        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">Contact</a>

    </nav>

    <main>

        <section>

            <h2>
                HTML Course
            </h2>

            <p>
                Learn HTML from basic to advanced concepts.
            </p>

        </section>

    </main>

    <footer>

        <nav>

            <a href="#">About</a>
            <a href="#">Privacy</a>
            <a href="#">Contact</a>

        </nav>

        <p>
            © 2026 Learning Portal
        </p>

    </footer>

</body>

</html>

20. Common Mistakes

Mistake 1: Using footer only for visual styling

The <footer> element should be used when the content represents footer-related information.

Mistake 2: Putting the main content inside footer

The main topic of the page belongs in <main>, <section>, or another suitable element.

Mistake 3: Assuming footer must always be the last element

A footer can belong to an article or section, so its position depends on the content structure.

21. Best Practices

Use <footer> for supporting or closing information.
Use it for copyright, contact, author, and related links.
Keep footer information relevant to its containing content.
Use <nav> inside the footer when it contains meaningful navigation links.
Use <footer> inside an article or section when the information belongs specifically to that content.

22. Practice Example

Create a footer for a training website containing the company name, navigation links, contact information, and copyright text.

<footer>

    <h2>
        CIIT Training Institute
    </h2>

    <p>
        Technology Training and Learning
    </p>

    <nav>

        <a href="#">Courses</a>
        <a href="#">About</a>
        <a href="#">Contact</a>

    </nav>

    <p>
        © 2026 CIIT Training Institute
    </p>

</footer>

Summary

The HTML <footer> element represents supporting information for a webpage, section, or article. It is commonly used for copyright information, contact details, author information, related links, and supporting navigation. The footer is semantic, so its purpose comes from the content it contains rather than simply its visual position.

← Previous: Aside Next: HTML Page Layout →