Especificaciones HTML 3.2

Recomendaciones W3C 14-Enero-1997 Documento basado en las recomendaciones del W3C

Disponible en el Directorio Internet en Español JOPINET - http://www.jopinet.com

Contenidos

1.-La estructura de documentos HTML
2.-Cabecera (HEAD) y sus parametros
3.-Cuerpo (BODY) y sus parametros

1.-Estructura de los documentos HTML

El lenguaje de marcas hipertexto (HyperText Markup Language HTML) es un simple lenguaje de marcas, usado para crear documentos hipertexto transportables de una plataforma a otra. Los documentos HTML son documentos SGML con una semantica genérica para representar información dentro de un gran rango de aplicaciones.

Los documentos HTML 3.2 empiezan con la declaración <!DOCTYPE> seguida por la etiqueta HTML, la cual contiene HEAD y luego BODY

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
  <HTML>
  <HEAD>
  <TITLE>Aqui va el titulo</TITLE>
  ... otros elementos de cabecera

  </HEAD>
  <BODY>
  ... cuerpo del documento
  </BODY>
  </HTML>

2.-Cabecera (HEAD) y sus parámetros.

La cabecera puede contener cualquiera de los siguientes elementos , sin importar el orden:

TITLE define el titulo del documento

ISINDEX para buscadores de palabras simples. Consultar el atributo PROMPT

BASE define la URL de base para adecuar las URLs. relativas

SCRIPT reservado para usos con lenguajes "script" como javascript

STYLE reservado para definir hojas de estilo

META usado para añadir información suplementaria (meta info tal como pares de name/value)

LINK usado para definir relaciones con otros documentos.

TITLE, SCRIPT y STYLE requieren tags de inicio y fin. Los otros elementos no.

TITLE

Ejemplo de titulo - TITLE :

    <TITLE>Manual HTML 3.2</TITLE>

STYLE

Hojas de estilo. En preparación

SCRIPT

En preparación

ISINDEX

ISINDEX indica que se pueden realizar busquedas mediante cadenas de texto. No hay restricciones sobre el número de caracteres. El atributo PROMPT puede ser usado para especificar la cadena de texto a buscar:

    <ISINDEX PROMPT="Search Phrase">

Por ejemplo, si la cadena de busqueda es "bacalao en su salsa" y la URL de base esta definida como:

    http://www.jotajo.com

entonces la cadena generada es:

    http://www.jotajo.com/?bacalao+en+su+salsa"

Los espacios se convierten en signo "+"

Nota , Las cadenas estan en la práctica restringidas al conjunto de caracteres Latin-1

BASE

El elemento BASE es usado para especificar la URL en referencias relativas. Por ejemplo:

    <BASE href="http://www.intel.com/intro.html">
     ...
    <IMG SRC="icons/logo.gif">

La imagen esta referenciada a:

    http://www.intel.com/icons/logo.gif

En ausencia de BASE, será usado la URL en donde se encuentra el elemento.

LINK

LINK es un método de relacionar el documento en curso con otros documentos o recursos. Acutalmente está en deshuso

3.-Cuerpo (BODY) y sus parámetros.

Body contiene el cuerpo del documento. Existe una gran cantidad de elementos o tags que pueden ser usados:

Cabeceras (H1 - H6)
ADDRESS
Elementos de bloques
Elementos de texto

Los atributos son: BACKGROUND, BGCOLOR, TEXT, LINK, VLINK and ALINK.

Por ejemplo:

 <body bgcolor=white text=#fffff link=red vlink=maroon alink=fuchsia>

bgcolor: Especifica el color de fondo del documento.
text
link
vlink: Especifica el color del texto de un enlace que ya ha sido visitado
alink: Especifica el color del texto de un enlace justo en el momento en el que se esta pulsando sobre él
background: Especifica la imagen que vamos a utilizar como fondo de página.

Los colores pueden darse en formato RGB o como nombres admitidos, como son los siguientes (Windows VGA palette.)

