<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.
<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
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>
<div> element groups all other HTML tags related to personal details of the user.
<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.
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
<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
<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.