Description
The div is a generic block-level element. It doesn’t convey any meaning about its contents (unlike a p element that signifies a paragraph, or an h1 or h2 element that would indicate a level 1 or level 2 heading, respectively); as such, it’s easy to customize it to your needs. The div element is currently the most common method for identifying the structural sections of a document and for laying out a web page using CSS.
Some developers perceive similarities between the p and the div elements, seeing them as being interchangeable, but this isn’t the case. The p element offers more semantic information (“this is a paragraph of text, a small collection of thoughts that are grouped together; the next paragraph outlines some different thoughts”), while the
div element can be used to group almost any elements together. Indeed, it can contain almost any other element, unlike p, which can only contain inline elements.
Example
The HTML below shows two divs being used in conjunction with id attributes to identify different sections of a web page:
<div id="main_navigation"> ⋮ </div> <div id="body_content"> <h1>Page heading</h1> <p>Body content</p> </div>
Use This For …
The div is an “anything-goes” element—it can contain any inline or block-level
elements you choose, so it has no typical content.
Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full |
This element has no compatibility issues. All the browsers listed support the
div element.
Frequently Asked Questions about HTML Div Attribute
What is the purpose of the div tag in HTML?
The div tag in HTML is a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use the div tag to group together HTML elements and apply CSS styles to many elements at once. It’s a way to structure your page when you have elements that logically fit together.
Can I nest div tags within each other?
Yes, div tags can be nested within each other. This is often done to apply different styles to different sections of the page. For example, you might have one div for the header of your site, and within that div, you might have other divs for the logo, navigation links, and search bar.
How do I apply CSS styles to a div tag?
CSS styles can be applied to a div tag in several ways. One common method is to use a class or id attribute with the div tag. This attribute can then be referenced in your CSS to apply styles. For example, if you have a div with the id “header”, you can apply styles to it in your CSS with #header { }.
What are some common attributes for the div tag?
Some common attributes for the div tag include id, class, style, and title. The id attribute provides a unique identifier for the div, the class attribute allows you to apply the same styles to multiple divs, the style attribute lets you apply inline CSS styles, and the title attribute provides additional information about the div.
Can div tags affect SEO?
While div tags themselves do not directly affect SEO, the way they are used can. For example, using div tags to create a logical and well-structured layout can make your site more user-friendly, which can indirectly improve your SEO. Additionally, search engines may use the content within div tags to understand what your page is about.
How does the div tag differ from the span tag?
The main difference between the div and span tags is how they handle content. The div tag is a block-level element, which means it creates a new line before and after the content. The span tag, on the other hand, is an inline element, which means it does not create a new line.
Can I use div tags with HTML5 semantic elements?
Yes, div tags can be used with HTML5 semantic elements. In fact, before the introduction of semantic elements in HTML5, div tags were often used to create the structure of a webpage. Now, div tags are often used in conjunction with semantic elements to create a more meaningful and well-structured layout.
What happens if I don’t close a div tag?
If you don’t close a div tag, it can cause problems with your page layout. The browser will try to automatically close the tag for you, but it may not do so correctly, leading to unexpected results. Therefore, it’s always best to make sure you close your div tags.
Can I use div tags in email HTML?
Yes, you can use div tags in email HTML. However, some email clients do not support all CSS properties, so it’s best to use inline styles with your div tags to ensure your email looks the same across all clients.
How can I center content within a div tag?
To center content within a div tag, you can use CSS. If you’re centering text, you can use the text-align property with the value “center”. If you’re centering a block-level element, you can use the margin property with auto values for the left and right margins.
Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.
