Publicidad - Hosting barato en MasBaratoImposible.com - 2000 MB, 25 GB, 1,95 euros/mes
hosting barato

7 La estructura global de un documento HTML

Nota: Este documento es parte de una traducción al castellano de la Recomendación del W3C "HTML 4.01 Specification" (más información). Puede consultar la versión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozo@conclase.net. Gracias por su colaboración.

Véase el Aviso de copyright de la traducción.

Contenidos

  1. Introducción a la estructura de un documento HTML
  2. Información sobre la versión de HTML
  3. El elemento HTML
  4. La cabecera del documento
    1. El elemento HEAD
    2. El elemento TITLE
    3. El atributo title
    4. Metadatos
  5. El cuerpo del documento
    1. El elemento BODY
    2. Identificadores de elementos: los atributos id y class
    3. Elementos en bloque y elementos en línea
    4. Agrupación de elementos: los elementos DIV y SPAN
    5. Encabezados: los elementos H1, H2, H3, H4, H5, H6
    6. El elemento ADDRESS

7.1 Introducción a la estructura de un documento HTML

Un documento HTML 4 se compone de tres partes:

  1. una línea que contiene información sobre la versión de HTML,
  2. una sección de cabecera declarativa (delimitada por el elemento HEAD),
  3. un cuerpo, que contiene el contenido real del documento. El cuerpo puede ser especificado mediante el elemento BODY o mediante el elemento FRAMESET.

Puede aparecer espacio en blanco (espacios, saltos de línea, tabulaciones y comentarios) antes y después de cada sección. Las secciones 2 y 3 deberían estar delimitadas por el elemento HTML.

Aquí tenemos un ejemplo de un documento HTML sencillo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>Mi primer documento HTML</TITLE>
   </HEAD>
   <BODY>
      <P>¡Hola mundo!
   </BODY>
</HTML>

7.2 Información sobre la versión de HTML

Un documento HTML válido declara qué versión de HTML se utiliza en el documento. La declaración del tipo de documento especifica la definición del tipo de documento (DTD) que se usa en el documento (ver [ISO8879]).

HTML 4.01 especifica tres DTDs, de modo que los autores deben incluir una de las siguientes declaraciones del tipo de documento en sus documentos. Los DTDs varían en cuanto a los elementos que soportan.

El URI que aparece en la declaración del tipo de documento permite a los agentes de usuario descargar el DTD y los conjuntos de entidades que sean necesarios. Los siguientes URIs (relativos) se refieren a los DTDs y conjuntos de entidades de HTML 4:

La vinculación entre identificadores públicos y ficheros puede especificarse utilizando un fichero de catálogo según el formato recomendado por el Oasis Open Consortium (ver [OASISOPEN]. Al comienzo de la sección sobre la referencia SGML de HTML 4.01 se incluye un fichero de catálogo de muestra para HTML 4.01. Las dos últimas letras de la declaración indican el idioma del DTD. Para HTML, éste es siempre inglés ("EN").

Nota. En lo que concierne a la versión de HTML 4.01 del 24 de diciembre, el Grupo de Trabajo HTML se compromete a la siguiente política:

Esto significa que en una declaración del tipo de documento, los autores pueden utilizar con seguridad un identificador de sistema que se refiera a la última versión de un DTD HTML 4. Los autores también pueden optar por usar un identificador de sistema que se refiera a una version específica (antigua) de un DTD HTML 4 cuando sea necesaria la validación con respecto a ese DTD en particular. El W3C hará todo lo posible para que los documentos archivados estén siempre disponibles en sus direcciones originales y en su forma original.

7.3 El elemento HTML

<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;)    -- elemento raíz del documento -->
<!ATTLIST HTML
  %i18n;                               -- lang, dir --
  >

Etiqueta inicial: opcional, Etiqueta final: opcional

Definiciones de atributos

version = cdata [CN]
Desaprobado. El valor de este atributo especifica qué DTD HTML gobierna el documento actual. Este atributo ha sido desaprobado porque es redundante con la información sobre la versión proporcionada por la declaración del tipo de documento.

