Use quote marks to find an "exact phrase"

Print version

print icon

6: Container elements

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. 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, 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 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>

Groups headings and introductory content. Only use <header> if there is more than just a simple heading.

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.