Footer in HTML

The HTML footer tag is a semantic element that represents the footer of a section or the entire page. The footer tag typically contains information such as the author's name, copyright information, links to related content, and other information that is not part of the main content of a page.

Here is a step-by-step tutorial on how to use the footer tag in HTML:

Start with a basic HTML structure: Begin by creating a new HTML file and adding the basic HTML structure, including the doctype, html, head, and body tags:

basic HTML example

<!DOCTYPE html> 
<html> 
    <head> 
        <title>My HTML Page</title> 
    </head> 
    <body> </body> 
</html>

Add the footer tag: Within the body tag, add the footer tag to define the content you want to display in your footer:

Add Footer to Body of HTML Page

<body> 
    <footer> </footer> 
</body>

Add content to the footer tag: Within the footer tag, add the content you want to display in your footer. You can use any HTML elements, such as headings, paragraphs, images, or lists, to create your content:

Ad Content to Footer

<body> <footer> <p>&copy; 2023 My Website</p> <p>Powered by <a href="https://openai.com">OpenAI</a></p> </footer> </body>

Style your footer: If desired, you can use CSS to style your footer. For example, you could use the background-color property to change the background color of the footer, or the text-align property to center the text in the footer:

Add Css Style to Footer

<style> footer { background-color: lightgray; text-align: center; } </style>

Save and view your HTML page: Finally, save your HTML file and view it in a web browser to see your footer content displayed on the page.

How to fix the footer at Bottom of the Page

To fix a footer at the bottom of the page, you can use CSS and set the position property to "fixed". Here is an example:

Example of Fixed footer in HTML

<style> 
    footer { 
        position: fixed; 
        left: 0; 
        bottom: 0; 
        width: 100%; 
        background-color: lightgray; 
        text-align: center; 
    } 
</style>

In this example, the position property is set to fixed, which means the footer will remain in the same position on the screen even if the user scrolls the page. The left and bottom properties are set to 0, which places the footer at the bottom-left corner of the screen. The width property is set to 100%, which makes the footer span the full width of the screen.

Note: If the main content of the page is taller than the screen, the footer will be obscured by the content. To avoid this, you can use JavaScript or CSS to dynamically adjust the height of the main content to ensure that the footer always remains visible.