About container elements
In the previous lesson you learnt about 'child' elements that are contained within a 'parent' element. Well, in this lesson you'll learn about some elements that are used as parents, to group other elements. You could call them 'container' elements.
Imagine a web page being made up of invisible boxes. And some boxes in other boxes. Well, that's the way it really is, with each box being a container. Containers are 'block' elements, so they take up all the available width. If a container is within another container (i.e. a child of that container), it will by default be as wide as the parent container.
Containers are visible when they have a coloured background. You can clearly see the container elements on this page; just look for the different coloured backgrounds. For example, the yellow header or the large blue box that contains the main text. To get an even better idea, have a look at the alternative version of this page.
Semantic container elements
Most container elements are named after the type of content they contain (e.g. footer content). This not only makes life a little easier for you and me, but it also allows the browser to determine the structure of the document and assistive technologies to do their assisting. Elements with names that convey this kind of information are known as semantic elements.
Groups headings and introductory content. Not just for the top of the page – the 'section' and 'article' containers can each have their own header. Only use <header> if there is more than just a simple heading.
For your main navigation bars.
Contains content on a single theme. Should have a heading. Most of your content will be in <section> and <article> elements.
Type of <section> that contains content that would make sense if presented independently. Should have a heading. Most of your content will be in <section> and <article> elements.
For content tangentially related to the main content. Fun facts, handy hints, or some detail about a particular aspect of the content. Each aside should have a heading.
As you'd expect, for information about the content above, such as the title, copyright notice, last update and author. Not just for the bottom of the page – the 'section' and 'article' containers can each have their own footer.
Other container elements
The most common container element – <div> – is not semantic. It is used when none of the semantic types would be appropriate. It is a generic container that has no meaning to the browser or assistive technologies. If you need a container just for styling purposes, use this one.