**Nombre de Colores y sus valores RGB**
	Black = "#000000"		Green = "#008000"
	Silver = "#C0C0C0"		Lime = "#00FF00"
	Gray = "#808080"		Olive = "#808000"
	White = "#FFFFFF"		Yellow = "#FFFF00"
	Maroon = "#800000"		Navy = "#000080"
	Red = "#FF0000"		Blue = "#0000FF"
	Purple = "#800080"		Teal = "#008080"
	Fuchsia = "#FF00FF"		Aqua = "#00FFFF"

Cabeceras

H1, H2, H3, H4, H5 y H6 son usados para definir cabeceras de documentos. Necesitan tag de inicio y fin. Los tamaños van desde H1, el más grande hasta H6, el más pequeño. Opcionalmente se puede utilizar el atributo ALIGN

  <H1 ALIGN=CENTER> ... cabecera centrada ... </H1>

Por defecto es left

ADDRESS

ADDRESS requiere tags de inicio y fin. Se usa para realzar direcciones, autores,...

Newsletter editor 
J.R. Brown 
8723 Buena Vista, Smallville, CT 01234 
Tel: +1 (123) 456 7890
</ADDRESS>

Elementos de Bloques

P parrafos: Requieren tags de inicio.Se puede usar el atributo align tal como 
UL listas desordenadas: Tags de inicio y fin. Contiene uno o más elementos LI .
OL listas ordenadas: Tags de inicio y fin. Contiene uno o más elementos LI .
DL listas de definición: Tags de inicio y fin. Contiene uno o más elementos DT para los item principales y DD para las definiciones
PRE texto preformateado: Tags de inicio y fin. El texto que se incluye en él, aparece tal como se crea
DIV divisiones de documentos: Tags de inicio y fin. Contiene uno o más elementos LI . Se puede usar con ALIGN
CENTER centrado de texto y/o bloques: Tags de inicio y fin..
BLOCKQUOTE quoteado de pasajes: Tags de inicio y fin. Para quotear texto tipicamente con márgenes
FORM formularios
ISINDEX
HR lineas horizontales: Tag de inicio. Atributos posibles ALIGN, NOSHADE, SIZE y WIDTH.
TABLE tablas: Tags de inicio y fin.Pueden empezar con un opcional CAPTION seguido de uno o mas TR que define las filas. Cada fila es definida por atributos TH (si es cabecera) o TD . atributos opcionales para TABLE son WIDTH, BORDER, CELLSPACING and CELLPADDING.

Párrafos

P produce salto de línea (doble salto), BR salto simple

Example:

    <P>Primer párrafo.
    <P>Segundo párrafo.

Se puede utilizar el atributo align
align=left: Alineado a la izquierda
align=center: Centrado
align=right: A la derecha

como

<p align=center>Centrado.
<p align=right>A la derecha.

Por defecto es left

Listas

Listas desordenadas

Listas desordenadas tiene la siguiente forma:

    <UL>
      <LI> ... primer item
      <LI> ... segundo item
      ...
    </UL>

Tags de inicio y fin son necesarios. LI define cada nueva línea </li> es opcional..

El atributo TYPE define el tipo: circulo, cuadrado, ...

with <li type=disc>
with <li type=square>
with <li type=circle>

Listas Ordenadas

    <OL>
      <LI> ... primer item
      <LI> ... segundo item
      ...
    </OL>

OL START puede ser usado para iniciar la cuenta en alguna cifra

OL TYPE permite elegir el estilo de numeración u ordenación

Type	Estilo de Numeración
1	números	1, 2, 3, ...
a	alfabeto en minúsculas	a, b, c, ...
A	alfabeto en mayúsculas	A, B, C, ...
i	números romanos en minúsculas	i, ii, iii, ...
I	números romanos en mayúsculas	I, II, III, ...

Listas de Definición

