Divitis
From Free net encyclopedia
In HTML authoring, Divitis is the overuse of generic, semantically-meaningless container elements <span> and <div> in place of structural HTML elements. The term came up with HTML 4.01 and authoring techniques involving the separation of presentation (CSS) and content (HTML).
Because CSS would allow imitating the behavior of certain HTML elements and styling not possible with the traditional non-CSS approach, some authors would not simply stop abusing elements for creating certain effects, but replace them with the generic, semantic-free container elements <span> and <div>. A typical case of Divitis would be a page using the <div> element for headers and in place of other, semantically appropriate, elements (<h1> or <th>) or overloaded with empty <div> elements or ones containing only a single child element.
The phrase became more widely known with the release of the book Designing with Web Standards by Jeffrey Zeldman, a popular CSS guru. The phenomenon is also known under the term "div mania", originating from the article published at http://juicystudio.com/article/div-mania.php.
Example
Let’s take a look at an example. Take this (real-life) example web site:
<body> <div id="subnav"> <a href="contact.php">Contact</a> <a href="imprint.php">Imprint</a> </div> <div id="header"><h1>Title</h1></div> <div id="container"> <div id="menu"> <ul> <li>Navigation <ul> <li><a href="index.php">»Home page</a></li> <li><a href="">Navigation</a></li> <li><a href="">Navigation</a></li> <li><a href="">Navigation</a></li> <li><a href="">Navigation</a></li> <li><a href="">Navigation</a></li> <li><a href="">Navigation</a></li> </ul> </li> </ul> </div> <div id="content"> <h1 class="title">Headline</h1> <p>Lorem ipsum</p> <div class="line"> </div> <h1 class="title">Headline</h1> <p>Lorem ipsum</p> <div class="line"> </div> <h1 class="title">Headline</h1> <p>Lorem ipsum</p> <div class="line"></div> </div> </div> <div id="footer">Valid <a href="http://validator.w3.org/">XHTML 1.0 Strict</a>| valid <a href="http://jigsaw.w3.org/css-validator/validator-uri.html">CSS</a>| Date: 12/03/2005 | 8.19pm </div> </body>
Most of this web site can be re-written using more appropriate tags (or even by just removing useless divs):
<body>
<ul>
<li><a href="contact.php">Contact</a></li>
<li><a href="imprint.php">Imprint</a></li>
</ul>
<h1 id="header">Title</h1>
<div id="container">
<dl id="menu">
<dt>Navigation</dt>
<dd><a href="index.php">Home page</a></dd>
<dd><a href="">Navigation</a></dd>
<dd><a href="">Navigation</a></dd>
<dd><a href="">Navigation</a></dd>
<dd><a href="">Navigation</a></dd>
<dd><a href="">Navigation</a></dd>
<dd><a href="">Navigation</a></dd>
</dl>
<div id="content">
<h2 class="title">Headline</h2>
<p>Lorem ipsum</p>
<hr>
<h2 class="title">Headline</h2>
<p>Lorem ipsum</p>
<hr>
<h2 class="title">Headline</h2>
<p>Lorem ipsum</p>
<hr>
</div>
</div>
<p id="footer">Valid <a href="http://validator.w3.org/">XHTML 1.0 Strict</a>| valid <a
href="http://jigsaw.w3.org/css-validator/validator-uri.html">CSS</a>| Date: 12/03/2005 | 8.19pm </p>
</body>