A <div> (division/section), is a block-level HTML element that can be used to add structure/group content.
For example, a webpage might include: a navigation menu, article and advertising.
In the HTML code, the three types of content might be separated, by placing each in its own <div>.
<div id="navMain">
<h4>Main menu</h4>
...
</div>
<div id=”contentMain”>
<h1>Article title</h1>
<p>Introduction…</p>
…
</div>
<div id="contentAdvertising">
<h4>Advertisers links</h4>
...
</div>
Using the Cascading Stylesheets (CSS) presentational language, a <div> can also be styled.
For example, <div>s are commonly used to create webpage layouts or grids. CSS is used to control the visual qualities of each <div>, including its: height and width, position, background colour and borders.
div-i-tis
Div-i-tis is an informal term that is used to describe webpage code where the <div> element has been used excessively, unnecessarily or inappropriately.
- The use of
<div>s to create presentational effects, such as rounded corners, can quickly lead to complex code.
To create a visual effect may require the webpage author to use a number of nested<div>s. A more-experienced web designer might use a different technique that requires fewer<div>s to create the same effect.
- A web designer might add additional
<div>s that are redundant (in terms of the final design), but that allow for future revision to the design. In some cases, redundant<div>s are required to account for variations in that way that different web browsers interpret the CSS language.
- Less-experienced webpage authors will often use a
<div>in place of a more semantically-appropriate HTML element. For example, they might use a<div>and CSS to style text to look like a heading, rather than using an HTML heading element (<h1>,<h2>,<h3>, etc.).