How to use the HTML div tag container

The div tag is used to split and separate content in HTML. The div container is only recommended when other elements cannot be used, as the div container does not have its own semantic features.

Cheap domain names – buy yours now
  • Free website protection with SSL Wildcard included
  • Free private registration for greater privacy
  • Free 2 GB email account

What is a div container and what is it used for?

A div container, which derives its name from the word `division´, serves primarily as a container for other HTML elements. Although it is possible to position groups and sections, div does not have its own semantic features in HTML. Its primary task is therefore to create and delimit areas which can be formatted with CSS. The div container has no influence on a website’s layout or content.

This highlights why the div tag in HTML no longer plays a large role. The div container was used quite often in earlier versions, however its use was massively restricted with the introduction of HTML5 and HTML 5.1. It is recommended to find alternative semantically suitable solutions before using the HTML div tag. The div container should only be used for the layout when no other element can be used, such as the article, aside, header, main, nav or section elements. The div container is inserted as a block-level element in a one line break before and after it.

How is div used in HTML?

The div tag in HTML is used to format HTML elements with CSS which belong together visually, bundle different HTML blocks and position them clearly, and animate HTML, CSS, and JavaScript content. The following example illustrates how a div container is constructed without attributes:

<div>
<h2>example list</h2>
<ul>
<li>first item on the list</li>
<li>second item on the list</li>
<li>third item on the list</li>
<li>fourth item on the list</li>
</ul>
</div>

Almost any flowing content can be placed within the div container in principle. The HTML div tag has no effect on the content display, but it does section off the content.

Which attributes does the div container support?

The div tag in HTML only supports global attributes. align is an exception which is no longer allowed for div containers since the introduction of HTML5. class and id are the most used HTML attributes for div. Below are two examples of div containers with attributes:

<div class="example">
<h2>example of a headline</h2>.
<p>you can insert a sample text here, which is sectioned off by the div container.</p>
</div>

The id attribute can also be used with a div container:

<div id="example">
<ul>
<li><a href="index.html" title="To Home Page">Home Page</a></li>
<li><a href="contact.html" title="Write to us">Contact</a></li>
<li><a href="about.html" title="About Us">About</a></li>
</ul>
</div>

Conclusion: The HTML div tag is basically a thing of the past

There are several reasons why div doesn’t play a big role in HTML anymore. It is not solely due the problems that come with a div container, but rather the fact that semantic HTML tags structure the data more efficiently, which makes maintenance easier. Corrections to a document can also be made faster by using other objects such as header, footer, article or section. It is good to know div If you are learning HTML or learning CSS. However, it may be more beneficial to use more semantically appropriate elements.

Tip

Do you already have a vision of your website? Cultivate your professional online presence with the Website Builder from IONOS. Our knowledgeable experts will be there every step of the way to assist you if necessary.

Was this article helpful?