Tienen la siguiente forma:

  <DL>
    <DT> nombre del término
    <DD> definición
    ...
  </DL>

Se pueden encadenar DT:

<DL>
<DT>Term 1<dd>Pimer término.
<DT>Term 2<dd>Segundo término.
</DL>

Lo cual se verá así:

Term 1: Primer término.
Term 2: Segundo término.

DIR and MENU

Similar a UL

Texto PREformateado

Usando este elemento, el texto incluido entre el inicio y el final será visualizado tal como está escrito.

Ejemplo:

<PRE>
       Esto es un ejemplo acerca de como

el texto aparecera ,
           lo puedes probar

</pre>

XMP, LISTING and PLAINTEXT

Son elementos obsoletos precedentes al elemento PRE. Se recomienda no usarlos

DIV and CENTER

DIV puede ser usado para crear una estructura basada en una jerarquia de divisiones. El atributo ALIGN puede ser usado para las alineaciones horizontales ( LEFT, CENTER o RIGHT), y se define igual que lo haciamos con .

CENTER es equivalente a DIV ALIGN=CENTER. Tanto DIV como CENTER requieren tags de inicio y fin.

BLOCKQUOTE

Se suele usar para cerrar un bloque que hace referencia a trabajos o citas de texto ajenos. Requiere tags de inicio y fin.

FORM

Se utiliza para definir formularios dentro de un documento. Requiere tags de inicio y fin. FORM puede contener un amplio conjunto de marcas HTML incluyendo muchos tipo de campos form talescomo simple o multiples selecciones, boton o grupo de botones tipo radio, checkboxes, menus, .....

action: Especifica la URL que será usada para enviar el formulario via e-mail (action="mailto:foo@bar.com"), o usado para invocar un cgi o similar via HTTP, (action="http://www.acme.com/cgi-local/register.pl")
method: Si el atributo action especifica un servidor HTTP , method determina el método que será usado para mandar el contenido del formulario. Puede ser GET o POST. Por defecto es GET.
enctype: Define el tipo de codificación que se empleará. Por defecto es application/x-www-form-urlencoded.

Campos dentro de Form

INPUT, SELECT y TEXTAREA sólo son permitidos dentro de un elemento FORM s. INPUT puede ser usado con una gran variedad de tags tales como: simples líneas de texto, campos tipo password , celdas checkboxes, botones radio , botones submit y reset , campos ocultos (hidden) , envio (upload) de ficheros, y botones de imagenes. SELECT es usado para simples o multiples selecciones. TEXTAREA define campos de texto multilíneas

INPUT campos de texto, , botones radio , check boxes, ...

type

Define el tipo de la entrada input correspondiente:

name: Nombre que identifica el campo.
value: Inicializa el campo con un valor o crea una etiqueta de texto para los botones de envio de formulario (submit) o de reseteo (reset)
checked: Inicializa los botones checkboxes o radio con el valor que contenga este tag.
size: Tamaño en caracteres de los campos de texto
maxlength: Longitud máxima de los caracteres permitidos en este campo
src: Especifica la dirección o URL de una imagen para usarla como botón de envio (submit).
align: Alinear la imagen (caso anterior). Posibles valores: top, middle, bottom, left or right. Por defecto es bottom.

SELECT - SELECCION

SELECT es usado para definir listas despegables de una selección o de multiple selección. SELECT requiere tags de inicio y fin. Se crea una lista con menu drop-down .

Example:

    <SELECT NAME="Edad">
    <OPTION VALUE=a>Menos de 18
    <OPTION VALUE=b>Más de 18
    <OPTION VALUE=c>Más de 30
    <OPTION VALUE=d>Más de 45
    </SELECT>

Atributos de SELECT :

name: Identifica la elección cuando el formulario es enviado
size: Número de elementos que serán visibles siempre en el menú.
multiple: Permite realizar multiples elecciones. Si no existe este atributo sólo se podrá elegir una.

Atributos de OPTION :

