HTML. Manual de Referencia
Esta es una versión preliminar del manual en un solo documento, está previsto añadir algunos ejemplos, definir mejor la estructura y corregir los posibles errores.
Encontrará la última versión del manual en el URL: http://www.ivia.es/htmlref/.
Última modificación: 24/05/1996
Contenidos
HTML 2.0
El HTML no es más que una aplicación del SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.
En realidad aún no existe un estándar del HTML en Internet, ya que existen tres revisiones o niveles de estandarización que aún no han sido aceptadas: la versión 1.0, que en realidad no existe como estándar ya que nunca se hizo una especificación formal, la 2.0, que es un estándar de hecho, aunque todavía está en la etapa de propuesta de estándar documentada en el RFC-1866 de noviembre de 1995. El siguiente nivel, el HTML 3.0, está en una etapa experimental, aunque muchos de los visores aceptan algunas de las extensiones propuestas.
En este apartado comentaremos la especificación del HTML 2.0 tal y como se describe en el RFC-1866. En el punto siguiente hablaremos de algunas de las propuestas de ampliación para el HTML 3.0 y algunas extensiones soportadas por algunos de los visores.
Generalidades
Antes de comenzar, comentaremos algo de la terminología necesaria para el resto de la descripción.
La definición del HTML en SGML incluida en el estándar resulta demasiado compleja para tratarla aquí, ya que es una descripción formal basada en la teoría de lenguajes. Nos limitaremos a una aproximación informal al lenguaje, aunque siguiendo el esquema empleado en el estándar.
Dividiremos la descripción del lenguaje en varias partes:
 | Descripción de los componentes léxicos del HTML.