Atributos definidos en otros lugares

Después de la declaración del tipo de documento, el resto de un documento HTML está contenido en el elemento HTML. Así, un documento HTML típico tiene esta estructura:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
...La cabecera, el cuerpo, etc. van aquí...
</HTML>

7.4 La cabecera del documento

7.4.1 El elemento HEAD

<!-- %head.misc; definido previamente como "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- cabecera del documento -->
<!ATTLIST HEAD
  %i18n;                               -- lang, dir --
  profile     %URI;          #IMPLIED  -- diccionario de metainformación con nombre --
  >

Etiqueta inicial: opcional, Etiqueta final: opcional

Definiciones de atributos

profile = uri [CT]
Este atributo especifica la localización de uno o más perfiles de metadatos, separados por espacio en blanco. Con vistas a extensiones futuras, los agentes de usuario deberían considerar este valor como una lista, si bien esta especificación sólo tiene en cuenta el primer URI. Se habla sobre los perfiles más adelante, en la sección sobre metadatos.

Atributos definidos en otros lugares

El elemento HEAD contiene información sobre el documento actual, como el título, palabras clave que pueden ser de utilidad para motores de búsqueda, y otros datos que no se consideran parte del contenido del documento. En general, los agentes de usuario no representan los elementos que aparecen como contenido del HEAD. Sin embargo, pueden poner la información del HEAD a disposición de los usuarios a través de otros mecanismos.

7.4.2 El elemento TITLE

<!-- El elemento TITLE no se considera parte del flujo de texto.
     Debería ser mostrado, por ejemplo, como el encabezado de la página
     o como el título de la ventana. Se requiere exactamente un título
     por documento.
     -->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- título del documento -->
<!ATTLIST TITLE %i18n>

Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

Atributos definidos en otros lugares

Todos los documentos HTML deben tener un elemento TITLE en la sección HEAD.

Los autores deberían utilizar el elemento TITLE para identificar los contenidos de un documento. Debido a que los usuarios a menudo consultan documentos fuera de contexto, los autores deberían proporcionar títulos ricos en contexto. Así, en vez de usar un título como "Introducción", que no proporciona mucha información acerca del contexto, los autores deberían poner en su lugar un título del estilo "Introducción a la apicultura medieval".

Por razones de accesibilidad, los agentes de usuario siempre deben poner el contenido del elemento TITLE a disposición de los usuarios (incluyendo los elementos TITLE que aparezcan en marcos). El mecanismo para ello depende del agente de usuario (p.ej., como un título, hablado).

Los títulos pueden contener entidades de caracteres (para caracteres acentuados, caracteres especiales, etc.), pero no pueden contener código (incluyendo comentarios). Aquí tenemos un ejemplo de título de documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Un estudio sobre la dinámica de la población</TITLE>
... otros elementos de cabecera...
</HEAD>
<BODY>
... cuerpo del documento...
</BODY>
</HTML>

7.4.3 El atributo title

Definiciones de atributos

title = texto [CS]
Este atributo ofrece información consultiva sobre el elemento para el cual se establece.

A diferencia del elemento TITLE, que proporciona información sobre un documento entero y que sólo puede aparecer una vez, el atributo title puede anotar cualquier número de elementos. Para saber si un elemento soporta este atributo consulte la definición del elemento.

Los valores del atributo title pueden ser representados por los agentes de usuario de diferentes maneras. Por ejemplo, los navegadores visuales suelen representar el título como un "tool tip" (un mensaje corto que aparece cuando el dispositivo apuntador se detiene sobre un objeto). Los agentes de usuario de voz pueden pronunciar la información del título en un contexto similar. Por ejemplo, al establecer el atributo en un vínculo, los agentes de usuario (visuales y no visuales) pueden decir a los usuarios la naturaleza del recurso vinculado:

...texto...
Aquí hay una foto mía 
<A href="http://algunsitio.com/cosascheveres.gif" title="Yo haciendo submarinismo">
   haciendo submarinismo el verano pasado
</A>
...más texto...

