<footer> : Footer element

by

Introduction

The <footer> element in HTML is used to represent the footer of a section or page. It typically contains metadata, copyright information, contact details, links to related documents, or other information relevant to the enclosing section or the entire document.

Here is an example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        article {
            min-height: 100%;
            display: grid;
            grid-template-rows: auto 1fr auto;
        }
        footer {
            display: flex;
            justify-content: center;
            padding: 5px;
            background-color: #45a1ff;
            color: #fff;
        }  
    </style>
</head>
<body>
    <article>
        <h1>How to be a wizard</h1>
        <ol>
          <li>Grow a long, majestic beard.</li>
          <li>Wear a tall, pointed hat.</li>
          <li>Have I mentioned the beard?</li>
        </ol>
        <footer>
          <p>© 2018 Gandalf</p>
        </footer>
    </article>            
</body>
</html>

Output :

In this example, the blue colour section is footer section.

Key points about the <footer> element:

1. Metadata and Attribution: It is commonly used to include metadata, copyright information, or attribution details for the content on the webpage.

2. Contact Information: It may include contact details, such as an email address or a link to a contact form.

3. Navigation Links: It might contain links to related documents or sections within the website.

4. Semantic Structure: It contributes to the semantic structure of the HTML document, making it clear that the enclosed content represents the footer of a section or the entire page.

5. Accessibility: Screen readers and other assistive technologies can use the <footer> element to provide additional context to users.

While the <footer> element is commonly used at the bottom of a page, it can also be used within other sections to represent the footer for a specific part of the content. For example, a <footer> within an <article> or a <section> can contain information specific to that article or section.

<article>
  <h2>Article Title</h2>
  <p>Article content goes here.</p>
  <footer>
    <p>Published on January 1, 2024</p>
    <p>Author: John Doe</p>
  </footer>
</article>

In summary, <footer> is a versatile element that helps structure and provide relevant information at the bottom of a webpage or within specific sections.

Leave a Comment