Search code examples
htmlsemantic-markup

Can I put a <section> inside a <header>?


I have not been able to find a reference describing the relationship between the HTML5 tags header and section (or footer and section). Most examples put p elements inside headers and footers.

Is it both legal and advisable to put a section element into a header?

References:

  • The main element - you may not put a main element into an article
  • "Nesting <article> in <section> or Vice Versa?" in HTML5 semantic elements - putting an article into a section is valid, and the other way round (although different semantics)

Solution

  • Yes you can.

    Formally, the content model of header elements is

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

    And the contexts in which section elements can be used is

    Where sectioning content is expected.

    Sectioning content is subset of flow content, so that means anywhere flow content is expected, except places where it's nevertheless explicitly called out as not allowed, which as we see above, it isn't for header.

    (The places where it is currently called out as not allowed are as the descendants of an address, dt, and th element.)