selected: Indica que el elemento por defecto seleccionado es el que contiene este atributo.
value: Especifica el valor de enviará cada elemento seleccionado cuando el formulario sea enviado.

TEXTAREA - Area de texto con múltiples lineas

TEXTAREA requiere tags de inicio y fin.

Ejemplo:

    <TEXTAREA NAME=address ROWS=4 COLS=40>
    Escribe aquí tu dirección ...
    </TEXTAREA>

Los caracteres son ISO Latin-1, a menos que el servidor indique que soporta otros

name: Identifica el campor textarea.
rows: Número de líneas visibles.
cols

HR - límeas horizontales

HR sólo requiere tag de inicio. Los atributos son: ALIGN, NOSHADE, SIZE and WIDTH.

align: Alineamiento de la línea. A la izquierda, centrado, o a la derecha (align=left, align=center o align=right respectivamente). Por defecto es centrado.
noshade: La linea se crea con un sólo color.
size: Tamaño de la línea (altura) en pixels.
width: Anchura de la línea en pixels (width=100) o como porcentaje del tamaño que exista en el navegador en ese momento (width="50%"). Por defecto es 100%.

Tables

Las tablas tienen una forma general del tipo:

  <TABLE BORDER=3 CELLSPACING=2 CELLPADDING=2 WIDTH="80%">
  <CAPTION> ... Titulo deseado ... </CAPTION>
  <TR><TD> celda primera <TD> celda segunda
  <TR> ...
  ...
  </TABLE>

Los atributos de TABLE son todos opcionales. Por defecto aparecen con un borde y la tabla se ajusta automaticamente al tamaño del contenido, aunque siempre se pueden utilizar el atributo WIDTH . BORDER, CELLSPACING y CELLPADDING dan control sobre la pariencia de la tabla. Caption permite titulo al principio o final de la tabla dependiendo del atributo ALIGN.

Cada principio de fila contiene un TR.Dentro de el las celdas se configuran con TD (TH si es la cabecera). TH y TD soportan atributos como: ALIGN y VALIGN para alinear el contenido de la celda, ROWSPAN y COLSPAN para celdas que ocupen más de un espacio reservado para cada celda en princio (columnas o filas). Las celdas pueden contener gran variedad de elementos de bloques y texto.

TABLE requiere siempre tags de inicio y fin y soporta los siguientes atributos:

align: LEFT, CENTER o RIGHT. Especifica la alineación horizontal .
width: Ancho de la tabla. Puede darse en número de pixels o en tanto por ciento del espacio entre márgenes que haya en cada momento (WIDTH=212 o WIDTH="80%").
border: Especifica el tamaño del borde de la tabla (BORDER=4). Por defecto es 1 y se puede anular con border=0
cellspacing: Define el espacio de separación del borde de una celda con las contiguas (CELLSPACING=10).
cellpadding: Define el espacio entre el borde cada celda y el contenido.

Otros atributos que no están incluidos en las especificaciones por ser particularidades de browsers son:

Bordercolor:color del borde

Background: establece una imagen gif o jpg para la tabla

Bgcolor: color de fondo de celdas

El título, definido por CAPTION puede tener uno de estos atributos. ALIGN=TOP o ALIGN=BOTTOM. El primero posiciona el titulo al principio del documento, y el segundo debajo del documento.Requiere tags de inicio y fin.

TR requiere unicamente tag de inicio. Puede contener 2 atributos:

align: Define la alineación horizontal del contenido de la celda. Posibles valores: LEFT, CENTER o RIGHT.
valign: Define la alineación vertical del contenido de la celda. posibles valores: TOP, MIDDLE o BOTTOM. Arriba, en medio o abajo, respectivamente.

TH es usado para cabeceras de celdas y TD para celdas. Las diferencias suelen ser diferente tipo de letra. requieren sólo tag de inicio Atributos posibles:

