INTRODUCCIN A

XHTML

1. Principios de HTML y XHTML

Francisco Prez
ies_paco@yahoo.es
 CONTENIDO

1. Historia del HTML ...................................................................................................... 1

2. Diferencias entre HTML y XHTML ............................................................................. 2
3. Estructura bsica de un documento HTML ............................................................... 3
4. Estructura bsica de un documento XHTML ............................................................. 4
5. Caractersticas de HTML y XHTML ............................................................................ 5
5.1. Sintaxis .......................................................................................................................... 8
5.2. Elementos in-line y block .......................................................................................... 9
ANEXO DIRECTIVAS DOCTYPE ...................................................................................... 11
1. Principios de HTML y XHTML

1. Historia del HTML

El origen del HTML se remonta a 1980, cuando el fsico Tim Beners-Lee, trabajador del
CERN, propuso un nuevo sistema para compartir documentos en Internet. Este nuevo
sistema haca uso del hipertexto, una caracterstica desarrollada aos antes que
permita enlazar distintos documentos a travs de enlaces denominados hipervnculos.
El sistema propuesto por Berners-Lee fue bautizado como World Wide Web y el
lenguaje utilizado para crear los documentos pasara a ser HTML, acrnimo de
HyperText Markup Language.

En 1991 se public el primer borrador no-oficial de HTML bajo el nombre HTML Tags
donde se recogan las principales estructuras y etiquetas del HTML. En 1993 la
organizacin de estandarizacin de Internet IETF propuso convertir a HTML en un
estndar de Internet, sin xito. Ya en 1995, el IETF consigue organizar un grupo de
trabajo que publica el estndar HTML 2.0. A pesar de su nombre, HTML 2.0 es el
primer estndar oficial.

A partir de 1996, el organismo de estandarizacin World Wide Web Consortium (W3C)

asume el papel de administrar la estandarizacin del HTML. Bajo el paraguas del W3C
se publica la versin HTML 3.2 en 1997 y la versin HTML 4.0 en 1998, que sera
revisada en 1999 para dar a luz a la versin HTML 4.01.

En 2004, las empresas Apple, Mozilla y Opera se organizaron en una nueva asociacin
para impulsar la creacin de un nuevo estndar: HTML 5, que introduce cambios
significativos en el modelo de creacin de documentos HTML. En la actualidad, fruto
de este trabajo, el W3C tiene un borrador publicado con las especificaciones de HTML
5, aunque la mayora de navegadores an no lo soportan completamente.

Paralelamente al desarrollo de HTML, el W3C ha continuado con la estandarizacin de

XHTML, una versin de HTML basada en XML. La primera versin oficial fue publicada
en 1999 como XHTML 1.0 y es una versin de HTML 4.01 adaptada al lenguaje XML por
lo que mantiene casi todas sus etiquetas y caractersticas pero aade elementos XML y
algunas restricciones que facilitan la lectura y el diseo. La ltima versin oficial
publicada de XHTML es la 1.1 (ao 2002) y est disponible el borrador de la 2.0 que
aade numerosos cambios y mejoras. Se espera en un futuro, una integracin entre
XHTML y HTML 5.

1
1. Principios de HTML y XHTML

2. Diferencias entre HTML y XHTML

XHTML es un lenguaje que recoge las caractersticas de HTML 4.01 y aade algunos
elementos y restricciones de XML que mejoran la estructura de los documentos. En la
actualidad, la mayora de diseadores han optado por XHTML como lenguaje de
creacin de pginas. Es difcil predecir qu ocurrir con la entrada de HTML 5 pero
todo apunta a una coexistencia de las sintaxis de HTML y XHTML dentro de HTML 5.
Una caracterstica esencial que diferencia a HTML de XHTML es la separacin de
contenidos y presentacin:

En HTML coexisten en el mismo documento: el contenido, la informacin sobre

el aspecto visual que tendr el documento y pequeos programas escritos en
lenguajes script que aaden posibilidad de interaccin usuario-pgina. Esto
hace que la revisin y modificacin de los documentos HTML sea tediosa y
propensa a los errores. Adems, la gestin de los contenidos, la del aspecto y la
de los scripts suele estar asignada a distintos desarrolladores lo que complica
an ms el trabajo de creacin y mantenimiento.

En XHTML se lleva a cabo una separacin de contenido y forma de presentacin

de manera que el contenido se almacena en un documento XHTML y la
presentacin se almacena en otro documento escrito con el lenguaje de
presentacin CSS (Cascading Style Sheet). De este modo, los documentos
creados son ms fciles de crear y mantener y adems son ms flexibles puesto
que se adaptan mejor a las diferentes plataformas (pantallas de ordenador,
dispositivos mviles, impresoras y dispositivos especficos para discapacitados).
Incluso es posible modificar completamente la presentacin sin necesidad de
realizar cambios en el contenido, con slo reemplazar el documento CSS por
otro con estilos distintos.

