Una página web está escrita en lenguaje HTML, en cualquiera de sus variantes. ¿Variantes? Si, tenemos muchos estándares definidos para algo que parece siempre lo mismo, pero que al final se parecen como un huevo a una castaña. ¿Y sabéis lo mejor? Que los navegadores están pensados para interpretar siempre el código, ignorando los posibles errores y mostrar la página al usuario como buenamente puedan.


¿Qué significa esto? Que si no vamos con cuidado acabaremos mezclando HTML4, XHTML y HTML5 en el mismo documento y no habrá manera humana de cerciorarnos si la página que estamos escribiendo se va a mostrar correctamente en todos los dispositivos y navegadores desde los que nos podrían visitar. Tiene otras implicaciones relacionadas, por ejemplo, con técnicas SEO, lectura de la web por dispositivos para invidentes, etc...

¿Cómo hago para escribir documentos HTML de forma correcta?

Muy fácil, va usted a www.w3.org y se estudia todas sus especificaciones. ¿Estás de broma? ¡Evidentemente que si! Pese a que no está mal leerse algún documento como este: http://www.w3.org/TR/html401/, existe una herramienta que nos permite validar nuestro documento de forma automática: http://validator.w3.org/. Vamos a ver como usar este servicio con un ejemplo. Tenemos el siguiente código HTML:

<html> 
   <head>
   </head>
   
   <body>
      <p>Lista de la compra ordenada</p>
      
      <ol><!--Puede tene varios tipos (1,2,3,4-a,b,c,d-I,II,III,IV)-->
         <li>Leche</li> 
         <li>pan</li>
         <li>azucar</li> 
         <li>sopa</li>
      </ol>  

      <p>Lista de la compra ordenada</p>

      <ol type="I"><!--Puede tene varios tipos (1,2,3,4-a,b,c,d-I,II,III,IV)-->
         <li>Leche</li>
         <li>pan</li>
         <li>azucar</li>
         <li>sopa</li>
      </ol> 

      <p>Lista de la compra ordenada</p>
      
      <ol type="a"><!--Puede tene varios tipos (1,2,3,4-a,b,c,d-I,II,III,IV)-->
         <li>Leche</li>
         <li>pan</li>
         <li>azucar</li>
         <li>sopa</li>
      </ol> 

      <p>Lista de la compra desordenada, con simbolos</p>
      
      <ul><!--Hay varios tipos de simbolos (square, disc, circle)-->
          <li>Leche</li> 
          <li>pan</li> 
          <li>azucar</li> 
          <li>sopa</li>
        </ul>  
   
         <p>Lista de la compra desordenada, con simbolos</p> 
         
         <ul type="square"><!--Hay varios tipos de simbolos (square, disc, circle)--> 
            <li>Leche</li> 
            <li>pan</li> 
            <li>azucar</li> 
            <li>sopa</li>
          </ul> 
         
         <p>Lista de la compra desordenada, con simbolos</p> 
         
         <ul type="circle"><!--Hay varios tipos de simbolos (square, disc, circle)-->
               <li>Leche</li>
              <li>pan</li>
               <li>azucar</li>
                <li>sopa</li> 
         </ul>
      </body>
</htmal>

Subimos nuestra página web a un servidor y le pasamos, al servicio de validación, la url de esta. Pulsamos sobre "Check" y vamos a ver el resultado. El programa ha detectado que la web está escrita en "HTML 4.01 Transitional", pero tiene varios errores. En la misma página, un poco más abajo, tenemos el detalle de cada una de las alertas y de los errores, y consejos para solucionarlos o donde encontrar información referente a los mismos.

Vamos a nuestro editor favorito, abrimos el documento, y vamos punto por punto a arreglar el código HTML anterior.

  • Line 1, Column 1: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>". No hemos declarado el tipo de documento HTML, si es HTML 4.01, la primera línea de nuestra página lo debería indicar. Así que añadimos: "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">".
  • Line 2, Column 14: end tag for "HEAD" which is not finished (...) For instance, in HTML the <head> element must contain a <title> child element. Simplemente hay que cerrar la declaración de cabecera y añadir el título de la página, contenido en un tag "<title>". Dejamos así el código: <head> <title>Lista de la compra ordenada</title> </head>
  • Line 54, Column 8: end tag for element "HTMAL" which is not open. Cambiamos el tag que cierra el documento debe ser "</html>".

Con esto ya hemos arreglado los errores principales. Si nos fijamos en las alertas, todas están relacionadas con la declaración del documento o con la codificación de este. Para declarar que este documento está guardado con una codificación UTF-8 añadimos dentro del "<head>" lo siguiente: <meta http-equiv="content-type" content="text/html; charset=UTF-8">

Con estos cambios, el código completo queda así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Lista de la compra ordenada</title>
   </head>

   <body>
      <p>Lista de la compra ordenada</p>

      <ol><!--Puede tene varios tipos (1,2,3,4-a,b,c,d-I,II,III,IV)-->
         <li>Leche</li>
         <li>pan</li>
         <li>azucar</li>
         <li>sopa</li>
      </ol>

      <p>Lista de la compra ordenada</p>

      <ol type="I"><!--Puede tene varios tipos (1,2,3,4-a,b,c,d-I,II,III,IV)-->
         <li>Leche</li>
         <li>pan</li>
         <li>azucar</li>
         <li>sopa</li>
      </ol> 

      <p>Lista de la compra ordenada</p>

      <ol type="a"><!--Puede tene varios tipos (1,2,3,4-a,b,c,d-I,II,III,IV)-->
         <li>Leche</li>
         <li>pan</li>
         <li>azucar</li>
         <li>sopa</li>
      </ol>

      <p>Lista de la compra desordenada, con simbolos</p>

      <ul><!--Hay varios tipos de simbolos (square, disc, circle)-->
         <li>Leche</li>
         <li>pan</li>
         <li>azucar</li>
         <li>sopa</li>
      </ul>

      <p>Lista de la compra desordenada, con simbolos</p>

      <ul type="square"><!--Hay varios tipos de simbolos (square, disc, circle)-->
         <li>Leche</li>
         <li>pan</li>
         <li>azucar</li>
         <li>sopa</li>
      </ul>

      <p>Lista de la compra desordenada, con simbolos</p>

      <ul type="circle"><!--Hay varios tipos de simbolos (square, disc, circle)-->
         <li>Leche</li>
         <li>pan</li>
         <li>azucar</li>
         <li>sopa</li>
      </ul>
   </body>
</html>

Subimos nuestros cambios al servidor y regresamos al servicio de validación (http://validator.w3.org/). Con estos cambios nuestra web ya supera correctamente la validación, sin ningún error ni alerta. A modo de premio, cual galletita a un can que se porta bien, nos ofrecen la posibilidad de añadir un icono de validación en nuestra página web, insertando el siguiente código en la misma:

<p>
   <a href="http://validator.w3.org/check?uri=referer">
      <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88">
   </a>
</p>

Lo podemos añadir a nuestra web, ¡¡y ya estamos mostrando a todo el mundo que sabemos que hay que escribir código HTML correcto!!

Para ampliar conocimientos: http://www.w3schools.com/