XHTML vs. HTML.- Sus Principales diferencias

baluart15 Mayo 2005 - 12:00am 5 comentarios
Enviar por Email Imprimir

Como bien sabemos XHTML (EXtensible HyperText Markup Language) es la nueva generación de HTML, algunos la llaman la versión limpia o estricta de HTML.

¿Por qué debemos utilizarlo? Pues porque es una de las recomendaciones de la W3C (XHTML 1.0 fue remendada por la W3C el 26 de Enero del 2000), ya que según la Corporación irá reemplazando gradualmente a HTML.

En este artículo dedicado a XHTML, les comentamos las pocas diferencias, a tener en cuenta, respecto a HTML 4.01...

Podemos resumir las principales diferencias en 4:

  • XHTML elementos deben ser correctamente anidado
  • XHTML documentos debe ser gramaticalmente correcto
  • Los nombres de etiqueta deben estar en la minúscula
  • Todos los elementos XHTML deben estar cerrados

Los elementos deben ser correctamente anidados

En HTML algunos elementos pueden ser incorrectamente anidados el uno dentro del otro de esta manera:

<b><i>Este texto esta en negrita y en itálica</b></i>

En XHTML todos los elementos deben ser correctamente anidados el uno dentro del otro de esta manera:

<b><i>Este texto esta en negrita y en itálica</i></b>

Ojo: Un error común en las listas anidadas, es el olvidar que la lista interior debe estar dentro de un elemento li, de esta manera:

<ul>
<li>Pintura</li>
<li>Literatura
<ul>
<li>Prosa</li>
<li>Poesía</li>
</ul>
<li>Música</li>
</ul>

Debe ser:

<ul>
<li>Pintura</li>
<li>Literatura
<ul>
<li>Prosa</li>
<li>Poesía</li>
</ul>
<li>Música</li>
</ul>

Observa que hemos insertado una etiqueta después de la primera etiqueta </ul>

Los documentos deben ser gramaticalmente correctos

Todos los elementos XHTML deben estar anidados dentro de la etiqueta del elemento de raíz. Todos los otros elementos pueden tener sub elementos. Estos deben estar en pares y correctamente anidados dentro de su elemento paternal. La estructura de documento básica es:

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

Los nombres de las etiquetas deben estar en minúsculas

Esto es porque los documentos XHTML son expresiones XML. Y XML es casesensitive. Las etiquetas como son interpretadas como etiquetas diferentes.

Esto estaría mal:

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

Esto es correcto:

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

Todos los elementos xhtml deben estar cerrados

Los elementos no vacíos deben tener una etiqueta final.

Esto estaría erróneo:

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

Lo correcto sería:

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

Los elementos vacíos también deben estar cerrados.

Los elementos vacíos deben o tienen una etiqueta de final o la etiqueta de principio debe terminarse con />.

Esto estaría mal:

Esto es un salto de línea <br>

Aquí colocamos una barra horizontal:<hr>
Esta es una imagen <img src="happy.gif" alt="Estoy feliz">

Debe ser:

Esto es un salto de línea <br /> 

Aquí colocamos una barra horizontal:<hr />

Esta es una imagen <img src="happy.gif" alt="Estoy feliz" />

Recuerda: Para hacer tu XHTML compatible con los navegadores de hoy, debes añadir un espacio suplementario antes del "/>" por ejemplo: <br />,  <hr />. 

Comentarios

Imagen de JoeUyuni
JoeUyuni

Esta muy claro. muchas gracias

Imagen de drackp2m
drackp2m

Me gusta, me gusta...

Imagen de Anonymous
Anonymous

No se entiende cuando dice:

Esto estaría mal:

Esto es un párrafo

Esto es correcto:

Esto es un párrafo

Pues ambos ejemplos son iguales ;)

Imagen de AMCeR

Enteindo la idea, pero son similares el ejemplo erroneo del que esta bien.

TODOS LOS ELEMENTOS XHTML DEBEN ESTAR CERRADOS:
Esto estaría erróneo:

Esto es un párrafo
Esto es otro párrafo

Lo correcto sería:

Esto es un párrafo
Esto es otro párrafo

gracais por el aporte, es interesante, mucho.

Imagen de Arwo
Arwo

Buen articulo.

Dejar comentario

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

Guacamole: Conexión a escritorio remoto desde el navegador
Guacamole es una aplicación web que te permite conectarte a un escritorio remoto mediante el navegador. La aplicación ha sido desarrollada utilizando HTML5 a fin de evitar la necesidad de instalar software o plugin... más