Si sabemos HTML podemos apoyar nuestros conocimientos con esta lista de diferencias con XHTML, que nos ayudarán a entender el lenguaje evolución de HTML.
Los que ya conocen HTML, habrán experimentado como XHTML es sólo una versión evolucionada de lo que ya sabían. Ahora el enfoque es distinto, porque XHTML es estrictamente semántico, lo que quiere decir que las etiquetas sólo expresan lo que significa cada contenido, si es un titular, un elemento de una lista, etc. Con base a ello se han eliminado todas las etiquetas y atributos que servían para definir la forma (estilo con el que se tenían que representar los contenidos en la página), que ahora deben indicarse siempre por separado mediante CSS.
Sin embargo, lo cierto es que el funcionamiento que ya conocíamos de HTML y la mayoría de sus principales etiquetas, siguen permaneciendo igual. Por ello, quien ya sabe HTML, con unos pocos cambios en sus costumbres de codificación, podrá comenzar a trabajar con XHTML sin demasiados problemas.
Con la intención de facilitar a los desarrolladores el paso de trabajar con HTML a empezar a modelar con XHTML, hemos creado este artículo en el que queremos listar las diferencias más básicas entre esos dos lenguajes.
XHTML semántico
XHTML trata de separar totalmente la forma del contenido, por ello ten en cuenta que en XHTML debes utilizar sólo las etiquetas y atributos que sirven para definir qué es cada cosa y no las que sirven para definir cómo se ha de ver cada cosa.
Documento básico XHTML
El documento básico HTML era un poco más simple y más maleable que el de XHTML. En XHTML estamos obligados a especificar cosas como el juego de caracteres, el DTD que estamos utilizando con el Doctype o un nuevo elemento BODY un poco más complejo. Para más información accede al artículo estructura del documento XHTML.Las etiquetas deben estar bien anidadas
Recuerda que existen reglas estrictas en XHTML para la anidación de etiquetas y que es obligatorio que se cierren antes las que se abrieron después. Es decir, no se puede alterar el orden de apertura y cierre de las etiquetas.
Correcto:
<strong><em>Hola</em></strong>
Incorrecto:
<em><strong>Hola</em></strong>
Todas las etiquetas se cierran
Todas las etiquetas deben tener su correspondiente etiqueta de cierre. Además se permite que aquellas etiquetas como BR o IMG, que no tienen cierre en HTML, se puedan cerrar con una barra al final de la apertura.
Correcto:
<img> </img> o bien <img/> o bien <img />
Incorrecto:
<br>
Todas las etiquetas y atributos van en minúscula
El lenguaje XML es sensible a mayúsculas y minúsculas, por ello para XML la etiqueta con las letras de su nombre o atributos en mayúsculas es distinta que las que van con ellas en minúsculas. Así pues, en XHTML se ha tomado la convención de escribirlo todo en minúsculas.No se puede escribir contenido en el BODY sin meterlo en ninguna etiqueta
Para que el documento XHTML esté bien formado, no se puede meter un texto directamente en el cuerpo de la página sin haberlo metido en alguna etiqueta previamente.
Correcto:
<body><div>texto</div></body>
Incorrecto:
<body>texto</body>
Todos los valores de los atributos deben ir entre comillas
Es indiferente usar comillas dobles o simples, pero estamos obligados a usarlas en los valores que asignamos a cualquier atributo de las etiquetas.Todos los atributos deben tener valor
No se puede minimizar atributos, es decir, todos deben tener un valor asignado. Un ejemplo de ello es el atributo "selected" de un elemento OPTION que se indicaba para decir que debe aparecer como seleccionado por defecto. Debemos siempre colocarlo asignándole algún valor.
Correcto:
<option selected="selected">loquesea</option>
Incorrecto:
<option selected>loquesea</option>>
No se deben insertar elementos block dentro de elementos inline
Los elementos de tipo "bloque", como P o DIV, son más generales que los elementos de tipo "en línea", como <strong> o <em>. Por ello no podemos colocar elementos tipo block dentro de otros menos generales como los inline.
Correcto:
<p>Pepe dijo: <em>Hola</em></p>
Incorrecto:
<em>Pepe dijo: <p>Hola</p></em>>
Los scripts y estilos deben colocarse en bloques CDATA
Debido a las características de XML, caracteres como "<" o "&", pueden ser interpretados como parte parte del propio etiquetado del documento XHTML y para evitar que esto ocurra se encapsulan los bloques de script o estilos. De tal modo, cuando se abre un bloque de script o de estilos CSS, para evitar casos de incompatibilidad, debemos colocar su contenido dentro de un bloque CDATA.
<script type="text/javascript">
<![CDATA[
//contenido del script sin que XML tenga que preocuparse por lo que haya dentro...
]]>
</script>
Conclusión
Con las anteriores reglas tendrás suficiente para comprobar que las diferencias entre HTML y XHTML son bastante sutiles. Algunas de ellas mínimas, pero no por ello menos importantes.El W3C recomienda el uso de XHTML, por lo que merece la pena ponerse las pilas para empezar a modelar tus páginas atendiendo a este lenguaje un poco más estricto que el HTML. Si quieres que tu página valide correctamente y respete los estándares, deberás tener en cuenta todas las anteriores reglas.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...