Re: header/footer in header/footer

I've used asides for fat footers for this reason. Usually visually there
was even a border between the fat stuff (usually columns with lists of
further subnavigations) and the truly footer stuff (which was a footer
with company info and copyright). In other words, two separate sectioning
elements CSS'd to the bottom.

It's interesting that we've made a tag called "footer" for a somewhat
specific meaning but visually we'll call anything sitting at the bottom
a "footer".

-Mallory

On Thu, Jul 25, 2013 at 07:39:00PM +0100, Heydon Pickering wrote:
> 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 Friday, 26 July 2013 11:43:52 UTC