2
1. Principios de HTML y XHTML

3. Estructura bsica de un documento HTML

HTML y XHTML son lenguajes que permiten etiquetar la informacin de un documento
para darle una estructura y presentarla al usuario. Una pgina web est formada por
cientos o miles de etiquetas. La principal ventaja de los lenguajes de etiquetas es que
son muy sencillos de leer y escribir. Por el contrario, el uso de etiquetas aporta la
desventaja de aumentar el tamao del documento.

La estructura bsica de un documento HTML es la siguiente:

Para crear y ver este documento como una pgina web debes abrir un editor de texto
plano (como el Bloc de Notas de Windows o el gedit de Ubuntu) y copiar el cdigo
fuente de la imagen. Guarda el archivo con el nombre que quieras pero con extensin
.htm (generalmente, la pgina principal de un sitio web recibe el nombre de
index.htm). Una vez hecho esto puedes abrir el documento con un navegador web.

En la primera lnea del documento hemos introducido la directiva DOCTYPE que

especifica el tipo de lenguaje y la versin utilizada. En este caso se trata de un
documento escrito en HTML versin 4.01. En el ltimo apartado de este documento
han quedado recogidas las directivas DOCTYPE que han de utilizarse para trabajar con
cada una de las distintas versiones de (X)HTML.

Una vez visto el significado de la directiva DOCTYPE, si continuamos el anlisis del

cdigo de la pgina 4, la siguiente etiqueta que nos encontramos es <html>, que indica
que comienza el cdigo HTML del documento. Esta etiqueta delimita todo el contenido
del documento y por eso tiene una etiqueta correspondiente de cierre, marcada como
</html> al final del documento.

Cualquier documento HTML consta de dos grandes secciones: la cabecera y el cuerpo

de la pgina. La cabecera se delimita con las etiquetas <head> y </head> y es la zona
del documento en la que insertaremos informacin sobre la propia pgina para que
sea procesada por el navegador y por los buscadores de Internet. La informacin que
se introduce en la cabecera no se muestra en el navegador, nicamente se utiliza
para mostrar la pgina correctamente, clasificarla en los buscadores, determinar el
idioma o el tipo de contenido de la misma, etc. Por ejemplo, la etiqueta <meta> est
especificando que la pgina est escrita usando caracteres de Europa occidental (ISO-
8859-1) entre los que se encuentran la y las vocales acentuadas.

3
1. Principios de HTML y XHTML

La otra seccin de un documento HTML es el cuerpo, delimitado con las etiquetas

<body> y </body>. Cualquier elemento que introduzcamos en esta seccin se muestra
en la ventana del navegador. En el ejemplo se muestra un mensaje de bienvenida
encerrado entre <h1> y </h1> que es la etiqueta utilizada para mostrar texto de un
encabezamiento o titular, ms grande que el texto normal y en negrita.

4. Estructura bsica de un documento XHTML

Ya hemos visto que una de las diferencias entre HTML y XHTML es que ste ltimo
utiliza notacin XML e impone algunas restricciones gramaticales. El documento
anterior, escrito en XHTML, tendra el siguiente cdigo fuente:

Como puede verse, las diferencias son mnimas. En este caso la directiva DOCTYPE
hace referencia a la versin XHTML 1.1.

La creacin de un documento XHTML impone las siguientes restricciones adicionales:

Cualquier documento XHTML debe incluir una declaracin de documento

XML que debe estar en la primera lnea del documento (excepto en la
variante basic, donde se relaja esta restriccin). Esta marca tambin es
conocida como etiqueta de prlogo XML:

<?xml version="1.0" encoding="UTF-8"?>

4
1. Principios de HTML y XHTML

Cualquier documento XHTML debe incluir, adems de la etiqueta de

prlogo y la declaracin de DOCTYPE correspondiente, un atributo xmlns en
la etiqueta html y una especificacin del idioma en el que estn redactados
los contenidos de la pgina:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

La variante basic de XHTML incluye el conjunto mnimo de etiquetas y

estructuras que conforman un documento XHTML junto con imgenes,
formularios y soporte bsico para tablas. Esto lo convierte en un estndar
adecuado para clientes web mviles como smartphones y tablets.

XHTML puede coexistir con otros lenguajes como MathML o SVG por lo que
tambin existen declaraciones DOCTYPE para este tipo de combinaciones.

5. Caractersticas de HTML y XHTML

La versin 4.01 de HTML define 93 etiquetas que los diseadores web pueden utilizar
para marcar los elementos que componen una pgina web:

<!-- -->,<!DOCTYPE>,a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big,
blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir,
div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html,
i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes,
noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span,
strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul,
var.

De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se

deben utilizar:

