Comunidad de diseño web y desarrollo en internet online

Tutorial básico de XHTML

XHTML es una reformulación del HTML 4.01 aplicandole XML que se ha convertido en un estándar aprobado por el W3C desde el 26 de enero del 2000. La principal razón de su uso es la creación de código limpio, separando el contenido del diseño, además dado que está basado en XML, es posible su lectura e interpretación en cualquier dispositivo móvil que soporte XML. Anteriormente Pedro, nos dió una introducción breve a lo que es XHTML.

¿Qué es exactamente XHTML?

  • Es un reemplazo del HTML tradicional
  • Es una versión más estricta y limpia del HTML
  • Se define como una aplicación XML
  • Es una recomendación del W3C

Reglas básicas del XHTML

Al ser una recomendación y un estándar, es necesario observar que nuestros documentos XHTML deben respetar ciertas reglas básicas :

1. Todos los elementos deben estar debidamente jerarquizados

Cuando estamos escribiendo nuestros documentos es muy común que erroneamente encerremos elementos de forma inadecuada, por ejemplo:

<p><i>El <b>Veloz murcielago hindú</b> comía feliz cardillo y caña</p></i>

En este ejemplo, hemos cerrado la etiqueta de párrafo antes de lo debido, en algunos navegadores esto pasará desapercibido, sin embargo la forma correcta es la siguiente:

<p><i>El <b>Veloz murcielago hindú</b> comía feliz cardillo y caña</i></p>

2. Todo documento debe estar bien formado

Lo cual quiere decir que todos nuestros documentos deben tener al menos la siguiente estructura:

<html>
<head> ... </head>
<body> ... </body>
</html>

3. Los nombres de las etiquetas deber estar en mínusculas

Al ser XHTML una aplicación XML, está hace diferencia entre mayúsculas y minúsculas, por lo que <BODY> y <body> son dos cosas muy diferentes

4. Todas las etiquetas deben cerrarse

En versiones anteriores del HTML era posible dejar etiquetas sin cerrar, incluso yo alcancé a leer algunos libros donde el mismo autor te decía que no era necesario cerrar tal o cual etiqueta, en XHTML es obligatorio que todas las etiquetas sean cerradas, por lo que:

<p>Esto es un párrafo

Es incorrecto, en su lugar debe ser:

<p>Esto es un párrafo</p>

El cual tiene su etiqueta de cierre correspondiente. en los casos donde las etiquetas son unarias como <br>, <hr>, <img> y otras, el cierre se da dentro de ella misma, terminando la etiqueta con />, por ejemplo:

Este texto hace un <br /><b>Salto de Línea</b> y después pone una línea abajo <br /><hr />

5. Los nombres de los atributos deben ir en minúsculas

Por lo antes mencionado en el punto 3, todos los nombres de atributos para una etiqueta deben ir en minúsculas, por ejemplo:

<img SRC="imagen.gif"> es inválido, en su lugar <img src="imagen.gif" /> sería lo correcto

6. Los valores de los atributos deben ir entre comillas

Esto para evitar confusiones, por ejemplo:

<div align=center> es incorrecto, en su lugar use <div align="center">

7. El atributo id reemplaza al atributo name

En XHTML el atributo name está descontinuado, en su lugar use el atributo id:

<input type="text" id="txt_nombre" size="25" />

Sólo en casos de compatibilidad con navegadores antiguos debe usarse el atributo name, si estamos usando XHTML transicional, el atributo name es permitido.

El DOCTYPE

Todos los documentos XHTML válidos deben llevar un elemento llamado DOCTYPE, el cual no es parte del documento en sí, sino que define el tipo de DTD (Document Type Definition o Definición de tipo de documento) a emplear en nuestros documentos, es obligatorio y puede ser uno de estos tres:

  • XHTML 1.0 Strict: Se usa cuando se desea utilizar al 100% XHTML, su nombre lo dice bien claro, es XHTML estricto, la declaración del mismo es como sigue: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • HTML 1.0 Transitional: Es el más usado ya que permite manejar elementos de XHTML y HTML 4.01, además de que se debe usar cuando nuestro navegador no soporta correctamente CSS(¿No les recuerda a una E azul?), su declaración es la que sigue:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • XHTML 1.0 Frameset: Se debe usar cuando se manejan frames, su declaración es la siguiente: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Conclusión

Como desarrolladores y diseñadores web debemos siempre apegarnos a las normas y estándares internacionales ya que con esto no sólo logramos que nuestras aplicaciones sean 100% compatibles, sino que nos hacemos más profesionales, espero que este breve minitutorial les haya servido de ayuda

Enlaces de Intéres

Tutorial de XHTML de la W3Schools.

Referencia del XHTML

Validador XHTML de la W3C

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate