Divitis: Abuso de etiquetas
y

22/11/2013 / Recursos, Trucos

En el HTML autorizado, DIVITIS es el abuso en la utilización de las etiquetas <div> y <span> como elementos contenedores genéricos y sin significado semántico para reemplazar elementos estructurales de HTML. El término aparece con el HTML 4.01 y la aparición de CSS para separar el contenido del diseño.

El CSS permite imitar y sustituir algunas funciones de HTML, pero con algunas limitaciones. Por este motivo se acaba abusando del CSS para conseguir algunos efectos mediante las etiquetas genéricas y sin significado semántico <div> y <span>. Un caso tí­pico de divitis puede ser el utilizar etiquetas <div> para los Headers o cabeceras (Tí­tulos) en lugar de los elementos semánticamente apropiados <h1> or <th>, o sobrecargar con etiquetas vací­as <div> elementos pequeños o un solo elemento.

Este término viene del libro del gurú del CSS Jeffrey Zeldman “Designing with Web Standards”. También se conoce a este fenómeno como “div maní­a”.

Un ejemplo claro, sacado de una página real:

<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>

Este código se puede reescribir utilizando los elementos adecuados, o sí­mplemente sustituyendo las etiquetas <div> mal utilizadas:

<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>

Fuente: Divitis en la wikipedia