div is arguably the most overused and misunderstood element in the HTML5 specification, so let’s try to kill a few common mistakes right off the bat:
<div>is a "container of last resort"
- It's an element used after all other section elements have been eliminated.
- In CSS, anything you can do to a
<div>you can do to any other element
<div>is not special in that regard. You do not need to use a
<div>in order to access advanced CSS such as positioning.
<div>should almost never contain a single element
- Because anything you can do to a
<div>can be applied to any other element, wrapping a
<div>around a single element is almost always redundant and unnecessary.
<div>is not a substitute for, or addition to, a block or section element
- An unordered list, for example, already has a container element:
<ul>. Wrapping a
- It's not necessary to add a
<div>to create an extra border around an element
- Use a combination of
- Avoid setting
<div>elements (in fact, avoid setting a
heighton any element, other than images).
- Other than uses of
height: 100%, allow
<div>elements to find their own height, determined by their content.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.