El atributo title tiene un papel adicional cuando se utiliza con el elemento LINK para designar una hoja de estilo externa. Consulte la sección sobre vínculos y hojas de estilo para más detalles.

Nota. Para mejorar la calidad de la síntesis de voz en los casos en que las técnicas estándar logran malos resultados, las versiones futuras de HTML podrían incluir un atributo para codificar información fonémica y prosódica.

7.4.4 Metadatos

Nota. El Marco de Descripción de Recursos (Resource Description Framework) del W3C (ver [RDF10]) se convirtió en Recomendación del W3C en febrero de 1999. El RDF permite a los autores especificar metadatos legibles por máquina sobre documentos HTML y otros recursos accesibles por la red.

El HTML permite a los autores especificar metadatos -- información sobre un documento más que contenido del propio documento -- de diferentes de maneras.

Por ejemplo, para especificar el autor de un documento, puede utilizarse el elemento META como sigue:

<META name="Author" content="Dave Raggett">

El elemento META especifica una propiedad (aquí "Author") y le asigna un valor (aquí "Dave Raggett").

Esta especificación no define un conjunto de propiedades legales de metadatos. El significado de una propiedad y el conjunto de valores legales para esa propiedad debería estar definida en un diccionario de referencia llamado perfil. Por ejemplo, un perfil diseñado para ayudar a los motores de búsqueda a indexar documentos podría definir propiedades tales como "author", "copyright", "keywords", etc.

Especificación de metadatos 

En general, la especificación de metadatos implica dos pasos:

  1. Declaración de una propiedad y de un valor para esta propiedad. Esto puede hacerse de dos maneras:
    1. Desde dentro de un documento, por medio del elemento META.
    2. Desde fuera de un documento, vinculando los metadatos por medio del elemento LINK (véase la sección sobre tipos de vínculos).
  2. Referencia a un perfil en el que se definen la propiedad y sus valores legales. Para designar un perfil, se usa el atributo profile del elemento HEAD.

Obsérvese que al estar definido un perfil por el elemento HEAD, se aplica el mismo perfil a todos los elementos META y LINK de la cabecera del documento.

Los agentes de usuario no necesitan soportar los mecanismos de metadatos. Para aquellos que opten por soportar metadatos, esta especificación no define cómo deberían interpretarse los metadatos.

El elemento META 

<!ELEMENT META - O EMPTY               -- metainformación genérica -->
<!ATTLIST META
  %i18n;                               -- lang, dir, para usar con content --
  http-equiv  NAME           #IMPLIED  -- nombre de encabezado de respuesta HTTP --
  name        NAME           #IMPLIED  -- nombre de la metainformación --
  content     CDATA          #REQUIRED -- información asociada --
  scheme      CDATA          #IMPLIED  -- seleccionar forma de contenido --
  >

Etiqueta inicial: obligatoria, Etiqueta final: prohibida

Definiciones de atributos

Para los siguientes atributos, los valores permitidos y su interpretación depende del perfil:

name = name [CS]
Este atributo identifica un nombre de propiedad. Esta especificación no enumera los valores legales para este atributo.
content = cdata [CS]
Este atributo especifica el valor de una propiedad. Esta especificación no enumera los valores legales para este atributo.
scheme = cdata [CS]
Este atributo especifica un esquema que se usará para interpretar el valor de la propiedad (véase la sección sobre perfiles para más detalles).
http-equiv = name [CI]
Este atributo puede utilizarse en lugar del atributo name. Los servidores HTTP utilizan este atributo para obtener información sobre los encabezados del mensaje de respuesta HTTP.

Atributos definidos en otros lugares

El elemento META puede utilizarse para identificar propiedades de un documento (p.ej., el autor, la fecha de caducidad, una lista de palabras clave, etc.) y para asignar valores a esas propiedades. Esta especificación no define un conjunto normativo de propiedades.

Cada elemento META especifica una pareja propiedad/valor. El atributo name identifica la propiedad y el atributo content especifica el valor de la propiedad.

Por ejemplo, la siguiente declaración establece un valor para la propiedad Author:

