English version

Código XHTML


Se estudiarán paso a paso las reglas para escribir documentos XHTML (lenguaje de marcas hipertextual extensible), mientras se mostrará qué sintaxis HTML (lenguaje de marcas hipertextual) representan una violación del estándar XHTML. También daremos una idea de la procedencia de XHTML y de por qué se suscitó la necesidad para este cambio. Finalmente, aprenderás a escribir código XHTML y a revisar si tu código es válido (es decir, obedece al estándar).

Historia y origen

HTML nació en 1980 como un proyecto de Tim Berners-Lee basado en el concepto de hipertexto, que ayudaría a investigadores a compartir información en forma de documentos sobre Internet. Fue implementado más tarde en 1989 en la CERN (organización europea para la investigación nuclear), el nodo más grande en Europa. Desde allí, HTML comenzó su evolución que no está aún concluida, pasando por las versiones 2.0, 3.2, 4.0 y 4.01, todas ellas basadas en SGML (lenguaje de etiquetado estándar generalizado: un metalenguaje usado para crear otros lenguajes como sublenguajes del mismo).

Por otro lado, XML (lenguaje de marcas extensible) es también un metalenguaje (usado para crear otros lenguajes) y es también un sublenguaje de SGML, diseñado para ser más simple de procesar. En estos días, XML es ampliamente utilizado en diferentes formas para construir documentos y organizar información (por ejemplo, RSS (redifusión realmente simple), Atom, etc.) ya que provee una forma estándar de lograrlo que es más fácil de procesar que SGML.

En el año 2000, XHTML es recomendado por el World Wide Web Consortium (W3C) como la nueva versión estándar de HTML basada en XML en lugar de SGML. De esta forma, podemos considerar a XHTML como el resultado de mezclar HTML y XML. Hecho esto, todos los beneficios de XML son ahora heredados por HTML lo que lo hace más fácil de procesar, y por lo tanto estar disponible en más plataformas con capacidades de procesamiento reducidas (por ejemplo, PDAs (asistente digital personal) y teléfonos celulares).

Otro motivo para actualizar las versiones de HTML y para la creación del W3C es el reestablecimiento del propósito original de HTML como un lenguaje semántico. Desde que fue implementado, muchos fabricantes de navegadores comenzaron a transformar el estándar con el objeto de agregarle más funcionalidad. Esto lo convirtió lentamente en un lenguaje más visual que semántico, lo que inspiró al W3C a crear nuevos estándares pensados para revertir este efecto y retornarlo a su origen semántico. XHTML 1.1 es la más reciente de estas actualizaciones pero hay más por venir.

Creando un documento XHTML

Las reglas a seguir para crear un documento XHTML son simples. Al ser una adaptación de la versión 4.01 de HTML (basada en SGML) al formato XML (también basado en SGML), la mayoría de las características no han cambiado. Solamente unas pocas nuevas reglas fueron implementadas que harán al documento compatible con XML y algunos otros cambios pensados para transformar al lenguaje en uno semántico.

Declaración XML

La declaración XML es una simple línea y define la versión de XML y la codificación de caracteres que el documento utiliza. Debe ser declarada antes que cualquier cosa en el documento, incluso antes que la declaración de tipo del documento (tag HTML !DOCTYPE).

Comienzo del código<?xml version="1.0" encoding="UTF-8"?>
Fin del código
 

Declaración de tipo de documento (DTD)

La declaración del tipo de documento no es solamente utilizada por documentos XHTML, sino por cualquier tipo de documento. En todo caso deberías usar el DTD correcto a través del tag HTML !DOCTYPE. Los DTDs para documentos XHTML son cuatro y dependen de la versión que uses:

XHTML 1.0: Strict, Transitional y Frameset

Comienzo del código<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Fin del código
 

XHTML 1.1

Comienzo del código<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Fin del código
 

Declaración de nombre de espacio XML

La declaración de nombre de espacio XML es una simple URL (localizador uniforme de recursos) y puede ser definida como el valor del atributo "xmlns" para el tag html.

Comienzo del código<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="en">
</html>
Fin del código
 

Reglas generales de XHTML 1.0

