Which is the more correct page layout? – was the question posed over on Stack Overflow with regards to the new HTML5 main element. Neither of them as it turned out, but it did make me think that further examples on how to use the main element might be useful.
I wrote about the main element and included two examples of how it might be used. Of course two examples won’t cover everybody’s situation so a few more might help. Bear in mind that these are my interpretation, after reading the specification, on how the main element can be used so are naturally open to interpretation.
Context and content
Before I go into some examples, remember that it’s all about context and content. Let’s briefly turn to the specification (again) to see what it says:
The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
Bear this in mind when you’re trying to work out if your header and/or footer should be inside the main element or not, and whether the aside that you’ve added should also be inside or outside.
The question to ask yourself in each case is: is the content of this element relevant to the main content of this document or not?
If it is – it goes inside the main element, otherwise, outside.
Let’s now look at some examples to help illustrate what I mean (some of these examples might overlap the two in my previous post but that doesn’t really matter).
In this short example, both the header and the footer are outside the main element as they are generic to the website and not specific to the content that is within the main element.
Here, the same generic header and footer elements remain outside main, but there is an additional header element within the main element as its content is relevant to the content within the main element only as it contains a relevant heading and in-page navigation. The in-page navigation is repeated within a footer which is again within the main element.
This example is largely the same as the second one except that we have introduced an aside into the fray. The content of the aside is considered to be relevant to the content within the main element, which is all about the Border Terrier, so the aside is placed within the main element.
In this final example, two aside elements containg adverts have been placed outside the main element as their content is not specific to the content within main. These asides could be on any page, as they are as generic as the header and footer shown in this example.
I hope these further examples have helped clear a few things up. If not, feel free to comment below!