Donde se indica el formato de los caracteres, marcas, nombres,
atributos y comentarios.
| Estructura de los documentos.
Hablaremos de las marcas empleadas para definir las partes del documento,
las estructuras de bloque y lista, las marcas de formato de párrafos
y algunas marcas especiales que no entran en las categorías
anteriores.
| Caracteres, palabras y párrafos.
Juegos de caracteres aceptados en el HTML y el marcado alternativo para que
el texto sea sólo ASCII de 7 bits, además de describir
cómo se tratan las palabras y los párrafos.
| Soporte de hipertexto. Además de las marcas de formato
necesitamos marcas para definir relaciones entre distintos documentos (e
incluso entre partes de un mismo documento). Para ello, el HTML
define una serie de marcas que denominaremos hiperenlaces.
Comentaremos su sintaxis y funcionamiento en detalle.
| Formularios. Nuevos en el HTML 2.0, permiten la
interacción del usuario y el servidor mediante la definición
de plantillas de formulario, que el usuario completa y envía al
servidor para su proceso. Según el propósito del formulario
el cliente recibirá algún tipo de respuesta.
| |
Componentes Léxicos
Comenzamos nuestra descripción del HTML definiendo los componentes léxicos del lenguaje, es decir, las distintas entidades o elementos que pueden emplearse en los documentos.
Caracteres
Cada documento escrito en HTML puede emplear un juego de caracteres distinto, como veremos más adelante. De cualquier modo, todas las marcas se pueden escribir usando el ISO-646, el mismo juego de caracteres aceptado por los lectores de correo.
Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque los espacios y tabuladores se reducen a un solo carácter cuando no están dentro de un bloque preformateado.
Para reducir los documentos a ASCII de 7 bits y representar los caracteres empleados para marcar el texto se definen dos mecanismos de referencia:
| Referencia por nombre: el carácter se representa con un
& seguido del nombre del carácter y un punto y coma,
por ejemplo & será el carácter
& y < el carácter <.
| Referencia numérica: en lugar de dar la referencia por
nombre se escribe # seguido del número de carácter
en el código de caracteres seleccionado, por ejemplo
& será el carácter & y el
< el carácter <.
| |
Aunque en algunos casos se puede omitir el punto y coma final, es recomendable ponerlo para evitar errores. De igual forma, el carácter & se representa a sí mismo si no va seguido de # o de una letra, aunque siempre es preferible usar el código por la misma razón que antes.
Marcas
Las marcas delimitan elementos de un documento como cabeceras, párrafos, etc. La mayoría de marcas constan de una marca inicial, que da el nombre y atributos del elemento, seguida del contenido y una marca final.
Las marcas iniciales se escriben entre los símbolos "<" y ">" (menor y mayor) y las finales entre "</" y ">" (menor barra y mayor). Por ejemplo, <H1>Contenido</H1>, indica que "Contenido" es una cabecera de nivel uno.
Algunos elementos sólo tienen una marca inicial (por ejemplo la marca <HR> que representa una línea horizontal) y otros, aunque disponen de ambas, se suelen expresar sólo con la inicial.
El contenido de un elemento es una secuencia de cadenas de caracteres y puede incluir elementos anidados, excepto en el caso de los anclajes, que no pueden incluir otros elementos (pero si estar incluidos en otros).
Nombres
Los nombres consisten en una letra seguida de letras, dígitos, puntos o guiones. Los ejemplos H1 y HR anteriores son ejemplos de nombres. La longitud de un nombre esta limitada a 72 caracteres en la definición del HTML. Los nombres de elementos y atributos no distinguen entre mayúsculas y minúsculas, pero los nombres de entidades (la representación alternativa de los caracteres) sí.
En las marcas, el nombre del elemento debe comenzar inmediatamente después del <.
Atributos
Cuando una marca inicial admite atributos, éstos se escriben a continuación del nombre del elemento. Generalmente los atributos tienen la forma nombre, signo igual, valor del atributo aunque en algunos casos basta con el nombre del atributo. Se pueden poner espacios en blanco antes y después del signo igual.
El valor de un atributo puede ser:
| Una cadena de caracteres entre comillas (simples o dobles) que no contenga
el símbolo de fin de marca ">".
| Un nombre como los definidos en el apartado anterior.
| |
La longitud del valor de un atributo no puede superar los 1024 caracteres.
Comentarios
Para incluir comentarios en HTML se emplea la declaración de comentarios. Una declaración de comentarios comienza con <!, le siguen uno o varios comentarios y termina con >. Cada comentario comienza con -- e incluye todo el texto hasta la siguiente aparición de -- . Dentro de una declaración de comentarios, se pueden poner espacios en blanco después de cada uno de ellos, pero no antes del primero. Toda la declaración del comentario se ignora.
Identificación del Nivel HTML de un Documento
Para identificar un documento como HTML que sigue el estándar 2.0, cada documento debe comenzar con la siguiente declaración:
| <!DOCTYPE HTML PUBLIC "-//ITEF//DTD HTML
2.0//EN"> |
Existen más identificadores que especifican otros detalles, por ejemplo si el documento contiene formularios. Este mecanismo también puede ser empleado por los visores para reconocer otros tipos de documentos.
Estructura de los Documentos
Los documentos en formato HTML son un conjunto de elementos anidados. En el nivel más alto nos encontramos el elemento HTML (marca inicial <HTML> y final </HTML>) que consta de dos partes: cabecera y cuerpo.
La cabecera se emplea para proporcionar información acerca del documento, mientras que el cuerpo contiene el texto de la página, es decir, la información que se va a presentar al usuario. En el cuerpo se pueden incluir todo tipo de elementos y marcas.
No es mala idea diseñarse una plantilla para desarrollar siempre a partir de ella. Además del esqueleto de la página (marcas de texto HTML, cabecera y cuerpo) podemos incluir en ella otras informaciones que siempre queramos que aparezcan (tanto comentarios como elementos del cuerpo o la cabecera). Prácticamente todos lo editores específicos permiten el uso de plantillas y macros para introducir información útil, como por ejemplo la fecha de la última modificación. La siguiente página puede ser un buen punto de partida:
|
<!DOCTYPE HTML PUBLIC "-//ITEF//DTD HTML 2.0//EN"> <!-- Comentario sobre el autor --> <HTML> <HEAD> <TITLE></TITLE> <!-- Datos adicionales --> </HEAD> <BODY> <!-- Datos cabecera pagina --> <HR> <HR> <!-- Datos pie de pagina --> </BODY> </HTML> |
Los datos adicionales dependerán del autor. La cabecera y pie pueden ser útiles para dar a todas las páginas el mismo aspecto, aunque dependerán de que la persona que escribe las páginas lo considere necesario.
Entraremos ahora en la descripción de los elementos que pueden aparecer en la cabecera y el cuerpo.
Cabecera
La cabecera es una colección de información acerca del documento. Las marcas de principio y fin son <HEAD> y </HEAD>.
La cabecera puede contener los siguientes datos, sin importar el orden en que aparezcan:
| Título (TITLE). Indica el nombre del documento, los
visores lo emplean generalmente como etiqueta de la ventana. Este campo es
el único obligatorio en la cabecera.
| Dirección de base (BASE). Proporciona una
dirección de base para interpretar los enlaces relativos cuando el
documento se lee fuera de su contexto (por ejemplo cuando está
guardado en un disco).
| El documento es un índice (ISINDEX). Si se pone la
palabra clave ISINDEX, el cliente interpretará que la
página es un índice y permitirá al usuario introducir
palabras clave para buscarlas.
| Enlaces relacionados (LINK). En la cabecera podemos incluir
varios enlaces relacionados con el documento como versiones anteriores,
dirección del autor, etc.
| Metainformación (META). Este campo sirve para
proporcionar información sobre el documento que no pueda ser
expresada en los campos anteriores. La información se escribe usando
pares nombre/valor que pueden ser empleados para dos propósitos:
|
Para la primera función se emplean atributos del tipo HTTP-EQUIV y para la segunda los del tipo NAME. En ambos casos, el valor se asigna en el campo CONTENT. Un ejemplo del primer caso sería:
Y del segundo:
El atributo NAME se refiere a nombres elegidos al azar por el usuario, mientras que HTTP-EQUIV significa que el valor tiene una cabecera equivalente real en el protocolo HTTP.
Siguiente Identificador (NEXTID). En la actualidad este
campo ya no se usa, lo empleaban los editores de HTML para asignar nombres
a documentos de forma automática.
| |
Cuerpo
Como ya hemos dicho, el cuerpo contiene el texto de la página que se va a presentar al usuario. Las marcas de principio y fin del cuerpo son <BODY> y </BODY> respectivamente.
A continuación describiremos los elementos que pueden aparecer en el cuerpo, clasificados por categorías.
Encabezados
Los encabezados se emplean para dividir los documentos en secciones, o más concretamente para marcar los títulos de esas secciones. Las marcas son del tipo <H#>Título</H#>, donde # puede ser un numero cualquiera entre 1 y 6.
Aunque el estándar no lo especifica, es recomendable usar los niveles en orden, es decir, después de un encabezado de nivel uno deberemos usar encabezados de nivel dos para las subsecciones y no saltar directamente al tres o al cuatro, por ejemplo.
La representación de los encabezados depende del visor, generalmente se representan en negrita y van cambiando de tamaño y espacios antes y después, de más a menos, en función del nivel (el nivel uno es el mayor).
Ejemplo:
|
<H1>Don Quijote de la Mancha</H1> <H2>Capítulo 1</H2> <P>En un lugar de la Mancha de cuyo nombre no quiero acordarme … |
Definición de Bloques
Para definir y separar bloques de texto se emplea una serie de marcas que definen párrafos, texto preformateado o bloques con un significado especial como direcciones o citas. También, y aunque no son propiamente para definir bloques, hablamos en este punto de dos marcas especiales, una para representar saltos de línea y otra que inserta una línea horizontal. Ambas permiten dividir el texto, por lo que las hemos incluido aquí.
Las marcas de bloque son:
| <P> para separar párrafos. Dado que para el
HTML todo el texto es continuo, necesitamos algún mecanismo
para indicar el principio y fin de un párrafo. Las marcas inicial y
final son <P> y </P>, aunque generalmente
sólo se emplea la inicial, terminando el mismo cuando encontramos
cualquier elemento que cause un salto de línea.
| <PRE> para texto preformateado. Esta marca se emplea para
texto escrito en tipo de letra de caja fija (mono-espaciada) y dentro del
bloque marcado los saltos de línea sí son respetados. Dentro
de estos elementos se pueden emplear anclajes y marcado tipográfico,
pero no elementos que definan formato de párrafo (como marcas de
párrafo, encabezados, etc.). | El elemento acepta el atributo opcional WIDTH, que indica el máximo número de caracteres por línea para que el visor ajuste el tamaño y tabulación del texto. Además de la marca PRE existen dos elementos muy similares a él: EXP (ejemplo) y LISTING (listado), que no permiten ningún tipo de elemento anidado. Dado que con PRE podemos obtener el mismo resultado, no es recomendable el uso de estas marcas. <ADDRESS>, empleada para indicar que un texto representa una
dirección o una firma. Generalmente se representa en cursiva y puede
estar tabulado.
| <BLOCKQUOTE>, que indica que un texto es una cita de otra
fuente. Se suele representar con tabulaciones a izquierda y derecha y en
cursiva. En sistemas que no permiten representar cursivas se puede emplear
algún tipo de símbolo al principio de las líneas, de
manera similar a lo que se hace en las réplicas o citas
(quote) del correo electrónico.
| <BR>. Este elemento sólo tiene marca inicial y se usa
para que el visor termine la línea en el punto en el que encuentre
el salto.
| <HR>. Al igual que la anterior, sólo consta de una
marca inicial. Se emplea para presentar una línea horizontal en el
texto, ya sea usando caracteres o un gráfico, dependiendo del
visor.
| |
Listas
En realidad, también son marcas que permiten definir bloques, pero con características especiales. Las listas se emplean para presentar de forma ordenada una serie de líneas.
En función de su carácter lógico se distinguen los siguientes tipos de lista:
| Lista desordenada, <UL> (Unordered List).
| Lista ordenada, <OL> (Ordered List).
| Directorio, <DIR> (Directory).
| Menú, <MENU> (Menu).
| Lista de definición, <DL> (Definition List).
| |
Exceptuando las listas de definición, el marcado de las líneas es igual en todos los casos: poniendo <LI> para marcar el principio de cada una, la línea termina cuando aparece un nuevo símbolo <LI> o se cierra la lista.
Para las listas de definición se emplean las marcas <DT> (Definition Term) y <DD> (Definition Data) para cada término y su correspondiente definición. Se pueden poner varios términos antes de una definición (marcas <DT>), pero no dos definiciones para un solo término.
Un ejemplo sería:
|
Esto es una lista desordenada: <UL> <LI>Primer elemento <LI>Segundo elemento </UL> Esto es una definición: <DL> <DT>Perro <DD>Animal al que el hombre tiene la fea costumbre de morder </DL> |
Marcado Lógico de Frases
Existen multitud de marcas para indicar que una palabra o frase tiene una connotación especial.
Los elementos son:
| <CITE>, indica que el texto es una cita (por ejemplo de un
título). Generalmente se representa en cursiva.
| <CODE>, lo marcado es un ejemplo de código dentro del
texto. Se representa usando un tipo de letra de caja fija.
| <EM>, denota énfasis. Generalmente se representa con
letra cursiva.
| <KBD>, indica que el texto se introduce desde el teclado. Se
representa usando un tipo de letra de caja fija.
| <SAMP>, ejemplo, es decir, una secuencia de caracteres
literales. Se representa usando un tipo de letra de caja fija.
| <STRONG>, denota énfasis fuerte. Generalmente en
negrita.
| <VAR>, lugar de una variable, por ejemplo la que se le pasa
a un programa. Se representa usando un tipo de letra de caja fija.
| |
Marcado Tipográfico de Frases
Se usan para indicar explícitamente el formato tipográfico de una palabra o frase.
Los formatos y sus marcas correspondientes son:
| Negrita, <B></B>
| Cursiva, <I></I>
| Texto de teletipo (tipo de letra de caja fija)
<TT></TT>
| |
Aunque no están en el estándar, algunos visores pueden soportar otras marcas de formato tipográfico como <STRIKE> (texto tachado) o <U> (subrayado).
Marcado de Anclaje de Hiperenlaces
Un caso especial de marcado es el representado por el elemento <A>, que se emplea para indicar que un texto hace referencia a otro, es decir, está anclado mediante un hiperenlace.
Para el marcado se emplean la marca inicial con atributos, el texto a anclar y la marca final. Los atributos pueden ser:
| HREF. El valor es el URI (Uniform Resource
Identifier) del anclaje principal de un hiperenlace. El URI
se puede referir a otro documento HTML, a un anclaje del mismo documento o
a cualquier otro tipo de recurso (FTP, Gopher, etc.).
| NAME. Nombra un anclaje para poder ser usado como anclaje
principal de un hiperenlace, es decir, el punto nombrado puede ser
referenciado desde otro anclaje que emplee el atributo HREF. Por
ejemplo, si en el documento test.html incluimos un anclaje
<A NAME="indice">Índice</A>,
dentro del mismo lo podremos referenciar mediante <A
HREF="#indice">Volver al índice</A>.
Si queremos referirnos a ese punto dentro del documento desde otro
documento que se encuentra en el mismo directorio, la referencia
será <A
HREF="test.html#indice">índice del
test</A>.
| TITLE. Sugiere un título para el recurso destino. Este
atributo es sólo informativo y puede ser usado para que se visualice
al colocarnos sobre el enlace o para nombrar recursos que no incluyen un
título, como gráficos.
| REL. relaciones descritas por el hiperenlace. El valor es una
lista de nombres de relaciones separadas por blancos.
| REV. Igual que REL pero en dirección contraria (si
A se relaciona con B por X, un enlace de A a B con REL="X"
expresa lo mismo que un enlace de B a A con REV="X").
| URN. Especifica un identificador para el primer anclaje del
hiperenlace. La sintaxis de los URN (Uniform Resource Namer) a_n no
está especificada.
| METHODS. Especifica métodos a usar para acceder al destino.
Se escriben como una lista de palabras separadas por espacios y dependen
del tipo de URI. Al igual que el elemento TITLE,
son sólo orientativos para el visor.
| |
Imágenes
Para incluir imágenes en documentos HTML se emplea la marca <IMG>. Esta marca puede tener los siguientes atributos:
| SRC. Indica la fuente de la imagen, en realidad se trata de un
enlace con el documento que contiene la imagen. En la práctica se
suelen emplear solo imágenes en formatos de mapa de bits como
gif o jpeg.
| ALT. Indica un nombre para referirnos a la imagen si ésta
no se representa. Generalmente lo emplean los visores de solo texto o los
visores gráficos cuando el usuario selecciona no cargar
automáticamente las imágenes. Es el nombre que aparece
habitualmente cuando interrumpimos la carga de una página o
ésta se corta dejando imágenes sin traer.
| ALIGN. Alineación de la imagen respecto al texto, puede
tomar los valores: TOP (arriba), MIDDLE (en medio) o
BOTTOM (abajo). En general, si no se especifica, los visores
asumen BOTTOM.
| ISMAP. Indica que la imagen es un mapa (lo veremos más
adelante)
| |
El único atributo imprescindible es el SRC (como es lógico, sin la imagen poca utilidad tiene la marca).
Una página con varias referencias a imágenes podría ser la siguiente:
|
<HTML> <HEAD> <TITLE>Página de prueba de imágenes</TITLE> </HEAD> <BODY> <IMG SRC="foto.gif" ALT="Foto" ALIGIN=MIDDLE> Este soy yo. <P>Selecciona lo que quieras de este mapa: <A HREF="/cgi-bin/imagemap/mapa"><IMG SRC="mapa.gif" ISMAP></A> </BODY> </HTML> |
Juegos de Caracteres de los Documentos
Como mínimo todos los visores deben soportar todos los caracteres gráficos del alfabeto latino definido en el ISO Latin-1 (ISO 8859-1), que permiten escribir textos en la mayoría de los idiomas occidentales.
De los caracteres de control, sólo están permitidos tres: tabulador, salto de línea y retorno de carro (códigos 9, 10 y 13 respectivamente).
Como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido dos mecanismos para representar los caracteres especiales usando solamente el ASCII de 7 bits: el uso de referencias numéricas y una tabla de nombres (mnemotécnicos) para algunos de ellos.
En la siguiente tabla damos los caracteres, su número y nombre:
| Caracter | Código | Descripción | Nombre| -- | � -  | Sin usar | -- | | 	 | Tabulador horizontal | -- |
| | Salto de línea | -- | -- |  -  | Sin usar | -- |
| | Retorno de Carro | -- | -- |  -  | Sin usar | -- | |   | Espacio | -- | ! | ! | Exclamación | -- | " | " | Dobles comillas | -- | # | # | Signo de número | -- | $ | $ | Dolar | -- | % | % | Tanto por ciento | -- | & | & | Ampersand | -- | ' | ' | Apóstrofe | -- | ( | ( | Paréntesis izquierdo | -- | ) | ) | Paréntesis derecho | -- | * | * | Asterisco | -- | + | + | Signo más | -- | , | , | Coma | -- | - | - | Guión | -- | . | . | Punto (fin de párrafo) | -- | / | / | Barra de división | -- | 0 - 9 | 0 - 9 | Dígitos del
al 0-9 | -- | : | : | Dos puntos | -- | ; | ; | Punto y coma | -- | < | < | Menor | -- | = | = | Igual | -- | > | > | Mayor | -- | ? | ? | Cerrar interrogación | -- | @ | @ | Arroba (en) | -- | A - Z | A - Z | Letras A-Z | -- | [ | [ | Abrir corchete (izquierdo) | -- | \ | \ | Barra de división inversa |
-- | ] | ] | Cerrar corchete (derecho) | -- | ^ | ^ | Circunflejo | -- | _ | _ | Subrayado | -- | ` | ` | Acento agudo | -- | a - z | a - z | Letras a-z |
-- | { | { | Abrir llave (derecha) | -- | | | | | Barra vertical | -- | } | } | Cerrar llave (izquierda) | -- | ~ | ~ | Tilde | -- | -- |  - Ÿ | Sin usar | -- | |   | Espacio sin
separación | nbsp * | ¡ | ¡ | Cerrar Exclamación | iexcl * | ¢ | ¢ | Centavo | cent * | £ | £ | Libra Esterlina | pound * | ¤ | ¤ | Signo de divisa general, General
currency sign | curren * | ¥ | ¥ | Yen | yen * | ¦ | ¦ | Barra vertical partida | brvbar * | § | § | Sección | sect * | ¨ | ¨ | Diéresis | uml * | © | © | Copyright | copy * | ª | ª | Género femenino | ordf * | « | « | Doble menor (abrir comillas
francesas o anguladas, angle quotation mark) | laquo * | ¬ | ¬ | No (símbolo
lógico) | not * | | ­ | Guión débil (soft
hyphen) | shy * | ® | ® | Registrado | reg * | ¯ | ¯ | Macrón | macr * | ° | ° | Grados | deg * | ± | ± | Más o menos | plusmn * | ² | ² | Dos superíndice | sup2 * | ³ | ³ | Tres superíndice | sup3 * | ´ | ´ | Acento agudo | acute * | µ | µ | Micro | micro * | ¶ | ¶ | Fin de parrafo | para * | · | · | Punto medio | middot * | ¸ | ¸ | Cedilla | cedil * | ¹ | ¹ | Uno superíndice | sup1 * | º | º | Género masculino | ordm * | » | » | Doble mayor (cerrar comillas
francesas o anguladas, angle quotation mark) | raquo * | ¼ | ¼ | Un cuarto | frac14 * | ½ | ½ | Mitad | frac12 * | ¾ | ¾ | Tres cuartos | frac34 * | ¿ | ¿ | Abrir interrogación | iquest
* | À | À | A mayúscula, acento
grave | Agrave | Á | Á | A mayúscula, acento
agudo | Aacute | Â | Â | A mayúscula, acento
circunflejo | Acirc | Ã | Ã | A mayúscula, tilde | Atilde | Ä | Ä | A mayúscula,
diéresis | Auml | Å | Å | A mayúscula, anillo | Aring | Æ | Æ | Diptongo AE mayúscula
(ligadura) | AElig | |
|---|