Curso Básico de XHTML. I

INTRODUCCIÓN

XHTML (eXtensible Hyper Text Markup Language) es el lenguaje de marcas creado para sustituir al lenguaje HTML (Hyper Text Markup Language). Se podría decir que el XHTML es la versión XML de HTML, ya que tiene básicamente las mismas funcionalidades, cumpliendo las especificaciones más estrictas de XML.

Su objetivo es avanzar en el proyecto del W3C (World Wide Web Consortium), de lograr páginas web donde la información y la forma de presentarla estén claramente separadas. XHTML es, por lo tanto, un lenguaje semántico, que quiere decir que no definimos el aspecto de las cosas sino lo que significan.

Esta característica se aprecia claramente en su estructuración semántica, ya que XHTML sirve únicamente para transmitir la información que contiene un documento, dejando el aspecto y el diseño para las hojas de estilo (CSS), y la interactividad y funcionalidad para JavaScript, por ejemplo.

Como ya hemos comentado, la diferencia entre ambos lenguajes es principalmente un cambio en el concepto y forma de la estructuración del documento. Se busca una sintaxis coherente dentro del documento, donde los distintos elementos deben estar correctamente anidados, todas las etiquetas en minúsculas, los elementos cerrados correctamente, los valores de los atributos entrecomillados, etc. De esta forma, se evita la anarquía existente en muchos códigos web.

Los programadores que ya conocen el lenguaje HTML no encontrarán dificultad para escribir código XHTML.

El lenguaje XHTML se basa en el uso de etiquetas, también llamadas marcas, directivas o comandos (tags). Estas etiquetas son fragmentos de texto delimitados por los símbolos menor que (<) y mayor que (>). Básicamente, estas etiquetas indican al navegador la forma de representar los elementos (texto, gráficos, etc.) que contiene el documento.

Existe normalmente una etiqueta de inicio <etiqueta> y otra de final </etiqueta>, si bien algunos comandos sólo disponen de la de inicio, como es el caso del salto de línea <br /> o imagen <img />.

La mayoría de las etiquetas se complementan con los llamados atributos, elementos que permiten establecer valores o propiedades de la misma.

REGLAS DEL XHTML A TENER EN CUENTA

1.- Un documento XHTML no puede tener etiquetas abiertas. Un <p> debe cerrarse con un </p>, un <li> debe cerrarse con un </li>, y así todos los elementos.

Las etiquetas que definen un elemento de forma independiente deben cerrarse a sí mismas añadiendo una barra al final de la misma. Hay que dejar un espacio en blanco entre el nombre de la etiqueta y la barra / para que los navegadores antiguos mantengan la compatibilidad con XHTML. <img />, <hr />, <br />, <link />, etc.

Sintaxis incorrecta

<p>El pastor tiene el rebaño a la sombra

Sintaxis correcta

<p>El pastor tiene el rebaño a la sombra</p>

2.- Los elementos en un documento XHTML deben estar anidados de forma lógica, por lo tanto, deben cerrarse en el orden inverso al que fueron abiertos. Por ejemplo, <p><strong> debe cerrarse en la orden </strong></p>.

Sintaxis incorrecta

<p>El <strong>pastor tiene el rebaño a la sombra</p></strong>

Sintaxis correcta

<p>El <strong>pastor tiene el rebaño a la sombra</strong></p>

3.- Todas las etiquetas y sus atributos deben escribirse siempre en minúsculas. No ocurre lo mismo con el valor del atributo que sí puede contener mayúsculas.

Sintaxis incorrecta

<SPAN>Bienvenidos al XHTML</span>

Sintaxis correcta

<span>Bienvenidos al XHTML</span>

4.- Todos los valores de los atributos de las etiquetas deben estar SIEMPRE entrecomillados.

Sintaxis incorrecta

<table width=100% border=2 cellspacing=2 cellpadding=5>

Sintaxis correcta

<table width="100%" border="2" cellspacing="2" cellpadding="5">

5.- El primer elemento del documento siempre será <html> y deberemos colocar el <head> y <body> en su orden correcto sin olvidar de cerrarlos al final del documento. El uso del elemento <title> es de carácter obligado y se tendrá que poner justo después de <head>.

<html>
<head>
<title>Mi documento</title>
</head>
<body>
.......
</body>
</html>

6.- El atributo id reemplaza al atributo name. Sólo en casos de compatibilidad con navegadores antiguos está permitido el empleo del atributo name usando XHTML transicional.

Sintaxis incorrecta

<input type="text" name="intro_nombre" size="30" />

Sintaxis correcta

<input type="text" id="intro_nombre" size="30" />

7.- XHTML es un lenguaje semántico, por lo tanto, cuando desarrollemos un documento hay que pensar en la organización y estructuración del mismo más que en su maquetación. Se deberán de utilizar las etiquetas de acuerdo al fin para el que fueron pensadas, por lo tanto, es recomendable usar para un título la etiqueta <h1> en vez de un <span> con una clase asociada.

Recordemos que la mayoría de etiquetas disponen de atributos adicionales que aportan información adicional sobre el elemento, como por ejemplo el atributo alt de la etiqueta <img />.

Las etiquetas mal escritas o desconocidas para un navegador son ignoradas. Sin embargo, los errores de sintaxis, como por ejemplo olvidar delimitar una etiqueta, pueden provocar errores en la validación y visualización del documento.

Extracto de mi libro «Guía XHTML, JavaScript y CSS. Ed. Ra-Ma. © 2011

Deja una respuesta

Tu dirección de correo electrónico no será publicada.