# HTML container tags
> Learn the difference between the HTML container tags article, section and div, and when to use nav, aside, header, main and footer in your page markup.
Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-08-25 | Topics: [HTML](https://flaviocopes.com/tags/html/) | Canonical: https://flaviocopes.com/html-container-tags/
## Container tags
HTML provides a set of container tags. Those tags can contain an unspecified set of other tags.
We have:
- `article`
- `section`
- `div`
and it can be confusing to understand the difference between them.
Let's see when to use each one of them.
### article
The article tag identifies a *thing* that can be independent from other *things* in a page.
For example a list of blog posts in the homepage.
Or a list of links.
```html
```
We're not limited to lists: an article can be the main element in a page.
```html
A blog post
Here is the content...
```
Inside an `article` tag we should have a title (`h1`-`h6`) and
### section
Represents a section of a document. Each section has a heading tag (`h1`-`h6`), then the section _body_.
Example:
```html
A section of the page
...
```
It's useful to break a long article into different **sections**.
Shouldn't be used as a generic container element. `div` is made for this.
### div
`div` is the generic container element:
```html
...
```
You often add a `class` or `id` attribute to this element, to allow it to be styled using CSS.
We use `div` in any place where we need a container but the existing tags are not suited.
## Tags related to page
### nav
This tag is used to create the markup that defines the page navigation. Into this we typically add an `ul` or `ol` list:
```html
```
### aside
The `aside` tag is used to add a piece of content that is related to the main content.
A box where to add a quote, for example. Or a sidebar.
Example:
```html
some text..
other text...
```
Using `aside` is a signal that the things it contains are not part of the regular flow of the section it lives into.
### header
The `header` tag represents a part of the page that is the introduction. It can for example contain one or more heading tag (`h1`-`h6`), the tagline for the article, an image.
```html
Article title
...
```
### main
The `main` tag represents the main part of a page:
```html
....
....
```
### footer
The `footer` tag is used to determine the footer of an article, or the footer of the page:
```html
....
```