Search code examples
htmlsemantic-markup

Does the order of appearance of a <footer> element in regard to <article> matter in HTML5?


On a page I'm working on, I noticed the following pattern:

<section>
    <header>Article Headline</header>
    <footer>
        <!-- publication date and author go here -->
    </footer>
    <article>
        <!-- article content goes here -->
    </article>
</section>

At first glance, I was a bit surprised by the appearance of the <footer> element before the <article> (I'm a backend developer and my HTML skills are not honed as much as they probably should). When asked about this, my colleague just said that the ordering used here made the styling easier, was probably fine when semantics are concerned and that the order didn't matter but couldn't point me to a definitive source.

I tried to find some information on the semantics of the <footer> tag and it seems that a lot can be said about the rules governing its allowed content or its appearance as a child of another tag (I find the description on MDN particularly nice and clear) but there's little to no information on the ordering.

The only mention of the order of <footer> I found is in the W3C specification for HTML5

Footers don't necessarily have to appear at the end of a section, though they usually do.

Based on these sources, it seems to me that there are indeed no rules specifying any relationship between <article> and <footer> other than the well explained parent-child one. Therefore, the markup from the beginning of my post is semantically correct and we're indeed free to reorder these elements at will if it serves some other purpose.

Is this assumption correct? Are there any other caveats that we have to be mindful of?


Solution

  • Yes, your assessment is correct. A footer will always be a footer regardless of where exactly it appears within its sectioning element, as long as it appears within the correct sectioning element it is intended for. The sole distinguishing feature of a footer is the sort of content that appears inside it, which, as the spec suggests, may be:

    A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

    When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.