CODEWITHSUNDEEP
htmldomheaderfooter
Alpesh Prajapati
Alpesh Prajapati

Reputation: 1643

Can footer have header tag?

I have gone through a discussion regarding header and footer. As HTML5 provides header, footer, content elements, I believe it should be used once per page. I state them in following snippet.

<!-- My understanding -->
<header>
    <!-- code goes here -->
</header>
<content>
    <!-- code goes here -->
    <!-- code goes here -->
</content>
<footer>
    <!-- code goes here -->
</footer>

Few people have header, footer elements approach like below.

<!-- People understanding -->
<header>
    <!-- code goes here -->
</header>
<content>
    <!-- code goes here -->
    <!-- code goes here -->
</content>
<footer>
    <header>
        <!-- They also use <header> in footer. -->
    </header>
    <!-- code goes here -->
</footer>

Can header be used in footer element? In other words, What would you suggest to build a HTML structure?

Upvotes: 5

Views: 5094

Answers (4)

James Donnelly
James Donnelly

Reputation: 128781

No this isn't valid.

The header element represents a header for the content, however the header element must not be a descendant of the footer element.

The footer section of the HTML5 specification states that the footer element is:

Flow content, but with no header, footer, or main element descendants.

If you paste the below code into W3's HTML Validator you'll get the following error:

Line 8, Column 20: The element header must not appear as a descendant of the footer element.

<!doctype html>
<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <footer>
            <header>
            </header>
        </footer>
    </body>
</html>

Ignoring the invalid content element, your first example is valid and you should stick with that instead.

Upvotes: 4

Mohamad Shiralizadeh
Mohamad Shiralizadeh

Reputation: 8765

According to MDN:

The HTML Element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

so I don't suggest you to use footer tag inside header tag.

Upvotes: 0

Sinister Beard
Sinister Beard

Reputation: 3680

The second example would technically work fine, as all of the <header>, <content> and <footer> functionally work similarly to <div>s, but semantically it'd be very bad practice. I'd go with your initial thoughts, which would certainly be the spirit in which those elements are intended.

Upvotes: 0

AaronTeheni19
AaronTeheni19

Reputation: 106

I suggest that you should stick to your first line idea:

// My understanding
<header>
    //code goes here
</header>
<content>
    //code goes here
    //code goes here
</content>
<footer>
    //code goes here
</footer>

For me, it is more easy way to understand how to make a HTML file on this format.

Upvotes: 1

Related Questions