Div Tags

What is a "div" tag?

Div stands for “division” or “section”. When you are organizing the layout of your webpage, it is often helpful to organize the content into sections. The div tag defines a division or a section in an HTML document. It is often used as a container for HTML elements - which is then styled with CSS.

What does a "div" tag do?

The div tag does not really do anything visible; it just divides the document into sections, so it is convenient for you to work with a document by splitting it into different sections.

The div tag is easily styled by using the class or id attribute.

<div class="container1">
  <p>My paragraph</p>
  <img src="myImage.jpg" alt="my image">
</div>

Any sort of content can be put inside the div tag!

Note: By default, the div element is a block element, meaning that it takes all available width, and comes with line breaks before and after the div element.

Multiple "div" elements

You can have many div containers on the same page and style them separately with CSS.

<div class="London">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 13 million inhabitants.</p>
</div>

<div class="Oslo">
  <h2>Oslo</h2>
  <p>Oslo is the capital city of Norway.</p>
  <p>Oslo has over 600.000 inhabitants.</p>
</div>

<div class="Rome">
  <h2>Rome</h2>
  <p>Rome is the capital city of Italy.</p>
  <p>Rome has almost 3 million inhabitants.</p>
</div>

Possible Result After Styling with CSS:

Aligning "div" Elements Side by Side

When building web pages, you often want to have two or more div elements side by side, like this:

There are different methods for aligning elements side by side, all include some CSS styling. The example above was styled using the float: left and width: 33% CSS properties.

See the CSS guides for more styling information.