nowrap: The presence of this attribute disables automatic word wrap within the contents of this cell (e.g. <TD NOWRAP>). This is equivalent to using the   entity for non-breaking spaces within the content of the cell.
rowspan: Filas que ocupará la celda.
colspan: Columnas que ocupará la celda.
align: LEFT, CENTER oRIGHT. Alineación de la celda.
valign: TOP, MIDDLE o BOTTOM. Por defecto es middle.
width: Anchura de la celda en pixels. Se utiliza si no causa conflictos con otras celdas.
height: Altura de la celda en pixels. Se utiliza si no causa conflictos con otras celdas..

Font style elements

Requieren tag de inicio y fin

TT teletipo o texto monoespaciado

I italica
B grueso
U subrayado
STRIKE ~~texto tachado~~
BIG texto en fuente grande
SMALL texto en fuente pequeña
SUB _{texto tipo subindice}
SUP ^{texto tipo superindice}

Elementos de frases

Requieren tags de inicio y fin.

EM enfatizado. Normalmente en fuente itálica

STRONG Similar a , utiliza fuente bold
DFN define terminos
CODEusado para visualizar código de programa
SAMPusado para visualizar salidas de programas, scripts etc.
KBDusado para texto que debe ser tecleado por el usuario
VAR usado para variables y argumentos de comandos
CITE usado para citas o referencias a otros documentos

Special Text level Elements

A (Anchor), IMG, APPLET, FONT, BASEFONT, BR and MAP.

The A (anchor) element

Anchors can't be nested and always require start and end tags. They are used to define hypertext links and also to define named locations for use as targets for hypertext links, e.g.

   The way to <a href="hands-on.html">happiness</a>.

and also to define named locations for use as targets for hypertext links, e.g.

   <h2><a name=mit>545 Tech Square - Hacker's Paradise</a></h2>

name: This should be a string defining unique name for the scope of the current HTML document. NAME is used to associate a name with this part of a document for use with URLs that target a named section of a document.
href: Specifies a URL acting as a network address for the linked resource. This could be another HTML document, a PDF file or an image etc.
rel: The forward relationship also known as the "link type". It can be used to determine to how deal with the linked resource when printing out a collection of linked resources.
rev: This defines a reverse relationship. A link from document A to document B with REV=relation expresses the same relationship as a link from B to A with REL=relation. REV=made is sometimes used to identify the document author, either the author's email address with a mailto URL, or a link to the author's home page.
title: An advisory title for the linked resource.

IMG - inline images

Used to insert images. IMG is an empty element and so the end tag is forbidden. Images can be positioned vertically relative to the current textline or floated to the left or right. See BR with the CLEAR attribute for control over textflow.

e.g.  <IMG SRC="canyon.gif" ALT="Grand Canyon">

IMG elements support the following attributes:

src: This attribute is required for every IMG element. It specifies a URL for the image resource, for instance a GIF, JPEG or PNG image file.
alt: This is used to provide a text description of the image and is vital for interoperability with speech-based and text only user agents.
align: This specifies how the image is positioned relative to the current textline in which it occurs:
width: Specifies the intended width of the image in pixels. When given together with the height, this allows user agents to reserve screen space for the image before the image data has arrived over the network.
height: Specifies the intended height of the image in pixels. When given together with the width, this allows user agents to reserve screen space for the image before the image data has arrived over the network.
border: When the IMG element appears as part of a hypertext link, the user agent will generally indicate this by drawing a colored border (typically blue) around the image. This attribute can be used to set the width of this border in pixels. Use border=0 to suppress the border altogether. User agents are recommended to provide additional cues that the image is clickable, e.g. by changing the mouse pointer.
hspace: This can be used to provide white space to the immediate left and right of the image. The HSPACE attribute sets the width of this white space in pixels. By default HSPACE is a small non-zero number.
vspace: This can be used to provide white space above and below the image The VSPACE attribute sets the height of this white space in pixels. By default VSPACE is a small non-zero number.
usemap: This can be used to give a URL fragment identifier for a client-side image map defined with the MAP element.
ismap: When the IMG element is part of a hypertext link, and the user clicks on the image, the ISMAP attribute causes the location to be passed to the server. This mechanism causes problems for text-only and speech-based user agents. Whenever its possible to do so use the MAP element instead.