applet, basefont, center, dir, font, isindex, menu, s, strike, u.

Por su parte, la version 5 de (X)HTML define las siguientes etiquetas:

<!-- -->, <!DOCTYPE>, a, abbr, acronym, address, applet, area, article, aside, audio, b,
base, basefont, bdi, bdo, big, blockquote, body, br, button, canvas, caption, center,
cite, code, col, colgroup, command, datalist, dd, del, details, dfn, dialog, dir, div, dl, dt,
em, embed, fieldset, figcaption, figure, font, footer, form, frame, frameset, head,
header, h1-h6, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link,
map, mark, menu, meta, meter, nav, noframes, noscript, object, ol, optgroup, option,
output, p, param, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small,
source, span, strike, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot,
th, thead, time, title, tr, track, tt, u, ul, var, video, wbr.

5
1. Principios de HTML y XHTML

A pesar de que se trata de un nmero de etiquetas muy grande, no es suficiente para

crear pginas complejas. Algunos elementos como las imgenes y los enlaces
requieren cierta informacin adicional para estar completamente definidos.

La etiqueta <img>, por ejemplo, se emplea para incluir una imagen en una pgina.
Utilizando slo la etiqueta <img> no es posible establecer la ubicacin del fichero que
contiene la imagen. Por ello es necesario agregar informacin adicional a la etiqueta.
Esta informacin adicional recibe el nombre de atributo. Por ejemplo, para la etiqueta
<img> es posible especificar atributos que indican la ubicacin del fichero con la
imagen (src), el ancho (width) y el alto (height) de la imagen a mostrar:

<img src=mifoto.jpg width=300 height=250 />

Aunque cada etiqueta suele tener un conjunto de atributos especfico, existe un

conjunto de atributos, conocidos como atributos globales, que pueden aplicarse a
cualquier etiqueta. Son los siguientes:

Atributo Descripcin
accesskey Permite especificar una tecla rpida para
activar el foco sobre un elemento
class Se utiliza para aplicar un estilo a una
etiqueta. Veremos su utilizacin en la
unidad 3.
contenteditable Es un atributo nuevo en (X)HTML5.
Permite especificar si el contenido de un
elemento es editable.
contextmenu Es un atributo nuevo en (X)HTML5.
Especifica un men contextual para un
elemento. El men aparece al hacer clic
derecho sobre el elmento.
data-<nombre> Se utiliza al programar aplicaciones web
para almacenar datos privados de la
pgina o de la aplicacin, por ejemplo,
informacin de validacin del control.
dir Especifica la direccin del texto.

6
1. Principios de HTML y XHTML

draggable Es un atributo nuevo en (X)HTML5.

Especifica si un elemento permite realizar
operaciones de arrastre (Drag & Drop).
dropzone Es un atributo nuevo en (X)HTML5. En
una operacin drop (Drag & Drop),
especifica si los datos arrastrados se
copian, mueven o enlazan.
hidden Es un atributo nuevo en (X)HTML5.
Especifica que la etiqueta ya no es
relevante.
id Especifica un identificador nico para la
etiqueta que puede utilizarse para
diversos fines: programar aplicaciones
web, establecer estilos CSS, etc.
lang Especifica el idioma de la informacin
contenida en la etiqueta.
spellcheck Es un atributo nuevo en (X)HTML5.
Especifica que se debe habilitar (si est
disponible) la comprobacin sintctica y
gramatical para el contenido de una
etiqueta.
style Especifica un estilo CSS en lnea
tabindex Especifica el orden de tabulacin para los
elementos de la pgina.
title Especifica informacin adicional para una
etiqueta.
translate Es un atributo nuevo en (X)HTML5. Indica
si el contenido de la etiqueta debe
traducirse o no.

7
1. Principios de HTML y XHTML

5.1. Sintaxis

El lenguaje HTML es muy permisivo en su sintaxis por lo que es posible escribir sus
etiquetas y atributos de muchas formas diferentes. Las etiquetas y atributos pueden
escribirse en maysculas o minsculas (o ambas) y los valores de los atributos se
pueden indicar con o sin dobles comillas (). Adems, algunas etiquetas de apertura
tienen su correspondiente etiqueta de cierre y otras no. Esta libertad en la forma de
escribir el cdigo puede parecer un aspecto positivo pero el resultado final son pginas
con un cdigo HTML desordenado, difcil de mantener y muy poco profesional. XHTML
trata de paliar estos problemas aadiendo ciertas restricciones en la forma de escribir
las etiquetas y atributos.

A continuacin se muestran las reglas sintcticas y gramaticales ms importantes al

trabajar con HTML y XHTML:

En HTML no hay restricciones sobre el uso de maysculas y minsculas al

escribir las etiquetas; de hecho, era frecuente escribirlas en maysculas. En
XHTML todas las etiquetas deben escribirse en minsculas.

