HTML Guide
A header element cannot be placed inside a footer element according to the HTML specification.
The header and footer elements are both considered “sectioning” content in HTML. The footer element represents the footer for its nearest section or the body, while the header element represents introductory content or navigation links for its nearest section or the body. The HTML specification prohibits nesting a header directly within a footer as it doesn’t make semantic sense—footers are for closing or supplementary content, not introductions.
Invalid HTML Example:
<footer>
<header>
<h2>Footer Header</h2>
</header>
<p>Some footer content here.</p>
</footer>
Valid HTML Example:
Move the header element outside of the footer element.
<header>
<h2>Site Header</h2>
</header>
<footer>
<p>Some footer content here.</p>
</footer>
If you need a heading inside the footer:
Instead of using a header inside footer, use heading elements (h2, h3, etc.) directly within the footer.
<footer>
<h2>Footer Section</h2>
<p>Some footer content here.</p>
</footer>Learn more:
Related W3C validator issues
A <header> section can’t include any <footer> section inside.
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Footers don’t necessarily have to appear at the end of a section, though they usually do. In any case, they can’t go nested inside a <header> section.
An element with role="rowgroup" is a group of rows within a tabular structure. A rowgroup contains one or more rows of cells, grid cells, column headers, or row headers within a grid, table or treegrid, as in this example:
<div
role="table"
aria-label="Populations"
aria-describedby="country_population_desc">
<div id="country_population_desc">World Populations by Country</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="descending">Country</span>
<span role="columnheader" aria-sort="none">Population</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="cell">Finland</span>
<span role="cell">5.5 million</span>
</div>
<div role="row">
<span role="cell">France</span>
<span role="cell">67 million</span>
</div>
</div>
</div>The <header> HTML element represents introductory content, typically a group of introductory or navigational aids, and has an implicit role of banner, so specifying this role is redundant.
The following example represents a banner using the role attribute:
<div role="banner">
<img src="companylogo.svg" alt="my company name" />
<h1>Title</h1>
<p>Subtitle</p>
</div>By default, the HTML5 <header> element has an identical meaning to the banner landmark, unless it is a descendant of <aside>, <article>, <main>, <nav>, or <section>, at which point <header> is the heading for that section and not the equivalent of the site-wide banner.
This example uses the <header> element instead of the banner role:
<header>
<img src="companylogo.svg" alt="my company name" />
<h1>Title</h1>
<p>Subtitle</p>
</header>The <footer> element represents a footer for its nearest sectioning content, and has an implicit role of contentinfo, so specifying this role is redundant.
The following example marks a <div> as a footer specifying its role:
<div role="contentinfo">
<h2>Footer</h2>
<!-- footer content -->
</div>Using the <footer> element instead is recommended:
<footer>
<h2>Footer</h2>
<!-- footer content -->
</footer>A <footer> can’t include other <footer>s inside.
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
A <header> element can’t include other <header> elements inside.
The header element represents a group of introductory or navigational aids, as in this example:
<body>
<header>
<h1>Welcome to our Shop</h1>
<nav>
<ul>
<li><a href="/toys">Toys</a>
<li><a href="/books">Books</a>
<li><a href="/shoes">Shoes</a>
</ul>
</nav>
</header>
<p>Main content...</p>
</body>