<META name="Author" content="Dave Raggett">

Puede utilizarse el atributo lang de META para especificar el idioma del valor del atributo content. Esto permite a los sintetizadores de voz aplicar reglas de pronunciación dependientes del idioma.

En este ejemplo, se declara que el nombre del autor está en francés:

<META name="Author" lang="fr" content="Arnaud Le Hors">

Nota. El elemento META es un mecanismo genérico para la especificación de metadatos. Sin embargo, hay algunos elementos y atributos HTML que ya manejan determinados metadatos y que pueden ser utilizados por los autores en lugar de META para especificar dichos metadatos: el elemento TITLE, el elemento ADDRESS, los elementos INS y DEL, el atributo title, y el atributo cite.

Nota. Cuando una propiedad especificada mediante un elemento META toma un valor que es un URI, algunos autores prefieren especificar los metadatos mediante el elemento LINK. Así, la siguiente declaración de metadatos:

<META name="DC.identifier"
      content="http://www.ietf.org/rfc/rfc1866.txt">

también podría haberse escrito así:

<LINK rel="DC.identifier"
      type="text/plain"
      href="http://www.ietf.org/rfc/rfc1866.txt">
META y encabezados HTTP

El atributo http-equiv puede utilizarse en lugar del atributo name, lo cual tiene un significado especial cuando los documentos se obtienen mediante el Protocolo de Transferencia de Hipertexto (HTTP). Los servidores HTTP pueden usar el nombre de la propiedad especificada por el atributo http-equiv para crear un encabezado al estilo [RFC822] en la respuesta HTTP. Vea la especificación HTTP ([RFC2616]) para más detalles sobre encabezados HTTP válidos.

La siguiente declaración META de ejemplo:

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

resultará en el encabezado HTTP:

Expires: Tue, 20 Aug 1996 14:25:27 GMT

Esto lo pueden utilizar las cachés para determinar cuándo obtener una nueva copia del documento asociado.

Nota. Algunos agentes de usuario soportan el uso de META para refrescar la página actual después de un número especificado de segundos, con la opción de reemplazarla con un URI diferente. Los autores no deberían utilizar esta técnica para dirigir a los usuarios a páginas diferentes, ya que esto hace la página inaccesible para algunos usuarios. En lugar de eso, la redirección automática de páginas debería realizarse usando redirección en el lado del servidor.

META y motores de búsqueda

Un uso común de META es especificar palabras clave que pueden usar los motores de búsqueda para mejorar la calidad de los resultados de una búsqueda. Cuando se proporcionen varios elementos META con información para varios idiomas, los motores de búsqueda pueden utilizar el atributo lang como filtro para mostrar los resultados de la búsqueda usando las preferencias de idioma del usuario. Por ejemplo,

<!-- Para hablantes de inglés americano -->
<META name="keywords" lang="en-us" 
      content="vacation, Greece, sunshine">
<!-- Para hablantes de inglés británico -->
<META name="keywords" lang="en" 
      content="holiday, Greece, sunshine">
<!-- Para hablantes de español -->
<META name="keywords" lang="es" 
      content="vacaciones, Grecia, sol">

También puede incrementarse la efectividad de los motores de búsqueda usando el elemento LINK para especificar vínculos a traducciones del documento en otros idiomas, vínculos a versiones del documento en otros medios (p.ej., PDF), y, cuando el documento es parte de una colección, vínculos a un punto apropiado de partida para examinar la colección completa.

Se puede encontrar más ayuda en la sección sobre cómo ayudar a los motores de búsqueda a indexar su sitio Web.

META y PICS

La Plataforma para la Selección de Contenido en Internet (PICS, especificada en [PICS]) es una infraestructura para asociar etiquetas (metadatos) con contenido de Internet. Diseñada originalmente para ayudar a los padres y a las escuelas a controlar los lugares a los que pueden acceder los niños en Internet, también facilita otros usos para las etiquetas, incluyendo firmas de código, privacidad, y gestión de los derechos de la propiedad intelectual.

