Earn income with your HTML skills

Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.

HTML <footer> hidden Attribute

HTML <figure>

HTML <form>

A hidden attribute on a <footer> tag hides the footer.

Although the footer is not visible, its position on the page is maintained.

Example

#

A hidden attribute on a <footer>.
The footer is not visible.

A hidden footer:

<p>A hidden footer:</p>

<footer hidden>
  <p>&copy; Company, Ltd. All Rights Reserved.</p>
</footer>

Using hidden

#

The hidden attribute makes the <footer> invisible.

You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid.

A hidden <footer> is not visible, but maintains its position on the page.

Syntax

#

<footer hidden>

<footer hidden="hidden">

Values

#

Value	Description
hidden	Use value 'hidden' or no value at all.

More Examples

#

Clicking the button toggles A hidden attribute on the <footer> element.

<footer id="myfooter" style="background:indigo;color:white;padding:15px;">
  &copy; Company, Ltd. All Rights Reserved.
</footer>

<br />
<button onclick="toggle(this)">Hide footer</button>

<script>
  let toggle = button => {
    let element = document.getElementById("myfooter");
    let hidden = element.getAttribute("hidden");

    if (hidden) {
       element.removeAttribute("hidden");
       button.innerText = "Hide footer";
    } else {
       element.setAttribute("hidden", "hidden");
       button.innerText = "Show footer";
    }
  }
</script>

Code explanation

The hidden attribute hides the <footer> element.

When clicking the button, a JavaScript function toggles the hidden attribute.

Browser support

#

Here is when hidden support started for each browser:

Chrome	6.0	Sep 2010
Firefox	4.0	Mar 2011
IE/Edge	9.0	Mar 2011
Opera	11.1	Mar 2011
Safari	5.0	Jun 2010

#

Back to <footer>

Jack Poorte

Last updated on Sep 30, 2023