There are several HTML elements that I have not introduced to this point because without CSS they have little point, and almost no meaning. These elements include span and div.
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:
- A
<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.- A
<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. - A
<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<div>around the<ul>is redundant. - It’s not necessary to add a
<div>to create an extra border around an element - Use a combination of
outlineandbox-shadowinstead. - Avoid setting
heighton<div>elements (in fact, avoid setting aheighton any element, other than images). - Other than uses of
height: 100%, allow<div>elements to find their own height, determined by their content.
Photograph by Marcin Wichary, used under a Creative Commons Generic 2.0 license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
