div (HTML attribute)
Share:
Free JavaScript Book!
Write powerful, clean and maintainable JavaScript.RRP $11.95
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 div
s 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.
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.
New books out now!
Get practical advice to start your career in programming!
Master complex transitions, transformations and animations in CSS!
Latest Remote Jobs



