Movatterモバイル変換
[0]ホーム
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 laversión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozoarroba conclase punto net. Gracias por su colaboración.
Véase elAviso de copyright de la traducción.
7.1 Introducción a la estructura de un documento HTML
Un documento HTML 4 se compone de tres partes:
- una línea que contieneinformación sobre la versiónde HTML,
- una sección de cabecera declarativa (delimitada por el elementoHEAD),
- un cuerpo, que contiene el contenido real del documento. El cuerpo puedeser especificado mediante el elementoBODY o mediante el elementoFRAMESET.
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 elelementoHTML.
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>
Un documento HTML válido declara qué versión de HTML se utiliza en el documento.Ladeclaración del tipo de documentoespecifica 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 unade las siguientes declaraciones del tipo de documento en sus documentos. LosDTDs varían en cuanto a los elementos que soportan.
- ElDTD HTML 4.01 Estricto (Strict DTD) incluye todos loselementos y atributos que no han sidodesaprobados o que no aparecen en documentos con marcos. Para los documentosque usen este DTD, utilice esta declaración del tipo de documento:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- ElDTD HTML 4.01Transicional (Transitional DTD) incluye todo lo que incluye el DTD estrictomás los elementos y atributos desaprobados (la mayoría de los cuales están relacionadoscon la presentación visual). Para los documentos que usen este DTD, utilice estadeclaración del tipo de documento:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- ElDTD HTML 4.01 para Documentos con Marcos(Frameset DTD) incluye todo lo que incluye el DTD Transicional más los marcos.Para los documentos que usen este DTD, utilice esta declaración del tipo dedocumento:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
El URI que aparece en la declaración del tipo de documento permite a losagentes de usuario descargar el DTD y losconjuntosde entidades que sean necesarios. Los siguientes URIs (relativos) serefieren a los DTDs yconjuntos de entidades de HTML 4:
La vinculación entre identificadores públicos y ficheros puede especificarseutilizando un fichero de catálogo según el formato recomendado por el OasisOpen Consortium (ver[OASISOPEN]. Al comienzo de la sección sobre la referencia SGML de HTML 4.01se incluye unfichero de catálogo demuestra para HTML 4.01. Las dos últimas letras de la declaración indican elidioma del DTD. Para HTML, éste es siempre inglés ("EN").
Nota. En lo que concierne a la versión de HTML 4.01 del 24de diciembre, el Grupo de Trabajo HTML se compromete a la siguiente política:
- Los posibles cambios en los DTDs futuros de HTML 4 no invalidarán losdocumentos que sean conformes con los DTDs de la presente especificación.El Grupo de Trabajo HTML se reserva el derecho de corregir los errores conocidos.
- Los programas que sean conformes con los DTDs de la presente especificaciónpueden no tener en cuenta las características de los DTDs futuros de HTML 4que no reconozcan.
Esto significa que en una declaración del tipo de documento, los autorespueden 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 unidentificador de sistema que se refiera a una version específica (antigua) de unDTD 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 siempredisponibles en sus direcciones originales y en su forma original.
Etiqueta inicial:opcional, Etiqueta final:opcional
Atributos definidos en otros lugares
Después de la declaración del tipo de documento, el resto de un documentoHTML está contenido en el elementoHTML. 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
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 deusuario deberían considerar este valor como una lista, si bien esta especificaciónsólo tiene en cuenta el primer URI. Se habla sobre losperfilesmás adelante, en la sección sobremetadatos.
Atributos definidos en otros lugares
El elementoHEAD contiene información sobre el documento actual, como eltí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 contenidodelHEAD. Sin embargo, pueden poner la informacióndelHEAD a disposición de los usuarios a través de otros mecanismos.
<!-- 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. --><!ELEMENTTITLE - - (#PCDATA) -(%head.misc;) -- título del documento --><!ATTLIST TITLE%i18n>
Etiqueta inicial:obligatoria, Etiqueta final:obligatoria
Atributos definidos en otros lugares
Todos los documentos HTMLdeben tener un elementoTITLEen la secciónHEAD.
Los autores deberían utilizar el elementoTITLE para identificar loscontenidos de undocumento. Debido a que los usuarios a menudo consultan documentosfuera 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 muchainformación acerca del contexto, los autores deberían poner en su lugarun título del estilo "Introducción a la apicultura medieval".
Por razones de accesibilidad, los agentes de usuario siempre deben ponerel contenido del elementoTITLEa disposición de los usuarios (incluyendolos elementosTITLEque aparezcan en marcos). El mecanismo para ello depende del agente de usuario(p.ej., como un título, hablado).
Los títulos pueden contenerentidades de caracteres(para caracteres acentuados, caracteres especiales, etc.), pero no pueden contenercó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>
Definiciones de atributos
- title =texto[CS]
- Este atributo ofrece información consultiva sobre el elemento para elcual se establece.
A diferencia del elementoTITLE, que proporciona información sobre un documento entero y quesólo puede aparecer una vez, el atributotitle puede anotar cualquier número deelementos. Para saber si un elemento soporta esteatributo consulte la definición del elemento.
Los valores del atributotitle pueden ser representados por los agentes de usuario de diferentesmaneras. Por ejemplo, los navegadores visuales suelen representar el título como un"tool tip" (un mensaje corto que aparece cuando el dispositivo apuntador se detienesobre un objeto). Los agentes de usuario de voz pueden pronunciar la información deltí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 lanaturaleza 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 atributotitle tiene un papel adicional cuando se utiliza con el elementoLINKpara designar unahoja de estilo externa. Consulte la sección sobrevínculos y hojas de estilo para más detalles.
Nota. Para mejorar la calidad de la síntesis de voz enlos casos en que las técnicas estándar logran malos resultados, las versionesfuturas de HTML podrían incluir un atributo para codificar información fonémicay prosódica.
Nota. ElMarco 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 especificarmetadatos legibles por máquina sobre documentos HTML y otros recursos accesibles por la red.
El HTML permite a los autores especificarmetadatos -- información sobre un documento más que contenido delpropio documento -- de diferentes de maneras.
Por ejemplo, para especificar el autor de un documento, puede utilizarseel elementoMETAcomo sigue:
<META name="Author" content="Dave Raggett">
El elementoMETA especifica una propiedad (aquí "Author") y le asigna unvalor (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 esapropiedad debería estar definida en un diccionario de referencia llamadoperfil. Por ejemplo, un perfil diseñado para ayudar a losmotores 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:
- Declaración de una propiedad y de un valor para esta propiedad.Esto puede hacerse de dos maneras:
- Desde dentro de un documento, por medio del elementoMETA.
- Desde fuera de un documento, vinculando los metadatos por mediodel elementoLINK(véase la sección sobretipos de vínculos).
- Referencia a unperfil en el que se definen lapropiedad y sus valores legales. Para designar un perfil, se usa elatributoprofile del elementoHEAD.
Obsérvese que al estar definido un perfil por el elementoHEAD, se aplica el mismoperfil a todos los elementosMETA yLINK 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 nodefine cómo deberían interpretarse los metadatos.
El elementoMETA
<!ELEMENTMETA - O EMPTY -- metainformación genérica --><!ATTLIST META%i18n; --lang,dir, para usar con content --http-equivNAME #IMPLIED -- nombre de encabezado de respuesta HTTP --nameNAME #IMPLIED -- nombre de la metainformación --contentCDATA #REQUIRED -- información asociada --schemeCDATA #IMPLIED -- seleccionar forma de contenido -- >
Etiqueta inicial:obligatoria, Etiqueta final:prohibida
Definiciones de atributos
Para los siguientes atributos, los valores permitidos y su interpretacióndepende delperfil:
- name =name[CS]
- Este atributo identifica un nombre de propiedad. Esta especificación noenumera los valores legales para este atributo.
- content =cdata[CS]
- Este atributo especifica el valor de una propiedad. Esta especificaciónno enumera los valores legales para este atributo.
- scheme =cdata[CS]
- Este atributo especifica un esquema que se usará para interpretar elvalor de la propiedad (véase la sección sobreperfiles para más detalles).
- http-equiv =name[CI]
- Este atributo puede utilizarse en lugar del atributoname.Los servidores HTTP utilizan este atributo para obtener información sobre losencabezados del mensaje de respuesta HTTP.
Atributos definidos en otros lugares
El elementoMETA puede utilizarse para identificar propiedades de un documento(p.ej., el autor, la fecha de caducidad, una lista de palabras clave, etc.) ypara asignar valores a esas propiedades. Esta especificación no define unconjunto normativo de propiedades.
Cada elementoMETA especifica una pareja propiedad/valor. El atributoname identifica la propiedad y el atributocontent especifica el valor de la propiedad.
Por ejemplo, la siguiente declaración establece un valor para lapropiedadAuthor:
<META name="Author" content="Dave Raggett">
Puede utilizarse el atributolang deMETA para especificar el idioma delvalor del atributocontent. Esto permite a los sintetizadores de voz aplicarreglas 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 elementoMETA es un mecanismo genérico parala especificación de metadatos. Sin embargo, hay algunos elementos y atributos HTMLque ya manejan determinados metadatos y que pueden ser utilizados por los autoresen lugar deMETApara especificar dichos metadatos: el elementoTITLE, el elementoADDRESS, los elementosINS yDEL,el atributotitle, y el atributocite.
Nota. Cuando una propiedad especificada mediante un elementoMETAtoma un valor que es unURI, algunosautoresprefieren especificar los metadatos mediante elelementoLINK.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 atributohttp-equiv puede utilizarse en lugar del atributoname, lo cual tiene un significado especial cuando losdocumentos se obtienen mediante el Protocolo de Transferencia de Hipertexto (HTTP).Los servidores HTTP pueden usar el nombre de la propiedad especificada porel atributohttp-equiv para crear un encabezado al estilo[RFC822] en la respuestaHTTP. Vea la especificación HTTP ([RFC2616]) para más detalles sobre encabezados HTTP válidos.
La siguiente declaraciónMETA 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 unanueva copia del documento asociado.
Nota. Algunos agentes de usuario soportan el uso deMETApara 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 autoresnodeberí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 ellado del servidor.
META y motores de búsqueda
Un uso común deMETA es especificar palabras clave que pueden usar losmotores debúsqueda para mejorar la calidad de los resultados de una búsqueda.Cuando se proporcionen varios elementosMETA con información para varios idiomas,los motores de búsqueda pueden utilizar el atributolangcomo filtro para mostrar los resultados de la búsqueda usando laspreferencias 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úsquedausando el elementoLINK para especificar vínculos a traducciones deldocumento en otros idiomas, vínculos a versiones del documento en otrosmedios (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 sobrecómo ayudar a los motores de búsqueda a indexarsu sitio Web.
LaPlataformapara la Selección de Contenido en Internet (PICS, especificada en[PICS])es una infraestructura para asociar etiquetas (metadatos) con contenido deInternet. Diseñada originalmente para ayudar a los padres y a las escuelasa controlar los lugares a los que pueden acceder los niños en Internet, tambiénfacilita 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ónMETA para incluir una etiquetaPICS 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 elementoMETA puede utilizarse para especificar la información por defectode un documento en los aspectos siguientes:
El siguiente ejemplo especifica que lacodificación de caracteres de un documento es la ISO-8859-5
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">
- Como un nombre único a nivel global. Los agentes de usuario pueden sercapaces de reconocer el nombre (sin necesidad de obtener el perfil) yrealizar alguna acción según las convenciones conocidas relativas a ese perfil.Por ejemplo, los motores de búsqueda podrían proporcionar una interfaz parabúsqueda en catálogos de documentos HTML, de modo que todos los documentospodrían usar el mismo perfil para representar entradas de un catálogo.
- Como un vínculo. Los agentes de usuario pueden seguir el URI y realizaralguna acción según las definiciones contenidas en el perfil (p.ej., autorizarel uso del perfil dentro del documento HTML actual). Esta especificación nodefine formatos de perfiles.
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 declaracionesMETA 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="© 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 esusar los formatos de fechas descritos en[RFC2616], sección 3.3. Comoestos formatos son relativamente complicados de procesar, recomendamos que losautores utilicen el formato de fechas[ISO8601]. Para másinformación, véanse las secciones sobre los elementosINS yDEL.
El atributoscheme permite a los autores proporcionar a los agentes de usuariomáscontexto para la interpretación correcta de los metadatos. A veces,esta información adicional puede ser crítica, por ejemplo cuando los metadatospueden ser especificados según formatos diferentes. Por ejemplo, un autorpodría especificar una fecha en el formato (ambiguo) "10-9-97"; ¿significa esto9 de octubre de 1997 o 10 de septiembre de 1997? El valor "Mes-Día-Año" parael atributoscheme eliminaría la ambigüedad de este valor de fecha.
En otras ocasiones, el atributoscheme puede proporcionar información útil aunque nocrítica a los agentes de usuario.
Por ejemplo, la siguiente declaraciónscheme podría ayudar a un agente de usuario a determinarque 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 atributoscheme dependen de la propiedadname y delprofile asociado.
Nota. Un ejemplo de perfil es elDublin Core (ver[DCORE]). Este perfil define un conjunto de propiedades recomendadaspara descripciones bibliográficas electrónicas, y su objetivo es promover lainteroperabilidad entre modelos descriptivos dispares.
7.5 El cuerpo del documento
Etiqueta inicial:opcional, Etiqueta final:opcional
Definiciones de atributos
- background =uri[CT]
- Desaprobado. Elvalor de este atributo es un URI que designa un recurso de imagen. En generalla imagen se repite para rellenar el fondo (en navegadores visuales).
- text =color[CI]
- Desaprobado. Esteatributo establece el color de primer plano para el texto (en navegadores visuales).
- link =color[CI]
- Desaprobado. Esteatributo establece el color del texto que marca los vínculos de hipertextono visitados (en navegadores visuales)
- vlink =color[CI]
- Desaprobado. Esteatributo especifica el color del texto que marca los vínculos de hipertextovisitados (en navegadores visuales).
- alink =color[CI]
- Desaprobado. Esteatributo especifica el color del texto que marca los vínculos de hipertextocuando son seleccionados por el usuario (en navegadores visuales).
Atributos definidos en otros lugares
- id,class (identificadores a nivel de documento)
- lang (informaciónsobre el idioma),dir (direccióndel texto)
- title (título del elemento)
- style (información deestilo en línea)
- bgcolor (color del fondo)
- onload,onunload (eventos intrínsecos)
- onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup (eventos intrínsecos)
El cuerpo de un documento contiene el contenido del documento. El contenidopuede 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 elque aparece el contenido: texto, imágenes, colores, gráficos, etc. Para agentesde usuario por voz, el mismo contenido podría ser pronunciado. Debido a que ahorael método preferido de especificar la presentación de un documento son lashojas de estilo, los atributos presentacionalesdel elementoBODY han sidodesaprobados.
EJEMPLO DESAPROBADO:
El siguiente fragmento HTML ilustra el uso de los atributosdesaprobados. Establece el color de fondo dellienzo en blanco, el color de primer plano del texto en negro, y el color delos hipervínculos en rojo inicialmente, fucsia cuando son activados y marrón unavez 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>
Usandohojas de estilo, se podríaconseguir 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 paracambiar 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>
Definiciones de atributos
- id =name[CS]
- Este atributo asigna un nombre a un elemento. Este nombre debe ser único enun documento.
- class =lista de cdata[CS]
- Este atributo asigna un nombre de clase o un conjunto de nombres de clasea un elemento. Se puede asignar el mismo nombre o nombres de clase a cualquiernúmero de elementos. Los nombres de clase múltiples deben estar separados porcaracteres de espacio en blanco.
<P> Esto es un párrafo con un nombre único.</P><P> Esto también es un párrafo con un nombre único.</P>
El atributoid tiene variospapeles en HTML:
- Como selector para lashojas de estilo.
- Comovínculo destino para vínculos de hipertexto.
- Como medio de hacer referencia a un elemento en particular desde unscript.
- Como nombre de un elementoOBJECT declarado.
- Para procesos generales por parte de agentes de usuario (p.ej., paraidentificar campos cuando se transfieren datos desde páginas HTML hasta unabase de datos, para traducir documentos HTML a otros formatos, etc.).
El atributoclass, por otra parte, asigna uno o más nombres de clasea un elemento; se puede decir que el elemento pertenece a estas clases. Varioselementos pueden compartir el mismo nombre de clase. El atributoclasstiene variospapeles en HTML:
- Como selector parahojas de estilo (cuando unautor desea asignar información de estilo a un conjunto de elementos).
- Para procesos generales por parte de agentes de usuario.
En el siguienteejemplo, el elementoSPANse utiliza junto con los atributosid yclass para codificar mensajesinformativos. Los mensajes aparecen tanto en inglés como en español.
<!-- Mensajes en inglés --><P><SPAN lang="en">Variable declared twice</SPAN><P><SPAN lang="en">Undeclared variable</SPAN><P><SPAN lang="en">Bad syntax for variable name</SPAN>
<!-- Mensajes en español --><P><SPAN lang="es">Variable declarada dos veces</SPAN><P><SPAN lang="es">Variable no declarada</SPAN><P><SPAN lang="es">Sintaxis incorrecta para el nombrede la variable</SPAN>
Las siguientes reglas de estilo CSS dirían a los agentes de usuario visualesque representaran los mensajes informativos en verde, los mensajes de advertenciaen 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 apareceren el mismo documento, ya que ambos comparten el mismo valor deid. Los autores pueden hacer un usomayor del atributoid para refinar la presentación de mensajes individuales, hacerlosvínculos destino, etc.
Se les puede asignar información de identificador y clase a casi todos loselementos HTML.
Supongamos, por ejemplo, que estamos escribiendo un documento sobre un lenguaje de programación. El documento debe incluir un número de ejemplospreformateados. Usamos el elementoPRE para formatear los ejemplos. También asignamos un color de fondo (verde) a todos los ejemplares del elementoPRE 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>...código del ejemplo...</PRE></BODY>Al establecer el atributoid para este ejemplo, podemos (1) crear un hipervínculo a ély (2) sustituir la información de estilo de la clase por información de estilopropia.
Nota. El atributoid comparte el mismo espacio de nombres que el atributoname cuando se usa para nombres de vínculos. Consultela sección sobrevínculos conid para más información.
Algunos de los elementos HTML que pueden aparecer enBODY 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ónse basa en varios aspectos:
- Modelo de contenido
- Generalmente, los elementos en bloque pueden contener elementos en líneay a otros elementos en bloque. Generalmente, los elementos en línea sólo puedencontener datos y a otros elementos en línea. Inherentemente a esta distinciónestructural 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 elde los elementos en línea. Generalmente, los elementos en bloque comienzan enuna nueva línea, y los elementos en línea no. Para información sobre espacioen blanco, saltos de línea, y formato de bloques, consulte la sección sobretexto.
- Direccionalidad
- Por razones técnicas relacionadas con el algoritmo de texto bidireccionalde[UNICODE],los elementos en bloque y en línea difieren en el modo de heredar lainformación de direccionalidad. Para más detalles, vea la sección sobreherencia de la dirección del texto.
Las hojas de estilo proporcionan mediospara especificar la representación de elementos arbitrarios, incluyendo larepresentación como elemento en bloque o en línea. En algunos casos, como por ejemplopara información en línea para objetos de lista, esto puede ser apropiado, pero engeneral no es aconsejable que los autores invaliden la interpretación convencionalde los elementos HTML de este modo.
La alteración del estilo de presentación tradicional de los elementos en bloquey en línea también influye en elalgoritmo de textobidireccional. Vea la sección sobreelefecto de las hojas de estilo en la bidireccionalidad para más información.
7.5.4 Agrupación de elementos: los elementosDIV ySPAN
Etiqueta inicial:obligatoria, Etiqueta final:obligatoria
Atributos definidos en otros lugares
- id,class (identificadores a nivel de documento)
- lang (información sobreel idioma),dir (direccióndel texto)
- title (título del elemento)
- style (informaciónde estilo en línea)
- align (alineación)
- onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup (eventos intrínsecos)
Los elementosDIV ySPAN, junto con los atributosid yclass, ofrecen un mecanismo genérico para añadir estructura a losdocumentos. Estos elementos especifican si su contenido es en línea (SPAN) oen bloque (DIV) pero no imponen ningún otro estilo de presentaciónal contenido. Así, los autores pueden usar estos elementos junto conhojas de estilo, el atributolang, etc., para adaptarel HTML a sus propios gustos y necesidades.
Supongamos, por ejemplo, que quisiéramos generar un documento HTML basadoen una base de datos de información sobre clientes. Como HTML no incluyeelementos que identifiquen objetos tales como "cliente", "número de teléfono","dirección de correo electrónico", etc., utilizamosDIV ySPAN para lograr los efectos estructuralesy presentacionales deseados. Podríamos usar el elementoTABLE del modo siguiente para estructurarla información:
<!-- Ejemplo de registro de la base de datos de clientes: --><!-- Nombre: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org --><DIV><P><SPAN>Información sobre el cliente:</SPAN><TABLE><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><P><SPAN>Información sobre el cliente:</SPAN><TABLE><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 hojade estilo para ajustar la presentación de estas entradas de labase de datos.
Para otro ejemplo de uso, consulte el ejemplo de la sección sobrelos atributosclass eid.
En general los agentes de usuario visuales colocan un salto de líneaantes y otro después de los elementosDIV,por ejemplo:
<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>
que normalmente se representa como:
aaaaaaaaabbbbbbbbbcccccccccc
Etiqueta inicial:obligatoria, Etiqueta final:obligatoria
Atributos definidos en otros lugares
- id,class (identificadores a nivel de documento)
- lang (información sobreel idioma),dir (direccióndel texto)
- title (título del elemento)
- style (informaciónde estilo en línea)
- align (alineación)
- onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup (eventos intrínsecos)
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 documentoautomáticamente.
Hay seis niveles de encabezados en HTML, siendoH1 el más importante yH6 elmenos importante. Los navegadores visuales pueden representar los encabezados másimportantes con fuentes más grandes que los menos importantes.
El siguiente ejemplo muestra cómo usar el elementoDIV para asociar un encabezado conla sección del documento que le sigue. Esto nos permite definir un estilo parala sección (color del fondo, fuente del texto, etc.) con hojas de estilo.
<DIV><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><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í mismonúmeros de seccióna partir de los encabezados. Sin embargo esto podría ser ofrecido porlos agentes de usuario. Pronto los lenguajes de hojas de estilo como CSSpermitirá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 quesaltarse niveles de encabezado es malapráctica. AceptanH1 H2 H1 pero no aceptanH1 H3H1 ya que se salta el nivel de encabezadoH2.
Etiqueta inicial:obligatoria, Etiqueta final:obligatoria
Atributos definidos en otros lugares
- id,class (identificadores a nivel de documento)
- lang (información sobreel idioma),dir (direccióndel texto)
- title (título del elemento)
- style (informaciónde estilo en línea)
- onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup (eventos intrínsecos)
El elementoADDRESS puede ser utilizado por los autores para proporcionar informaciónde contacto en un documento o en una parte de un documento, como por ejemplo unformulario. Este elemento suele aparecer el principio de un documento.
Por ejemplo, una página del sitio web del W3C relacionada con HTML podríaincluir 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>
[8]ページ先頭