Este ejemplo ilustra cómo puede usarse una declaración META para incluir una etiqueta PICS 1.1:

<HEAD>
 <META http-equiv="PICS-Label" content='
 (PICS-1.1 "http://www.gcf.org/v2.5"
    labels on "1994.11.05T08:15-0500"
      until "1995.12.31T23:59-0000"
      for "http://w3.org/PICS/Overview.html"
    ratings (suds 0.5 density 0 color/hue 1))
 '>
  <TITLE>... título del documento ...</TITLE>
</HEAD>
META e información por defecto

El elemento META puede utilizarse para especificar la información por defecto de un documento en los aspectos siguientes:

El siguiente ejemplo especifica que la codificación de caracteres de un documento es la ISO-8859-5

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5"> 

Perfiles de metadatos 

El atributo profile de HEAD especifica la localización de un perfil de metadatos. El valor del atributo profile es un URI. Los agentes de usuario pueden utilizar este URI de dos maneras:

Este ejemplo hace referencia a un perfil hipotético que define propiedades útiles para indexar documentos. A las propiedades definidas en este perfil -- incluyendo "author", "copyright", "keywords" (palabras clave) y "date" (fecha) -- se les asignan valores mediante declaraciones META subsiguientes.

 <HEAD profile="http://www.acme.com/profiles/core">
  <TITLE>Cómo completar portadas de Memoranda</TITLE>
  <META name="author" content="José Pérez">
  <META name="copyright" content="&copy; 1997 Acme Corp.">
  <META name="keywords" content="empresarial,instrucciones,catálogos">
  <META name="date" content="1994-11-06T08:49:37+00:00">
 </HEAD>

En el momento de escribir esta especificación, la práctica común es usar los formatos de fechas descritos en [RFC2616], sección 3.3. Como estos formatos son relativamente complicados de procesar, recomendamos que los autores utilicen el formato de fechas [ISO8601]. Para más información, véanse las secciones sobre los elementos INS y DEL.

El atributo scheme permite a los autores proporcionar a los agentes de usuario más contexto para la interpretación correcta de los metadatos. A veces, esta información adicional puede ser crítica, por ejemplo cuando los metadatos pueden ser especificados según formatos diferentes. Por ejemplo, un autor podría especificar una fecha en el formato (ambiguo) "10-9-97"; ¿significa esto 9 de octubre de 1997 o 10 de septiembre de 1997? El valor "Mes-Día-Año" para el atributo scheme eliminaría la ambigüedad de este valor de fecha.

En otras ocasiones, el atributo scheme puede proporcionar información útil aunque no crítica a los agentes de usuario.

Por ejemplo, la siguiente declaración scheme podría ayudar a un agente de usuario a determinar que el valor de la propiedad "identificador" es un número de código ISBN:

<META scheme="ISBN"  name="identificador" content="0-8230-2355-9">

Los valores del atributo scheme dependen de la propiedad name y del profile asociado.

Nota. Un ejemplo de perfil es el Dublin Core (ver [DCORE]). Este perfil define un conjunto de propiedades recomendadas para descripciones bibliográficas electrónicas, y su objetivo es promover la interoperabilidad entre modelos descriptivos dispares.

7.5 El cuerpo del documento

7.5.1 El elemento BODY

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- cuerpo del documento -->
<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- el documento ha sido cargado --
  onunload        %Script;   #IMPLIED  -- el documento ha sido quitado --
  >

Etiqueta inicial: opcional, Etiqueta final: opcional

Definiciones de atributos

background = uri [CT]
Desaprobado. El valor de este atributo es un URI que designa un recurso de imagen. En general la imagen se repite para rellenar el fondo (en navegadores visuales).
text = color [CI]
Desaprobado. Este atributo establece el color de primer plano para el texto (en navegadores visuales).
link = color [CI]
Desaprobado. Este atributo establece el color del texto que marca los vínculos de hipertexto no visitados (en navegadores visuales)
vlink = color [CI]
Desaprobado. Este atributo especifica el color del texto que marca los vínculos de hipertexto visitados (en navegadores visuales).
alink = color [CI]
Desaprobado. Este atributo especifica el color del texto que marca los vínculos de hipertexto cuando son seleccionados por el usuario (en navegadores visuales).

