Search code examples
htmlaccessibilitysemantic-markup

Is it invalid/confusing to have the document <header> in the middle of a document


I currently have a setup like this:

<section id="intro"></section>
<header></header>
<section></section>
<section></section>
<footer></footer>

The header element is a sticky header with site name and basic information. It doesn't show until after the user scrolls past #intro, hence where it is in the DOM. I was wondering if, from the point of view of semantics and accessibility, it made more sense to just make it a div or a section.


Solution

  • The <header> tag is not required to be at a specific position in your document, except that it should not be a child of another <header>, a <footer> or an <address> tag. The <div> element, on the other hand, is strongly suggested as a last-resort element only, to be avoided when another element would fit better semantically. It seems your usage of <header> is fits well with its recommended usage, though you should keep in mind that IE8 and earlier versions do not support it and it is effectively unstylable with these browsers.