Divitis: Abuso de etiquetas
y

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

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here