Atributos definidos en otros lugares

El cuerpo de un documento contiene el contenido del documento. El contenido puede ser presentado por un agente de usuario de distintas maneras. Por ejemplo, para los navegadores visuales, se puede imaginar el cuerpo como un lienzo sobre el que aparece el contenido: texto, imágenes, colores, gráficos, etc. Para agentes de usuario por voz, el mismo contenido podría ser pronunciado. Debido a que ahora el método preferido de especificar la presentación de un documento son las hojas de estilo, los atributos presentacionales del elemento BODY han sido desaprobados.

EJEMPLO DESAPROBADO:
El siguiente fragmento HTML ilustra el uso de los atributos desaprobados. Establece el color de fondo del lienzo en blanco, el color de primer plano del texto en negro, y el color de los hipervínculos en rojo inicialmente, fucsia cuando son activados y marrón una vez que han sido visitados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Un estudio sobre la dinámica de la población</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
  link="red" alink="fuchsia" vlink="maroon">
  ... cuerpo del documento ...
</BODY>
</HTML>

Usando hojas de estilo, se podría conseguir el mismo efecto de la siguiente manera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Un estudio sobre la dinámica de la población</TITLE>
 <STYLE type="text/css">
  BODY { background: white; color: black }
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: fuchsia }
 </STYLE>
</HEAD>
<BODY>
  ... cuerpo del documento ...
</BODY>
</HTML>

El usar hojas de estilo externas (vinculadas) nos da flexibilidad para cambiar la presentación sin tener que revisar el documento fuente HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Un estudio sobre la dinámica de la población</TITLE>
 <LINK rel="stylesheet" type="text/css" href="estilolisto.css">
</HEAD>
<BODY>
  ... cuerpo del documento ...
</BODY>
</HTML>

Marcos y cuerpos HTML. Los documentos que contienen marcos reemplazan el elemento BODY con el elemento FRAMESET. Consulte la sección sobre marcos para más información.

7.5.2 Identificadores de elementos: los elementos id y class

Definiciones de atributos

id = name [CS]
Este atributo asigna un nombre a un elemento. Este nombre debe ser único en un documento.
class = lista de cdata [CS]
Este atributo asigna un nombre de clase o un conjunto de nombres de clase a un elemento. Se puede asignar el mismo nombre o nombres de clase a cualquier número de elementos. Los nombres de clase múltiples deben estar separados por caracteres de espacio en blanco.
El atributo id asigna un identificador único a un elemento (lo cual puede ser verificado por un analizador SGML). Por ejemplo, los siguientes párrafos se distinguen por sus valores de id:
<P id="miparrafo"> Esto es un párrafo con un nombre único.</P>
<P id="tuparrafo"> Esto también es un párrafo con un nombre único.</P>

El atributo id tiene varios papeles en HTML:

El atributo class, por otra parte, asigna uno o más nombres de clase a un elemento; se puede decir que el elemento pertenece a estas clases. Varios elementos pueden compartir el mismo nombre de clase. El atributo class tiene varios papeles en HTML:

En el siguiente ejemplo, el elemento SPAN se utiliza junto con los atributos id y class para codificar mensajes informativos. Los mensajes aparecen tanto en inglés como en español.

<!-- Mensajes en inglés -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="advertencia" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN>
<!-- Mensajes en español -->
<P><SPAN id="msg1" class="info" lang="es">Variable declarada dos veces</SPAN>
<P><SPAN id="msg2" class="advertencia" lang="es">Variable no declarada</SPAN>
<P><SPAN id="msg3" class="error" lang="es">Sintaxis incorrecta para el nombre
de la variable</SPAN>

Las siguientes reglas de estilo CSS dirían a los agentes de usuario visuales que representaran los mensajes informativos en verde, los mensajes de advertencia en amarillo, y los mensajes de error en rojo:

SPAN.info        { color: green }
SPAN.advertencia { color: yellow }
SPAN.error       { color: red }

