About container elements

In this lesson you'll learn about some elements that are used to group other elements. You could call them 'container' elements.

Imagine a web page being made up of invisible boxes. With some boxes in other boxes. And boxes inside those boxes. Well, that's the way it really is, with each box being a container. Containers are 'block' elements, so by default they take up all the available width. If a container is within another container, it will by default be as wide as the container it is in.

Empty containers are visible when they have a coloured background and/or a border. 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 retina-searing, high contrast 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.

However, when you are laying out a page, the containers you create may not behave in the way you expect. For example, they may refuse to line up horizontally. 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 background 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. Only use <header> if there is more than just a simple heading.

<nav>

For your main navigation links.

<section>

Contains content on a single theme. Should have a heading.

<article>

Type of <section> that contains content that would make sense if presented independently. Each article should have a heading. Most of your content will be in <section> and/or <article> elements. Don’t worry too much about what goes in sections and what goes in articles. There seems to be a lot of overlap between the two.

<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 the footer. This can include the title, copyright notice, last update and author.

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>