Here is an example of how you use ISMAP:

<a href="/cgibin/navbar.map"><img src=navbar.gif ismap border=0></a>

The location clicked is passed to the server as follows. The user agent derives a new URL from the URL specified by the HREF attribute by appending `?' the x coordinate `,' and the y coordinate of the location in pixels. The link is then followed using the new URL. For instance, if the user clicked at at the location x=10, y=27 then the derived URL will be: "/cgibin/navbar.map?10,27". It is generally a good idea to suppress the border and use graphical idioms to indicate that the image is clickable.

Note that pixel values refer to screen pixels, and should be multiplied by an appropriate factor when rendering to very high resolution devices such as laser printers. For instance if a user agent has a display with 75 pixels per inch and is rendering to a laser printer with 600 dots per inch, then the pixel values given in HTML attributes should be multiplied by a factor of 8.

APPLET (Java Applets)

Requires start and end tags. This element is supported by all Java enabled browsers. It allows you to embed a Java applet into HTML documents. APPLET uses associated PARAM elements to pass parameters to the applet. Following the PARAM elements, the content of APPLET elements should be used to provide an alternative to the applet for user agents that don't support Java. It is restricted to text-level markup as defined by the %text entity in the DTD. Java-compatible browsers ignore this extra HTML code. You can use it to show a snapshot of the applet running, with text explaining what the applet does. Other possibilities for this area are a link to a page that is more useful for the Java-ignorant browser, or text that taunts the user for not having a Java-compatible browser.

Here is a simple example of a Java applet:

    <applet code="Bubbles.class" width=500 height=500>
    Java applet that draws animated bubbles.
    </applet>

Here is another one using a PARAM element:

    <applet code="AudioItem" width=15 height=15>
    <param name=snd value="Hello.au|Welcome.au">
    Java applet that plays a welcoming sound.
    </applet>

codebase = codebaseURL: This optional attribute specifies the base URL of the applet -- the directory or folder that contains the applet's code. If this attribute is not specified, then the document's URL is used.
code = appletFile: This required attribute gives the name of the file that contains the applet's compiled Applet subclass. This file is relative to the base URL of the applet. It cannot be absolute.
alt = alternateText: This optional attribute specifies any text that should be displayed if the browser understands the APPLET tag but can't run Java applets.
name = appletInstanceName: This optional attribute specifies a name for the applet instance, which makes it possible for applets on the same page to find (and communicate with) each other.
width = pixels: These required attributes give the initial width and height (in pixels) of the applet display area, not counting any windows or dialogs that the applet brings up.
align = alignment: This attribute specifies the alignment of the applet. This attribute is defined in exactly the same way as the IMG element. The permitted values are: top, middle, bottom, left and right. The default is bottom.
vspace = pixels: These optional attributes specify the number of pixels above and below the applet (VSPACE) and on each side of the applet (HSPACE). They're treated the same way as the IMG element's VSPACE and HSPACE attributes.

The PARAM element is used to pass named parameters to applet:

   <PARAM NAME = appletParameter VALUE = value>

PARAM elements are the only way to specify applet-specific parameters. Applets read user-specified values for parameters with the getParameter() method.

name = applet parameter name
value = parameter value

SGML character entities such as é and ¹ are expanded before the parameter value is passed to the applet. To include an & character use &.

Note: PARAM elements should be placed at the start of the content for the APPLET element. This is not specified as part of the DTD due to technicalities with SGML mixed content models.

FONT

Requires start and end tags. This allows you to change the font size and/or color for the enclosed text. The attributes are: SIZE and COLOR. Font sizes are given in terms of a scalar range defined by the user agent with no direct mapping to point sizes etc. The FONT element may be phased out in future revisions to HTML.