Obsérvese que el "msg1" español y el "msg1" inglés no pueden aparecer en el mismo documento, ya que ambos comparten el mismo valor de id. Los autores pueden hacer un uso mayor del atributo id para refinar la presentación de mensajes individuales, hacerlos vínculos destino, etc.

Se les puede asignar información de identificador y clase a casi todos los elementos HTML.

Supongamos, por ejemplo, que estamos escribiendo un documento sobre un lenguaje de programación. El documento debe incluir un número de ejemplos preformateados. Usamos el elemento PRE para formatear los ejemplos. También asignamos un color de fondo (verde) a todos los ejemplares del elemento PRE que pertenezcan a la clase "ejemplo".

<HEAD>
<TITLE>... título del documento ...</TITLE>
<STYLE type="text/css">
PRE.ejemplo { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="ejemplo" id="ejemplo-1">
...código del ejemplo...
</PRE>
</BODY>

Al establecer el atributo id para este ejemplo, podemos (1) crear un hipervínculo a él y (2) sustituir la información de estilo de la clase por información de estilo propia.

Nota. El atributo id comparte el mismo espacio de nombres que el atributo name cuando se usa para nombres de vínculos. Consulte la sección sobre vínculos con id para más información.

7.5.3 Elementos en bloque y elementos en línea

Algunos de los elementos HTML que pueden aparecer en BODY se llaman elementos "en bloque" (o también "a nivel de bloque") mientras que otros son elementos "en línea" (o "a nivel de texto"). Esta distinción se basa en varios aspectos:

Modelo de contenido
Generalmente, los elementos en bloque pueden contener elementos en línea y a otros elementos en bloque. Generalmente, los elementos en línea sólo pueden contener datos y a otros elementos en línea. Inherentemente a esta distinción estructural está la idea de que los elementos en bloque crean estructuras "más grandes" que los elementos en línea.
Formato
Los elementos en bloque tienen por defecto un formato diferente que el de los elementos en línea. Generalmente, los elementos en bloque comienzan en una nueva línea, y los elementos en línea no. Para información sobre espacio en blanco, saltos de línea, y formato de bloques, consulte la sección sobre texto.
Direccionalidad
Por razones técnicas relacionadas con el algoritmo de texto bidireccional de [UNICODE], los elementos en bloque y en línea difieren en el modo de heredar la información de direccionalidad. Para más detalles, vea la sección sobre herencia de la dirección del texto.

Las hojas de estilo proporcionan medios para especificar la representación de elementos arbitrarios, incluyendo la representación como elemento en bloque o en línea. En algunos casos, como por ejemplo para información en línea para objetos de lista, esto puede ser apropiado, pero en general no es aconsejable que los autores invaliden la interpretación convencional de los elementos HTML de este modo.

La alteración del estilo de presentación tradicional de los elementos en bloque y en línea también influye en el algoritmo de texto bidireccional. Vea la sección sobre el efecto de las hojas de estilo en la bidireccionalidad para más información.

7.5.4 Agrupación de elementos: los elementos DIV y SPAN

<!ELEMENT DIV - - (%flow;)*            -- contenedor genérico de idioma/estilo -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT SPAN - - (%inline;)*         -- contenedor genérico de idioma/estilo -->
<!ATTLIST SPAN
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

Atributos definidos en otros lugares

Los elementos DIV y SPAN, junto con los atributos id y class, ofrecen un mecanismo genérico para añadir estructura a los documentos. Estos elementos especifican si su contenido es en línea (SPAN) o en bloque (DIV) pero no imponen ningún otro estilo de presentación al contenido. Así, los autores pueden usar estos elementos junto con hojas de estilo, el atributo lang, etc., para adaptar el HTML a sus propios gustos y necesidades.

Supongamos, por ejemplo, que quisiéramos generar un documento HTML basado en una base de datos de información sobre clientes. Como HTML no incluye elementos que identifiquen objetos tales como "cliente", "número de teléfono", "dirección de correo electrónico", etc., utilizamos DIV y SPAN para lograr los efectos estructurales y presentacionales deseados. Podríamos usar el elemento TABLE del modo siguiente para estructurar la información:

<!-- Ejemplo de registro de la base de datos de clientes: -->
<!-- Nombre: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="cliente-boyera" class="cliente">
<P><SPAN class="cliente-titulo">Información sobre el cliente:</SPAN>
<TABLE class="cliente-datos">
<TR><TH>Apellido:<TD>Boyera</TR>
<TR><TH>Nombre:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="cliente-lafon" class="cliente">
<P><SPAN class="cliente-titulo">Información sobre el cliente:</SPAN>
<TABLE class="cliente-datos">
<TR><TH>Apellido:<TD>Lafon</TR>
<TR><TH>Nombre:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

A continuación, podemos añadir fácilmente declaraciones a la hoja de estilo para ajustar la presentación de estas entradas de la base de datos.

Para otro ejemplo de uso, consulte el ejemplo de la sección sobre los atributos class e id.

En general los agentes de usuario visuales colocan un salto de línea antes y otro después de los elementos DIV, por ejemplo:

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

que normalmente se representa como:

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

7.5.5 Encabezados: los elementos H1, H2, H3, H4, H5, H6

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  Hay seis niveles de encabezados, desde H1 (el más importante)
  hasta H6 (el menos importante).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- encabezado -->
<!ATTLIST (%heading;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

Atributos definidos en otros lugares

Un encabezado describe brevemente el tema de la sección que introduce. La información de encabezado puede ser utilizada por los agentes de usuario, por ejemplo, para construir una tabla de contenidos de un documento automáticamente.

Hay seis niveles de encabezados en HTML, siendo H1 el más importante y H6 el menos importante. Los navegadores visuales pueden representar los encabezados más importantes con fuentes más grandes que los menos importantes.

El siguiente ejemplo muestra cómo usar el elemento DIV para asociar un encabezado con la sección del documento que le sigue. Esto nos permite definir un estilo para la sección (color del fondo, fuente del texto, etc.) con hojas de estilo.

<DIV class="seccion" id="elefantes-de-la-selva">
<H1>Elefantes de la selva</H1>
<P>En esta sección descubriremos a esos grandes desconocidos:
   los elefantes de la selva.
...la sección continúa...
<DIV class="subseccion" id="habitat-de-la-jungla">
<H2>Hábitat</H2>
<P>Los elefantes de la selva no viven en los árboles, sino entre ellos.
...la subsección continúa...
</DIV>
</DIV>

Podemos decorar esta estructura con información de estilo tal como ésta:

<HEAD>
<TITLE>... título del documento ...</TITLE>
<STYLE type="text/css">
DIV.seccion { text-align: justify; font-size: 12pt}
DIV.subseccion { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

Secciones numeradas y referencias
HTML no genera por sí mismo números de sección a partir de los encabezados. Sin embargo esto podría ser ofrecido por los agentes de usuario. Pronto los lenguajes de hojas de estilo como CSS permitirán a los autores controlar la generación de números de sección (muy útiles para hacer referencias de documentos impresos, como en "Ver la sección 7.2").

Algunas personas consideran que saltarse niveles de encabezado es mala práctica. Aceptan H1 H2 H1 pero no aceptan H1 H3 H1 ya que se salta el nivel de encabezado H2.

7.5.6 El elemento ADDRESS

<!ELEMENT ADDRESS - - (%inline;)* -- información sobre el autor -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

Atributos definidos en otros lugares

El elemento ADDRESS puede ser utilizado por los autores para proporcionar información de contacto en un documento o en una parte de un documento, como por ejemplo un formulario. Este elemento suele aparecer el principio de un documento.

Por ejemplo, una página del sitio web del W3C relacionada con HTML podría incluir la siguiente información de contacto:

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>, 
<A href="../People/Arnaud/">Arnaud Le Hors</A>, 
personas de contacto del <A href="Activity">W3C HTML Activity</A><BR> 
$Fecha: 1999/12/24 23:07:14 $
</ADDRESS>