Esta lista de reglas debe ser considerada como una lista de diferencias entre HTML y XHTML. Si nunca has escrito documentos HTML anteriormente, considera esta lista de recomendaciones mientras lees los tutoriales HTML y la referencia HTML. Encontrarás que en cada lugar posible de este sitio, estas recomendaciones están presentes.

  • Los tags no vacíos deben ser cerrados siempre. No hay cierre opcional en XHTML.
    • Válido: <p>Párrafo</p>
    • Inválido: <p>Párrafo
  • Los tag vacíos deben ser correctamente cerrados. Para lograr esto puedes usar un cierre normal o puedes cerrar el tag poniendo un espacio seguido de una barra al final del tag de apertura.
    • Válido: <img src="boton.jpg"></img><img src="boton.jpg" />
    • Inválido: <img src="boton.jpg">
  • Los nombres de tags y atributos deben ser escritos en minúsculas para adaptarse a la sensibilidad a mayúsculas/minúsculas de XML (con la excepción del tag HTML !DOCTYPE).
    • Válido: <a href="http://www.htmlquick.com/es/tutorials.html">Texto ancla</a>
    • Inválido: <A Href="http://www.htmlquick.com/es/tutorials.html">Texto ancla</A>
  • Los valores predefinidos de algunos atributos deben estar en minúsculas debido a la sensibilidad a mayúsculas/minúsculas de XML.
    • Válido: <input type="submit" />
    • Inválido: <input type="SUBMIT" />
  • Los valores de los atributos deben ser adecuadamente encerrados entre comillas (simples o dobles). Las comillas no son opcionales en XHTML.
    • Válido: <span id="id1" class='importante'>Texto</span>
    • Inválido: <span class=importante>Texto</span>
  • Los atributos booleanos no pueden ser abreviados (usando solo el nombre del atributo). Como valor debes especificar el nombre del atributo.
    • Válido: <button id="boton1" disabled="disabled">Ejecutar</button>
    • Inválido: <button id="boton1" disabled>Ejecutar</button>
  • Los elementos anidados deben obedecer correctamente su orden jerárquico.
    • Válido: <span class="doble"><b>Ejecutar</b></span>
    • Inválido: <span class="doble"><b>Ejecutar</span></b>
  • Los elementos de bloque no pueden ser declarados como contenido de los elementos de línea.
    • Válido: <div class="doble"><b>Ejecutar</b></div>
    • Inválido: <b><div class="doble">Ejecutar</div></b>
  • Algunos elementos específicos no pueden ser declarados como contenido de otros elementos específicos.
    • El elemento "a" no debe contener otros elementos "a".
    • El elemento "pre" no debe contener otros elementos "img", "object", "big", "small", "sub" o "sup".
    • El elemento "button" no debe contener otros elementos "input", "select", "textarea", "label", "button", "form", "fieldset", "iframe" o "isindex".
    • El elemento "label" no debe contener otros elementos "label".
    • El elemento "form" no debe contener otros elementos "form".
  • Todos los símbolos "&" deben ser escritos usando el nombre de entidad (&amp;), aún en URLs.
    • Válido: <a href="compraventa.php?id=1&amp;sub=2">Compra &amp; venta</a>
    • Inválido: <a href="compraventa.php?id=1&sub=2">Compra & venta</a>
  • Las referencias de entidad de caracteres son sensibilidad a cambios en mayúsculas/minúsculas de acuerdo a la regla de XML.
    • Válido: &#xE1; - &aacute; (para á)
    • Inválido: &#XE1; - &aAcuTe; (para á)
  • El atributo "alt" debe estar siempre presente en el tag HTML img.
    • Válido: <img src="pajaro.jpg" alt="Un pájaro volando"></img>
    • Inválido: <img src="pajaro.jpg"></img>
  • El texto comentado será completamente ignorado por un procesador XML, lo que significa que comentar scripts o códigos de estilo para "ocultarlos" de los navegadores antiguos será igual a borrarlos. Si el script o código de estilo contiene un carácter "&" ó "<", éstos serán procesados por el procesador XML. Para evitar este inconveniente puedes elegir entre declararlos en archivos externos o utilizar el bloque CDATA.
    • Válido:
      <style type="text/css">
      <![CDATA[
       p { color: blue; }
      ]]>
      </style>
    • Inválido:
      <style type="text/css">
      <!--
       p { color: blue; }
      -->
      </style>
  • El atributo "name" ha sido formalmente desaprobado para los elementos a, applet, form, frame, iframe, img, y map, y puede ser excluido en futuras versiones.

Reglas XHTML para DTDs estrictos

En adición a aquellas declaradas anteriormente, los documentos estrictos de XHTML (XHTML 1.0 Strict y XHTML 1.1) deben seguir estas reglas.

  • El texto no debe ser definido directamente en el cuerpo del documento (tag HTML body). En lugar de ello, insértalo dentro de un párrafo, de un bloque div o de algún otro elemento.
    • Válido: <body><p>Texto</p></body>
    • Inválido: <body>Texto</body>


Saltar opciones al pie Enviar a un amigo Enviar a un amigo