Re: header/footer in header/footer

Interesting.

To establish whether sectioning elements in footers makes sense, I think we
first have to ask the question, "what's the difference between a footer and
a 'fat footer'?"

A footer is certainly less verbose than a "fat footer". It contains less
information. What information should that be, though? According to the
spec' a footer is for information
about its parent section (it is supposed to act like a sort of conclusion
or epilogue).

"A footer typically contains information about its section such as who
wrote it, links to related documents, copyright data, and the like." (
http://www.w3.org/TR/html-markup/footer.html)

This information directly relates to the content that precedes it within
the same section. To open a new section _within_ a footer is odd because
you are essentially starting a new theme (sections are thematic containers)
at the same time as concluding the original theme. It'd be a bit like
saying "And to conclude my lecture on the sea life of Southern Australia,
allow me discuss my experiences as an astronaut." Why would you do this?

So, what is the "fat" part of a "fat footer" made of?

In my experience, fat footers usually contain a lot of tangental, loosely
related information. A lot more than a simple footer, at least. In most
cases it is the sort of tangental information one would usually find in the
"sidebar" of a two column site. In fact, at narrow viewport widths,
responsive sites would normally push the right (or left) aligned "sidebar"
underneath the main content to make it footer-like in any case.

The CSS alignment isn't important and (with @media queries) often changes
anyway: Fat footers are just sidebars that appear at the bottom rather than
to one side. Either / both should be marked up using an <aside>, which is
reserved for precisely the kind of tangental stuff we are talking about.

Naturally, this aside should not appear _in_ the parent section's footer
(as discussed) but above it. This being the case, to make the "fat footer"
one would simply use a <div> to wrap the aside and the parent footer
together:

<div class="fat-footer">
   <aside>
      ... tangental section
   </aside>
   <footer>
      ... information about main content
   </footer>
</div>

The <div> just groups them together in terms of layout, not thematically.

If you still wanted to divide the <aside> into child sections, this would
now be completely legitimate because sections can be nested. However, I
wouldn't bother with these subsections unless there is an appropraite
magnitude of content and your "fat footer" is truly hefty / obese.

<div class="fat-footer">
   <aside>
      <section>
         ... subtopic of tangental info 1
      </section>
      <section>
         ... subtopic of tangental info 2
      </section>
      <section>
         ... subtopic of tangental info 3
      </section>
   </aside>
   <footer>
      ... information about main content
   </footer>
</div>

In summary, I think <footer> elements should be reserved for concluding
section content and, if you have a lot of extra content you wish to group
together, this should be represented by a subsection. If this additional
subsection is not directly related to the theme of the main content on the
page, <aside> is the most appropriate of the sectioning elements.

What do you think?

Received on Thursday, 25 July 2013 18:39:28 UTC