What is a Container?

In CSS, the term Container refers to an element used to structure the layout of a webpage.

A container wraps, aligns, and groups content.

You can use a container to manage the design and structure of a webpage.

Thus, a container plays a vital role in keeping a webpage neat and structured.

While <div> tags are commonly used to create containers, it is preferable to use meaningful tags.

Examples of meaningful tags include <header>, <main>, and <footer>.

Using meaningful tags allows you to grasp the structure of a webpage at a glance when viewing the code.

It also makes it clear for others to understand the code.

These meaningful tags are called Semantic Tags.

Copy
<nav class="navbar">
  <div class="container"></div>
</nav>

First, use the <nav> tag to define the navigation area. Then, create a container by using the <div> tag with a class of "container".

Here, both the <nav> tag and the <div> tag act as containers, but they serve slightly different roles.

• <nav>: Used to define the navigation area.

• <div>: Used to separate or segment the content within.

We will explore the reasons for using each tag in more detail while styling them in the next guide.