Aleksey says:

>> If you’ve been working on a site and have incorporated a wonderful new footer with everything that it now allows please feel free to post a link in the comments to show other readers just what you can get away with.

Site navigation with nav in footer here: The Charity Spring; site still in progress.

Aleksey says:

@Samuel: The point is twofold:

1) as you have noticed, these elements can be created in XHTML, which makes HTML 5 backward compatible and

2) it is more semantic to say header, article, section, footer than div, div, div, div with non-standardized class names.

You can say class= header, head, heading, top, etc. and there is no way for a machine to know if it really is a header. HTML 5 lets you specify that. We understand it because the CSS creates the look and our mind fills in the details; machines, on the other hand, aren’t that smart.

There is another way to do it by standardizing the class names header, footer, etc. but that makes it longer to write out: <div class="footer"> vs <footer> and it starts presuming things about class names and makes them more restricting in a way. There’s also the role attribute, but it suffers from the same first problem as class names even though it’s not a bad idea.

Aleksey says:

@Alohci: Almost. By default, the browser doesn’t know what a footer is yet, but once it does, I will imagine it will render it the same as a div.

There aren’t any utilities yet, but there definitely will be. I can imagine they will be useful for screen readers.

The thing with avoiding the HTML 5 shiv is there will still be new elements introduced no matter what, so why throw out the sectioning elements to avoid shivs? Not saying you’re suggesting it, but we either make no new elements, or we make all the new elements that will be useful; it makes no sense to go halfway.

Aleksey says:

@Juraj: You took that out of context: I said HTML5 is backwards compatible, not XHTML.

Alohci says:

@Shaun – In my opinion, your footer is not semantically a footer, it’s an aside or a section. Only the aside at the end of your footer is semantically a footer from HTML5’s point of view. The fact that presentationally it appears at the bottom does not make it a footer.

Alohci says:

@landscribe. I think the best way to explain this is so say that while the term “footer” implies that it is to appear at the bottom, the tag name “footer” does not.

See the “Other Thoughts” quote from Bruce Lawson above.

Remember that modern HTML is a semantic mark-up language. Purely presentational elements are deprecated in HTML 4 and obsolete in HTML 5. So <footer> doesn’t imply “this is to appear at the bottom” which would be a presentational statement, instead it implies, this element contains information which, from a typographic standpoint, is ordinarily placed at the bottom. The quote in the original article, “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like”, is not just guidance about what to put in footer element, it’s what the definition of the footer element is

This means both that content placed at the bottom does not necessarily belong in footer element, and that footer elements need not appear at the bottom of a page or section.

tom says:

So we have couple footers at some page and one of them is the main footer.
So should we just name the main footer like:

<footer id="footer">

?

Josué Saúl Martín Hernández says:

@tom I guess you can’t use two footers in the same section, you only can:

<div id="section1">
content 2
<footer>The Footer 2</footer>
</div>
<div id="section2">
content 2
<footer>The Footer 2</footer>
</div>

So you identify them as (CSS):

#section1 footer{....}
#section2 footer{....}

Am I right Doctor? Are this elements yet controlable trough javascript & DOM too?

nate says:

"To see an example of the <footer> within an article/section look no further than this very page. Scroll down beyond the article and you will notice the light grey text section, which falls directly after the "further reading". This grey text section which gives information about trackbacks, responses, tags and categories is infact using the footer element. "

Isn’t that section actually in an aside tag? I just looked at the source and am now a bit confused. Your constant footer is inside the footer tag.

Nick says:

@Josué
You don’t have to use div’s and containers for everything. Example, div id=”section1″, div id=”section2″. If you want to use ids and classes and have different styling per section in html, use

section id="class"


Which may look like this in css:
section#class {
declaration
}

In this case, it will validate according to the html5 outline by the use of “section” rather than “div”.

You also don’t need classes and ids for the new html 5 semantics. Look up selectors such as “>” and “+” and “:not”. You could do something like this:

section>footer:first-child {
declarations
}


Which means when a footer follows a section that is equal to the first one, use this declaration.

Then, if you have other sections that need footers, you can use other css such as:

section>footer {
declaration
}

This means the CSS declaration will apply to all footers within sections. But since you have used “section>footer:first-child”, your css declaration for “section>footer” elements will not be applied to the first-child. However, in this example I have the “first-child” selector appearing first in the css. Make sure your “first-child” selector appears last in the css order to be applied.

tex says:

can I have more than one footer per section?

Wes says:

it’s allowed to use multiple footer/header tags referring to the same section?

test

Author...
content...
Posted in..

2014-10-10

and also…

test
Author...
content...
2014-10-10

Jeffrey Barke says:

While I understand keeping things for archival purposes, why not just permanently redirect the old footer element page to this one? Despite the disclaimer, I only see potential confusion and no value in keeping the other article.

@tex,
@Wes

Yes, you can have more than one footer per section. The spec is pretty straightforward and worth perusing: http://www.w3.org/TR/html5/sections.html#the-footer-element.

While there is an example of two footer elements for one section in the spec, there isn’t an example of two headers. While not explicitly forbidden, multiple headers don’t make sense to me. What’s your use case?

The example you provided doesn’t require two headers or footers, Wes. A div element doesn’t introduce a new section; why are you giving it a header and a footer?

<article>
<header>
<h1>Test</h1>
<address>Author</>
</header>
<div class=”content”>
</div>
<footer>
<p>Posted in</p>
<p>Pub date</p>
</footer>
</article>

Jeffrey Barke says:

@D,

While its “correctness” depends on what your actual use case is, section elements can be descendants of footer elements.

The spec gives an example of a “fat footer” which includes a section element: http://www.w3.org/TR/html5/sections.html#the-footer-element

Note that while headings (h1, h2, etc.) can be descendants of a footer element, the header element itself cannot.

Mark Excell says:

I think we have an interesting set of factors here. The idea behind the HTML5 is to give meaning to the markup within the HTML document, but to some degree because Google has such a big effect it becomes more ‘this is the standard as long as Google says its ok’. I find the most consistent way to implement the footer is to do a and in the css have footer display as ‘block’. This of course should not be needed, but it allows for better browser compatibility and because Google does not currently give a boast for html5 markup then this would seem acceptable. Its a bit like the H1 issue. In theory with HTML5 you can scatter H1 all over the place, but I still find myself only using it once to make sure Google understands the html properly.