Which is semantically better - <aside> or <footer> for an extended site footer?

What would be the semantically better markup for an extended <aside> or <footer> website <footer> ?

In the “advanced footer” section, I refer to something like the extended footer on this site (containing contact details and hours of operation against the “real” footer at the very bottom containing the copyright notice). The content of the "extended footer" will be general, system-wide and not specifically related to the content of the pages on the site.

According to the specification specified in HTML5Doctor :

The footer element is the footer for its closest ancestor sectioning content or the root element of the section. The footer contains information about its section, for example, who wrote it, links to documentation, copyright information, etc.

I would be inclined to implement something like

 <footer> <div id="extended-footer"> <!-- Sitemap, latest posts, contact details, etc. --> </div> <div id="bottom-footer"> <!-- Copyright notice etc. --> </div> </footer> 

However, I note that the HTML5Doctor site itself uses something like the following:

 <aside id="extended-footer"> ... </aside> <footer> <!-- similar to id-footer --> <footer> 

I really note that the HTMLDoctor advanced footer seems to be related to the actual article / content (i.e. via the “Related Messages” section), so it can probably be implemented as <footer> inside <main> .

+4
source share
1 answer

HTML5 CR defines the footer element as representing, well, the footer. This does not provide a real definition, moreover, although it characterizes the footer with some examples. Between the lines, however, I think we can see two concepts of the “footer”: the “footer” as additional information that belongs to the actual content of the page but is sent due to its nature; and a footer in the form of a template that appears on all or most pages of the site, possibly with some changes related to specific pages.

In any case, for example, the buttons of social networks appear to belong to the aside element, since they are really just “related to” the content (site or page). However, they are usually repeated on all pages, which logically is part of the footer in the "template" sense.

The solution seems simple: use the aside element nested inside the footer element, for example.

 <footer> © 2013 ACME • <a href=map.html>Sitemap</a> <aside><a href="https://www.facebook.com/acme"> <img src=fb.png alt=Facebook></a></aside> </footer> 

The choice of markup in such cases has little practical effect, at least for the moment. Browsers, search engines and other related software do not handle footer , aside and friends in any specific way. On some day, they can, and then it can be important to have “related” content in the aside elements and “template” content in the ( header and) footer elements (for example, so that people using screen readers can easily skip the template site after listening to it once).

PS "Semantically better" does not have a clearly defined meaning, that is, it is semantically vague, if not empty. More often than not, in the context of HTML, “semantic” actually means “structural”, i.e. As related to the structure of the page, and not to the meanings of things. In practice, the question arises: how to interpret structural, and sometimes rather scholastic descriptions in HTML5 projects (and / or WHATWG HTML)?

+4
source

All Articles