<div> — is one of the most-used HTML tags. It allows you to define the structure of the web page clearly. Let’s dig into the details about what div is and how to use it.

What is <div> in HTML

Nowadays, all modern websites present web pages neatly defined and organized. To ensure the best readability and coherence, they divide a web page into many divisions; hence the tag was named <div>.

Each of these divisions contains related UI components. This is where the HTML <div> tag helps us.

By definition, the <div> tag is a block-level container tag used to divide a web page into many smaller divisions to group logically related UI elements. This multipurpose tag ranks higher in the list of most popular HTML tags.

Let’s have a glance at a quick example of an HTML document that has one <div> in it:

<div>
  <h3> Personal Details </h3> 
  <br/>
  <label for="fullName">Full Name:</label> 
  <input type="text" id = "fullName" name="fullName"/>
  <br/>
  <label for="emailAddress">Email Address:</label> 
  <input type="email" id="emailAddress" name="emailAddress"/>
  <br/>
</div>

Here, the <div> element groups all other HTML tags related to personal details of the user.

Technical Explanation

By definition <div> is a generic container tab which means it can contain other HTML tags.

As it’s a block-level element by default, it moves to the next row and occupies the entire horizontal width of its parent HTML element.

Common Usages

Now let’s discuss where we can use the <div> tag within an HTML document:

  • You can use the <div> tags to create trendy two-column layouts and three-column layouts
  • When we need to apply the same CSS styles to a group of elements sitting nearby
  • To group related elements for better management of the document flow

Avoid overusing <div> in HTML

It’s equally important to be cautious while deciding to use the <div> tag to reduce misuses and overuse.

For example, many developers use the <div> tag to create sections within a web page. Modern HTML offers a more appropriate <section> tag for it.

The over usage of the <div> tag is popularly known as Divitis. As wiki defines it - “The practice of authoring web-page code with many div elements in place of meaningful semantic HTML elements.”

So, you shouldn’t use <div> where you can replace it with more appropriate tags like <section>, <article>, <nav>, <aside> , <header>, <footer> that were introduced in HTML5.

As a rule of thumb - only use the <div> HTML tag when there’s no alternative. This helps browser and search engines to understand the content of your web page.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript