One of the challenges of using new HTML5 sectioning elements is their names. They are named things that make sense semantically, but they also have connotations that are not always correct. For example:
ASIDE— should be on the side of a pageHEADERandFOOTER— the head and foot of a documentFIGURE— is only for imagesARTICLE— can only be used for articles
The tricky part is that while all of the above statements can be true, none of them are 100% true. for example, the ASIDE contents can be displayed on the side of a page, it can also be displayed at the bottom or top of the page too. And a FIGURE can be of an image, but it can also be other things.
Sectioning Elements Don’t Define the Layout
HTML elements are not intended to define the look or layout of a page. They are used to define the structure of a document and to provide semantic meaning to the content. Instead, if you want to define the layout, you should use CSS.
This means that elements like ASIDE, HEADER, and FOOTER don’t have to be on the side, top, or bottom of the page. They can be placed anywhere in the document. If you look closely at the layout mockup image above, you’ll see that none of the sections are probably what you would expect them to be. And this is fine.
Sectioning Elements Don’t Define the Content Beyond a Certain Point
HTML5 sectioning elements define the meaning of the contents. But the ARTICLE element defines a block of content that can stand by itself, or be syndicated. This could be an article, or it could be a blog comment. This could even be a photo, such as on a photoblog.
The FIGURE element is also confusing in this way. One definition that I like is that the FIGURE element should hold items that you might pull out into a separate appendix in a textbook. This is often images and graphics, but it also can be tables of data, charts, graphs, and so on.
You Can Use Multiple Sectioning Elements
The other thing you should remember when building your HTML5 documents is that you aren’t limited to one HEADER, FOOTER, ARTICLE, ASIDE, or FIGURE. The HEADER and FOOTER can define the head and foot of sections on the page. You can have multiple ARTICLEs and so on. These elements define what the content is, and if your page has 10 articles, then you should use the ARTICLE element 10 times.
