El pasado mes de julio salió el último borrador de la W3C para la futura especificación de XHTML 2. Si bien todavía puede faltar mucho para que se lance como estándar oficial (suponiendo que algún día lo sea) y en ese tiempo pueden decidir realizar cambios en el borrador, creo que merecen ser destacadas algunas de las propuestas que son de lo más interesantes.

Hipertexto

XHTML 2Hasta ahora los enlaces (links) de hipertexto han sido algo exclusivo del elemento a. Con la Modularización de XHTML se crearon módulos independientes para agrupar distintos elementos y sus atributos.

El módulo para el hipertexto define al elemento a y a sus atributos; XHTML 2 en cambio define al elemento a en su módulo de hipertexto pero sus atributos, son definidos en un módulo aparte (Módulo de atributos de hipertexto XHTML) que es agregado también al resto de elementos XHTML; esto quiere decir que XHTML 2 permite a cualquier elemento ser un hiperlink.

XHTML 2 otorga la misma función a cualquier elemento agregándoles la misma colección de atributos (el href entre ellos). A pesar de que el elemento a se vuelve totalmente innecesario, éste va a ser conservado como elemento explícito para el marcado de links; eso sí, perdiendo todo sentido semántico pasando a tener el mismo sentido semántico que el elemento span.

Listas

Hasta el momento HTML y XHTML ofrecían 3 tipos de listas:

  • Ordenadas (ol)
  • No ordenadas (ul)
  • De definición (dl)

XHTML 2

Amplía en 1 estos tipos de listas entrando en escena un elemento nuevo: el nl (navigation list) el  cual pretende definir un listado de elementos para la navegación, vamos, para el clásico listado de links que usamos habitualmente como menú o barra de navegación.

Cada elemento de la lista se define mediante un elemento li al igual que las listas ordenadas y no ordenadas. Sin embargo algo obligado que debe agregarse es un elemento label al inicio de cada lista de navegación que describa el contenido de la lista.


<nl>
	<label> Maestros del web </label>

	<li href=”principal.php”> Página principal </li>
  	<li><nl>
        <label> Editorial </label>
  		<li href=”editorial/”> Todos los editoriales </li>
  		<li href=”editorial/leido/”>Lo más leído </li>
  		<li href=”editorial/comentado/”> Lo más comentado </li>
  	</nl>
  	</li>
</nl>

Imágenes

XHTML 2 otorga a cualquier elemento la capacidad de ser una imagen clásica (img). Cualquier elemento puede en XHTML 2 tener un atributo src.

<p src=”imagen.gif”> Este texto <strong>sólo</strong> se mostrará en el caso de no ser 
cargada la imagen </p>

En el caso de que el recurso al que hace referencia el atributo src no se cargara por alguna razón (no se encuentra, el servidor no responde, o el navegador no soporta el formato de archivo o tiene las imágenes desactivadas) se procesaría entonces el elemento (en este caso el párrafo) con el aspecto presentacional que queramos usando hojas de estilo, algo que no podemos hacer actualmente con el texto alternativo (atributo alt) del elemento img.

El elemento img tiene una consecuencia similar al elemento a. A pesar de que ya no es estrictamente necesario el elemento img se mantiene con motivo de facilitar la transición hacia XHTML 2. Sin embargo no se mantiene como elemento vacío.

Tendrá su tag de cierre con un contenido que será mostrado en el caso de que el recurso al que hace referencia (la imagen) no se cargue por la razón que sea al igual que se comporta el elemento object.

<img src=”maestrosdelweb.gif”>Maestros del web </img>

Secciones

Entra en escena también un nuevo elemento para definir secciones dentro del documento. Hasta ahora veníamos definiendo las distintas secciones agrupando elementos dentro de elementos div. XHTML 2 integra un elemento estructural específico para tal fin: el elemento section.

Encabezados

Se mantienen los 6 niveles de encabezados (headings) que se vienen usando hasta ahora (h1, h2, h3 …) pero además XHTML 2 agrega un nuevo encabezado h para ser utilizado conjuntamente con el elemento section mencionado anteriormente y cuyo nivel es aplicado automáticamente dependiendo del nivel de anidamiento del elemento section dentro del cual se encuentre.

<body>
	<h>Maestros del web </h>
	<section>
		<h> Nuestro Editorial </h>
		<section>
			<h> Historia de ASP </h>
			<p> … contenidos </p>
		</section>
		<section>
				<h> Semblanza </h>
				<p> … contenidos </p>
		</section>
	</section>
	<section>
		<h> Notas de Actualidad </h>
		<section>
				<h> Nace grupo de flasheros peruanos y GarageFlash </h>
				<p> … contenidos </p>
		</section>
		<section>
				<h> Google compra Youtube </h>
				<p> … contenidos </p>
	</section>
	</section>
</body>

Separadores

Tradicionalmente venimos usando el elemento hr para separar distintas partes de un texto entre sí. El nombre de este elemento proviene de las iniciales de horizontal rule (regla horizontal).

Ahora se han percatado de que regla horizontal no es una denominación apropiada para este elemento puesto que ni necesariamente es horizontal (en texto vertical ésta es vertical) ni necesariamente es una regla (los libros a menudo utilizan otros métodos tipográficos tales como una línea de tres asteriscos para representar separadores).

Así que pretendiendo enfatizar su naturaleza estructural, para hacerlo más ampliamente usable y para que quede claro que esencialmente no tiene direccionalidad (vertical u horizontal) han decidido cambiarle el nombre a este elemento renombrándolo como separator.

Bloques de código

Hasta ahora venimos usando el elemento code para marcar un fragmento de código de computadora. XHTML 2 introduce el elemento blockcode para marcar un bloque de código (no sólo un fragmento).

Saltos de línea

El elemento br usado para ‘romper’ un texto en varias líneas desaparece para dar paso al elemento l. La idea es un elemento que dé estructura al texto que ha de ser partido en varias líneas.

Una de las ventajas que tendrá será el poder numerar las líneas  de forma automatica desde una hoja de estilos, algo muy útil para quienes escribimos líneas de código fuente.

Un ejemplo podría ser:

<blockcode>
			<l>function pepe(){</l>
			<l>    alert(‘¡Hola soy pepe!’)</l>
			<l>} </l>
</blockcode>

Y aplicar los siguientes estilos CSS:

l:before {
    counter-increment: linenumber;
    content: counter(linenumber);
}

Role

Entra en acción otro nuevo atributo cuyo rol es, precisamente, definir el rol de elementos que usemos en el documento; proveer información sobre el propósito de alguna parte de una página web: el atributo role.

Pretende añadir semántica a los elementos a los que se aplique definiendo el papel que está jugando en el contexto del documento. Por ejemplo un párrafo que contiene una nota podría ser marcado como <p role=”note”>.

Por supuesto el borrador incluye muchos más detalles dignos de mención pero, como primer acercamiento, estos que he mencionado son los que más me han llamado la atención.  El resto podría formar parte de un futuro artículo.