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.

<header>

Handy hint

As your web design skills progress you will be constantly working with containers. You will be positioning and sizing these boxes, and the boxes inside them, every time you create a web page.

However, when you are laying out a page, the containers you create may not 'cooperate'. For example, they may refuse to line up. Sorting out little problems like this can test your patience.

When that time comes, and it will, remember this: try temporarily giving each container a contrasting colour. You'll be able to see what's going on and sort it out with the minimum of fuss.

And while you're here, guess what kind of semantic container this is…

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.

<nav>

For your main navigation bars.

<section>

Contains content on a single theme. Should have a heading. Most of your content will be in <section> and <article> elements.

<article>

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.

<aside>

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.

<footer>

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

<div>

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.

<html> and <body>

The <html> and <body> elements contain everything on the page. For that reason they are often used for setting default styling. You will learn about the <html> and <body> elements in Lesson 8.

<Previous lesson

Next lesson>