En HTML slo es obligatorio utilizar etiquetas de cierre en los elementos que

contenan texto. En XHTML todas las etiquetas deben cerrarse, incluso las que
no contienen texto (como <br/>).

En HTML no se exige que el valor de los atributos vaya entre dobles comillas ().
En XHTML s existe este requerimiento.

En HTML se aceptan atributos sin valor. En XHTML es obligatorio que todo

atributo tenga un valor.

Cuando aparecen mltiples espacios seguidos, el navegador slo muestra un

espacio. Si se quieren mostrar mltiples espacios debe utilizarse el carcter
especial &nbsp;

Aunque se introduzcan saltos de lnea en el cdigo fuente, stos no se

muestran en el navegador. Para mostrar saltos de lnea es necesario utilizar
etiquetas especficas (como <br/> o <p>).

Existen otras restricciones impuestas por XHTML que veremos al abordar los lenguajes
de script.

El W3C dispone de herramientas especficas para validar cada uno de los estndares
que gestiona. Existe un validador de documentos web en http://validator.w3.org/
que permite verificar que un documento cumple con una versin especfica de
(X)HTML.

8
1. Principios de HTML y XHTML

5.2. Elementos in-line y block

(X)HTML clasifica a todos los elementos en dos grupos: elementos inline (elementos en
lnea) y elementos block (elementos de bloque). La diferencia entre los dos elementos
es la forma en la que ocupan el espacio disponible en la pgina.

Los elementos de bloque siempre empiezan en una nueva lnea y ocupan todo
el espacio disponible hasta el final de la lnea (incluso si el contenido del
elemento no llega hasta el final de la lnea).
Los elementos en lnea slo ocupan el espacio necesario para mostrar sus
contenidos.
Por ejemplo, con el siguiente cdigo fuente:

se genera la siguiente pgina web (se han recuadrado los elementos para ver
claramente el espacio que ocupan en la pgina):

9
1. Principios de HTML y XHTML

El primer prrafo contiene un texto corto que slo llega hasta la mitad de la ventana;
sin embargo, como el prrafo es un elemento de bloque, vemos que ocupa la totalidad
de la lnea.

Por otra parte, el enlace de la segunda lnea es un elemento inline. En este caso
tambin tiene un texto corto que slo llega hasta la mitad de la ventana pero en este
caso no ocupa la totalidad de la lnea sino nicamente el espacio necesario para
mostrar el texto.

Por ltimo, el segundo prrafo sigue ocupando todo el espacio disponible hasta el final
de cada lnea (por ser un elemento de bloque) y el enlace que se encuentra dentro del
prrafo slo ocupa el sitio necesario para mostrar sus contenidos (por ser un elemento
en lnea).

La mayora de elementos de bloque pueden contener en su interior elementos en lnea

y otros elementos de bloque. Los elementos en lnea slo pueden contener texto u
otros elementos en lnea.

Los siguientes son elementos en lnea:

a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd,
label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Los elementos de bloque son:

address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex,
menu, noframes, nos-cript, ol, p, pre, table, ul, dd, dt, frame-set, li, tbody, td, tfoot, th,
thead, tr.

Los siguientes elementos pueden ser en lnea y de bloque segn el contexto:

button, del, iframe, ins, map, object, script.

10
1. Principios de HTML y XHTML

ANEXO DIRECTIVAS DOCTYPE

Cualquier documento (X)HTML debe contener un directiva DOCTYPE que especifique el
lenguaje de marcas, la versin utilizada y el DTD para verificar el documento. Para cada
versin de (X)HTML existen algunas variantes de esta directiva (Strict, Transitional y
Frameset principalmente). Estas variantes corresponden a una misma versin, pero
tienen pequeas diferencias:

Las variantes "Frameset" son usadas para pginas con marcos. La utilizacin de
frames est desaconsejada y su uso en la actualidad es muy poco frecuente.

Las variantes Transitional se utilizan cuando se est realizando la migracin

desde una versin antigua a una ms moderna. Por ello, permiten incluir
algunas etiquetas y atributos disponibles en la versin anterior (para
proporcionar compatibilidad hacia atrs) y tambin admiten el conjunto de
etiquetas de la versin nueva.

Las variantes Strict se ajustan de manera estricta a las etiquetas

estandarizadas para una versin. No se permiten etiquetas ni atributos de
versiones anteriores.

A continuacin se incluye una lista de declaraciones DOCTYPE para utilizar en

documentos (X)HTML. Se recomienda utilizar siempre se que sea posible (X)HTML 5:

HTML 2.0
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.01: Frameset, Transitional y Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

11
1. Principios de HTML y XHTML

XHTML 1.0: Frameset, Transitional y Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1: Estndar y Basic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

(X)HTML 5
<!DOCTYPE html>

12