size: This sets the font size for the contents of the font element. You can set size to an integer ranging from 1 to 7 for an absolute font size, or specify a relative font size with a signed integer value, e.g. size="+1" or size="-2". This is mapped to an absolute font size by adding the current base font size as set by the BASEFONT element (see below).
color: Used to set the color to stroke the text. Colors are given as RGB in hexadecimal notation or as one of 16 widely understood color names defined as per the BGCOLOR attribute on the BODY element.

Some user agents also support a FACE attribute which accepts a comma separated list of font names in order of preference. This is used to search for an installed font with the corresponding name. FACE is not part of HTML 3.2.

The following shows the effects of setting font to absolute sizes:

size=1 size=2 size=3 size=4 size=5 size=6 size=7

The following shows the effect of relative font sizes using a base font size of 3:

size=-4 size=-3 size=-2 size=-1 size=+1 size=+2 size=+3 size=+4

The same thing with a base font size of 6:

size=-4 size=-3 size=-2 size=-1 size=+1 size=+2 size=+3 size=+4

BASEFONT

Used to set the base font size. BASEFONT is an empty element so the end tag is forbidden. The SIZE attribute is an integer value ranging from 1 to 7. The base font size applies to the normal and preformatted text but not to headings, except where these are modified using the FONT element with a relative font size.

BR

Used to force a line break. This is an empty element so the end tag is forbidden. The CLEAR attribute can be used to move down past floating images on either margin.   moves down past floating images on the left margin,   does the same for floating images on the right margin, while   does the same for such images on both left and right margins.

MAP

The MAP element provides a mechanism for client-side image maps. These can be placed in the same document or grouped in a separate document although this isn't yet widely supported. The MAP element requires start and end tags. It contains one or more AREA elements that specify hotzones on the associated image and bind these hotzones to URLs.

Here is a simple example for a graphical navigational toolbar:

<img src="navbar.gif" border=0 usemap="#map1">

<map name="map1">
 <area href=guide.html alt="Access Guide" shape=rect coords="0,0,118,28">
 <area href=search.html alt="Search" shape=rect coords="184,0,276,28">
 <area href=shortcut.html alt="Go" shape=rect coords="118,0,184,28">
 <area href=top10.html alt="Top Ten" shape=rect coords="276,0,373,28">
</map>

The MAP element has one attribute NAME which is used to associate a name with a map. This is then used by the USEMAP attribute on the IMG element to reference the map via a URL fragment identifier. Note that the value of the NAME attribute is case sensitive.

The AREA element is an empty element and so the end tag is forbidden. It takes the following attributes: SHAPE, COORDS, HREF, NOHREF and ALT. The SHAPE and COORDS attributes define a region on the image. If the SHAPE attribute is omitted, SHAPE="RECT" is assumed.

shape=rect coords="left-x, top-y, right-x, bottom-y"

shape=circle coords="center-x, center-y, radius"

shape=poly coords="x₁,y₁, x₂,y₂, x₃,y₃, ..."

Where x and y are measured in pixels from the left/top of the associated image. If x and y values are given with a percent sign as a suffix, the values should be interpreted as percentages of the image's width and height, respectively. For example:

   SHAPE=RECT COORDS="0, 0, 50%, 100%"

The HREF attribute gives a URL for the target of the hypertext link. The NOHREF attribute is used when you want to define a region that doesn't act as a hotzone. This is useful when you want to cut a hole in an underlying region acting as a hotzone.

If two or more regions overlap, the region defined first in the map definition takes precedence over subsequent regions. This means that AREA elements with NOHREF should generally be placed before ones with the HREF attribute.

The ALT attribute is used to provide text labels which can be displayed in the status line as the mouse or other pointing device is moved over hotzones, or for constructing a textual menu for non-graphical user agents. Authors are strongly recommended to provide meaningful ALT attributes to support interoperability with speech-based or text-only user agents.