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.
$1 Domain Names
Register great TLDs for less than $1 for the first year.
Why wait? Grab your favorite domain name today!
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 div tag in HTML. 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 div tag in HTML 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 div tag in HTML 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.
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.
Related articles
A sample headline for your website
The HTML tag style is the best way to design the appearance of individual elements on a website and thus build the page optimally. Here you will learn what exactly the style tag in HTML is used for, how it is structured and which HTML attributes are compatible with it. This will allow you to easily embed the tag in your code.
How to define link targets with _target in HTML
If you want to include links on your website, you can use the HTML attribute target to specify where the link should open. In doing so, you decide whether users should stay on your online presence or be sent on to the next website. In our article, you will learn how to use _target and what you should keep in mind when doing so.
The most important HTML tags in an overview
Without HTML tags, your website cannot be displayed properly by different browsers. They structure your document, pass on important information and are thus particularly important for your website. We will show you the most important HTML commands in table form and explain what the different HTML tags are used for and how.
How to use the DOCTYPE html tag
The DOCTYPE html declaration should be placed in the first line of code of HTML documents and sub-pages to define syntax and grammar rules. Browsers can immediately see what type of document it is, while a missing declaration can lead to problems with displaying the website. Find out more about DOCTYPE html here in our article.
