Anexo:Etiquetas HTML/XHTML

Este artículo está actualizado según los estándares desarrollados por el W3C: HTML5, XHTML5, XML 1.1 y CSS3. Es una lista completa de propiedades y atributos de cada etiqueta de los lenguajes mencionados ordenados por orden alfabético. El propósito de este artículo es informativo y no normativo.

Descripción

Mediante esta etiqueta  se inserta un comentario oculto en la ejecución del documento pero visible en el código. Esta etiqueta no será interpretada ni ejecutada; será ignorada por el navegador. Este elemento no es un objeto. Los comentarios son de utilidad para documentar el código para otros programadores y ayudan a comprender mejor su contenido, especialmente para programadores con poca experiencia.

Aplicación

Los comentarios tendrán la siguiente estructura por línea o varias líneas:

Inicio: <!--
Comentario: Texto unicode
Cierre: -->

Atributos

Ninguno.

Compatibilidad

XHTML 1.0	XHTML 1.1	HTML 4.01	HTML 5	XML

Notas

No está permitido espacios en blanco entre el marcador de inicio de la declaración (<!) y el delimitador del comentario (--), debiendo ir todo junto (<!--), mientras que si serán aceptados los espacios en blanco entre el delimitador final del comentario (--) y el delimitador del cierre de la declaración (>). Un error frecuente es incluir una cadena de guiones ("--") dentro de un comentario, lo que puede ser interpretado como el final del comentario.^[1]

Ejemplo de uso

<![CDATA[ ]]>

Descripción

Permite introducir caracteres especiales sin que sean interpretados por el navegador como código ejecutable, sino como texto. Fue introducido inicialmente para evitar que los caracteres "<" ">" fuesen interpretados como marcado, es decir, como el inicio y final de una determinada etiqueta. Este elemento no es un objeto.

Aplicación

CDATA tendrá la siguiente estructura por línea o varias líneas:

Inicio: Ha sido borrado del lenguaje HTML
Contenido: Texto unicode.
Cierre: ]]>

Atributos

Ninguno.

Compatibilidad

XHTML 1.0	XHTML 1.1	HTML 4.01	HTML 5	XML

Notas

La única combinación de caracteres no válida en el contenido es la misma que cierra la etiqueta: ]]> ^[2], esto es, los CDATA no pueden anidarse.^[3]

Ejemplo de uso

Código	Resultado
`<![CDATA[<example> <subexample> contenido cualquiera! </subexample> </example> ]]>`	<example> <subexample> contenido cualquiera! </subexample> </example>

<!DOCTYPE >

Descripción

Con esta etiqueta se define el tipo de documento. Es una etiqueta obligatoria que muestra necesariamente el tipo de documento y optativamente el estándar que lo define. Precede obligatoriamente a HTML. Todos los elementos, etiquetas y objetos de la página web, incluidos comentarios, deberán ir después.^[4]

Aplicación

Inicio: <a><DOCTYPE</a>
Contenido: Atributos
Cierre: >

Atributos

Mediante estos atributos se especifica el estándar con el que se rige el documento y la url del DTD.
Atributos obligatorios:

Atributo	Definición
Tipodocumento	html / xhtml^[5] / math^[6] / svg^[7]

Atributos opcionales:

Atributo	Variable	Descripción
Identificador^[8]	PUBLIC / SYSTEM	Determina si se utilizará el atributo Identificador público e identificador de sistema o el atributo reservado de compatibilidad.
Public identifier^[9]	`-//W3C//DTD HTML 4.0//EN`	Determina el estándar bajo el que se rige el documento (Identificador público).
	`-//W3C//DTD HTML 4.01//EN`
	`-//W3C//DTD XHTML 1.0 Strict//EN`
	`-//W3C//DTD XHTML 1.1//EN`
System identifier^[10]	`http://www.w3.org/TR/REC-html40/strict.dtd`	Determina la url del DTD (Identificador de sistema).
	`http://www.w3.org/TR/html4/strict.dtd`
	`http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd`
	`http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd`
Legacy-tool-compatible doctype^[11]	`about:legacy-compat`	Reservado para documentos HTML que requieren compatibilidad con herramientas XML y XSLT^[12]
Iframe Srcdoc Document^[13]	`about:srcdoc`	Reservado como dirección de documento cuyo contenido procede de Iframe como respuesta al atributo srcdoc de dicho documento.^[14]

Enlace

Enlace de atributos	Muestra
`<!DOCTYPE tipodocumento >`	`<!DOCTYPE html >`
`<!DOCTYPE tipodocumento identificador & Public identifier & System identifier>`	`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`

Combinaciones posibles (en html)

Formato	Enlace de atributos	Muestra
Mínimo/Obligatorio^[15]	`<!DOCTYPE tipodocumento >`	`<!DOCTYPE html >`
Estándar^[16]	`<!DOCTYPE tipodocumento identificador Public identifier>`	`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">`
	`<!DOCTYPE tipodocumento identificador & Public identifier & System identifier>`	`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">`
	`<!DOCTYPE tipodocumento identificador & Public identifier>`	`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">`
	`<!DOCTYPE tipodocumento identificador & Public identifier & System identifier>`	`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`
	`<!DOCTYPE tipodocumento identificador & Public identifier & System identifier>`	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`
	`<!DOCTYPE tipodocumento identificador & Public identifier & System identifier>`	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">`
Especial^[17]	`<!DOCTYPE tipodocumento identificador & System identifier>`	`<!DOCTYPE html SYSTEM "about:legacy-compat">`
Especial^[17]	`<!DOCTYPE tipodocumento identificador & System identifier>`	`<!DOCTYPE html SYSTEM "about:srcdoc">`

Compatibilidad

XHTML 1.0	XHTML 1.1	HTML 4.01	HTML 5	XML

Notas

Las variables de los atributos pueden ir entre comillas " o apóstrofos '. El identificador puede escribirse en mayúsculas o minúsculas.^[18]

Ejemplo de uso

Código	Muestra
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> ...`	Este código no es ejecutable

<a>

Descripción

Permite crear un hipervínculo o definir un ancla, esto es, establece un vínculo o enlace directo con un recurso de una red determinada, o define un punto de referencia al que poder enlazar con otros hipervínculos. El vínculo directo con el recurso de una red suele facilitar el acceso al contenido del mismo mediante el uso de una interfaz de usuario determinada.^[19]

Aplicación

Inicio: <a (atributos)>
Contenido: texto
Cierre:</a>

Dentro de los atributos se debe incluir el atributo href, en el cual se indicará la url a la que apuntará el texto entre los marcadores.

Atributos

Atributo	Variable	Comentarios
name	id	Especifica que la etiqueta es un ancla o un named hyperlink.^[20] La variable id será el identificador de la etiqueta. Este Atributo está obsoleto
href	url	La variable url será la dirección URL del recurso.
Target (browsing context keywords) & (reservados/especiales) Este Atributo ha sido modificado en HTML5	`_blank`	Especifica el Contexto de navegación o marco de destino del recurso en una nueva ventana, del navegador, sin nombre.^[21]
	`_self`	Especifica el contexto de navegación o marco de destino del recurso en el contexto o marco actual en referencia al vínculo.^[22]
	`_parent`	Especifica el contexto de navegación o marco de destino del recurso en el contexto o marco padre o principal en relación con el vínculo, en caso de no existir un marco o contexto principal, el contexto de navegación o el marco de destino del recurso será el actual en referencia al vínculo (`_self`)^[23]
	`_top`	Especifica el contexto de navegación o marco de destino del recurso en el contexto padre de la ventana actual en relación con el vínculo en un entorno o contexto de varios marcos o marcos padres (cancelando cualquier estructura de marcos preexistente); en caso de no existir un marco o contexto principal, el contexto de navegación o el marco de destino del recurso será el actual en referencia al vínculo (`_self`).^[24]
target (browsing context name)	`name`	Donde name especifica el nombre del contexto de navegación o marco de destino del recurso solicitado. Un contexto de navegación en forma predeterminada, no tiene nombre si no se especifica. Una cadena válida del nombre de contexto de navegación no podrá comenzar con el carácter "`_`", este se reservará para los Target (browsing context keywords) & (reservados/especiales), y a menos tendrá la longitud de un carácter.^[25]
rel	`linktype`	Establece una relación entre el documento actual y el recurso referido por el enlace. Para utilizar otros linktype no definidos en la lista ha de utilizarse^[26]

Enlace estándar

Enlace	Muestra
`<a atributo1 & atributo2 & atributo3 ... >texto</a>`	`<a href="url" title="string" hreflang="isocode" ... >texto</a>`

<form>

Descripción

La etiqueta <form> se utiliza para crear un formulario HTML para la entrada del usuario.

Un formulario puede contener elementos de entrada como los campos de texto, casillas de verificación, botones de radio, botones de envío y mucho más. Una forma puede contener menús de selección, textarea, fieldset, legend, y los elementos de la etiqueta.

Los formularios se utilizan para pasar datos a un servidor.

Aplicación

Inicio: <form (atributos)>
Contenido: Elementos que forman parte del form: input, es la interfaz que sirve de entrada de datos al formulario.
Cierre:</form>

Atributos

Atributos obligatorios

Atributo	Valor	Definición
action	URL	Especifica dónde debe enviar el formulario de datos cuando se envía un formulario

Atributos opcionales

Atributo	Valor	Descripción	DTD
accept	Mime_type	Especifica los tipos de archivos que se pueden presentar a través de una subida de archivos .	STF
accept-charset	charset	Especifica el carácter, establece que el servidor puede manejar de forma de datos.	STF
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Especifica cómo se forman los datos deben ser codificados antes de enviarlos a un servidor	STF
method	obtener puesto	Especifica la forma de enviar el formulario de datos	STF
name	nombre	Especifica el nombre de una forma	TF
target	_blank _self _parent _top framename	Obsoleto. Especifica que la URL se abrirá la acción	TF

Atributos estándar

Atributo	Valor	Descripción	DTD
class	"nombre de la clase"	Especifica un nombre de clase de un elemento	STF
dir	"rtl"	Especifica la dirección del texto para el contenido en un elemento	STF
id	"identificación"	Especifica un identificador único para un elemento	STF
lang	"language_code"	Especifica un código de idioma para el contenido en un elemento	STF
style	"style_definition"	Especifica un estilo en línea de un elemento	STF
title	"texto"	Especifica información adicional acerca de un elemento	STF
xml: lang	"language_code"	Especifica un código de idioma para el contenido de un elemento en los documentos XHTML	STF

Compatibilidad

XHTML 1.0	XHTML 1.1	HTML 4.01	HTML 5	XML

Ejemplo de uso

Ejemplo	Muestra
`<form action="http://www..." method="post" name="formulario" enctype="application/x-www-form- urlencoded "></form>`

Este elemento es invisible, solo son visibles los elementos que hay dentro de él.

<body>

Descripción

Contiene todos los elementos visibles del documento. Esta es la parte del documento que se muestra en el navegador. Los atributos asociados a esta etiqueta son de ámbito global, esto es, especifican propiedades que afectan a todo el contenido de la página web, como color o imagen de fondo, márgenes, fuente, etc. Que, no obstante, luego pueden ser definidos de forma aislada.

Aplicación

Inicio: <body>
Contenido: #Contenido HTML
Cierre:</body>

Atributos

Atributo	Descripción	Ejemplo de uso
id	El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en el documento y puede ser usado para referirse a ese elemento.	<p id="parrafo1">Este es el primer párrafo nombrado parrafo1. Para cambiar dinámicamente las propiedades del mismo usa este identificador.</p>
class	El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento está asociado. Una clase provee atributos visuales para los elementos.	<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" por John L. Brooks</p> <p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" por John L. Brooks... y es más importante que el anterior.</p>
style	Define un estilo visual para el elemento. Es una mejor práctica definir atributos en hojas de estilos externas agrupándolos en clases. Los atributos en el parámetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma. Si estás escribiendo código XHTML te recomendamos no utilizar este atributo y probar con las clases de hojas de estilo (con el atributo "class").	<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido</p><p>Y este es otro texto sin estilo.</p>
title	Indica un título para el elemento. Usado para dar una descripción acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento.	<a title="HTMLQuick.com" href="http://www.htmlquick.com">Código HTML</a>
lang	Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido". Al escribir código XHTML la sintaxis "xml:lang" representa una alternativa preferida en XHTML 1.0 y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en").	<p lang="en">This is a paragraph in english.</p> <p lang="es">Este es un párrafo en español.</p>
dir	Especifica la dirección de texto del contenido y atributos del elemento, así como la direccionalidad de las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas: RTL: Derecha a izquierda, LTR: Izquierda a derecha.	<q lang="he" dir="rtl">...Una cita en Hebreo...</q>

Compatibilidad

XHTML 1.0	XHTML 1.1	HTML 4.01	HTML 5	XML

Notas

Las propiedades CSS definidas en esta etiqueta pueden ser modificadas de forma aislada. Por ejemplo, si de forma global se asigna la fuente Verdana, a un determinado elemento como <p> o <div> pueden asignárseles otras fuentes de forma totalmente independiente. Esta característica es aplicable a cualquier elemento.

<table>

Descripción

Mediante la etiqueta <table> se define una tabla que se divide en filas, divididas a su vez en celdas de datos donde se pueden contener texto, enlaces, imágenes, listas, formularios, otras tablas, etc...

<tr>: fila de tabla

<td>: celda de datos

<th>: celda de cabecera

Atributos

Atributo	Variable	Comentarios
border		fronteras del espacio que va a ocupar la tabla
colspan		unificación de celdas para utilizarlas como única
cellpadding		distancia entre contenidos y bordes de las celdas
width		indica el ancho que ocupa dentro de la página
above		borde solo en la parte de arriba de la tabla
below		borde solo en la parte de abajo de la tabla
hsides		borde solo en las partes de arriba y abajo de la tabla
vsides		borde solo en las partes de los lados de la tabla
lhs		borde solo en la parte izquierda de la tabla
rhs		borde solo en la parte derecha de la tabla

Compatibilidad

XHTML 1.0	XHTML 1.1	HTML 4.01	HTML 5	XML

Ejemplo de uso

Código	Muestra
`<table border="2" cellpadding="5"> <tr> <td> <p>Ejemplo de la elaboración de una tabla</p> <p>con algunos de sus atributos</p> </td> <td> <img src="http://www.w3schools.com/images/w3html.gif"> </td> </tr> </table>`

Notas

Se pueden utilizar todos los atributos estándar para colocar dentro de las celdas diferentes elementos, por ejemplo: link (href=), imágenes (src=), etc….

<input >

Descripción

La etiqueta <input> se utiliza para seleccionar la información del usuario. Un campo de entrada puede variar de muchas maneras, dependiendo del tipo de atributo. Un campo de entrada puede ser un campo de texto, una casilla de verificación, un campo de contraseña, un botón y mucho más.

Aplicación

Inicio: <input
Contenido: Atributos
Cierre: />

Atributos

Mediante estos atributos se especifican determinadas variables asociadas a las propiedades del objeto.

atributo	valor	Descripción	DTD
accept	MIME_type	Especifica los tipos de archivos que se pueden presentar a través de un archivo de carga (solo para type = "file")	STF
align	left right top middle bottom	Obsoleto. Utilice estilos en su lugar. Especifica la alineación de una imagen de entrada (solo para type = "image")	TF
alt	text	Especifica un texto alternativo para una imagen de entrada (solo para type = "image")	STF
checked	checked	Especifica que un elemento de entrada debe ser preseleccionado cuando se carga la página (por type = "checkbox" o type = "radio")	STF
disabled	disabled	Especifica que un elemento de entrada debe ser desactivado cuando se carga la página	STF
maxlength	number	Especifica la longitud máxima (en caracteres) de un campo de entrada (por type = "text" o type = "password")	STF
name	name	Especifica un nombre para un elemento de entrada, que luego podrá ser referenciado mediante la variable global get o post de PHP. p.e: `$_POST['name']`	STF
readonly	readonly	Especifica que un campo de entrada debe ser de solo lectura (por type = "text" o type = "password")
size	number	Especifica el ancho de un campo de entrada	STF
src	URL	Especifica el URL de una imagen para mostrar como un botón de envío (solo para type = "image")	STF
type	button checkbox file hidden image password radio reset submit text	Especifica el tipo de un elemento de entrada	STF
value	value	Especifica el valor de un elemento de entrada, que luego será el valor de la variable POST o GET del recurso solicitado en la petición.	STF

Atributos estándar La etiqueta <input> admite los atributos siguientes normas:

Atributo	Valor	Descripción	DTD
accesskey	character	Especifica un atajo de teclado para acceder a un elemento	STF
class	classname	Especifica un nombre de clase de un elemento	STF
dir	rtl ltr	Especifica la dirección del texto para el contenido en un elemento	STF
id	id	Especifica un identificador único para un elemento	STF
lang	language_code	Especifica un código de idioma para el contenido en un elemento	STF
style	style_definition	Especifica un estilo en línea de un elemento	STF
tabindex	number	Especifica el orden de tabulación de un elemento	STF
title	text	Especifica información adicional acerca de un elemento	STF
xml: lang	language_code	Especifica un código de idioma para el contenido de un elemento, en los documentos XHTML	STF

Notas

Diferencias entre HTML y XHTMLEn HTML, la etiqueta <input> no tiene etiqueta de cierre.En XHTML, la etiqueta <input> deben estar debidamente cerrados, así <input />.

Consejo, utilice el <label> etiqueta para definir etiquetas para los elementos de entrada.

Compatibilidad

XHTML 1.0	XHTML 1.1	HTML 4.01	HTML 5	XML

Ejemplo de uso

<colgroup>

Descripción

La etiqueta <colgroup> se utiliza en una tabla para agrupar columnas.La etiqueta <colgroup> es útil para la aplicación de estilos a columnas enteras, en lugar de repetir los estilos para cada celda o para cada una de las filas.La etiqueta <colgroup> solo se puede utilizar dentro de una tabla.

Atributos opcionales

La etiqueta <colgroup> admite los atributos siguientes:

Atributo	Valor	Descripción	DTD
align	left right Center Justify Char	Alinea el contenido de un grupo de columnas	SFT
char	character	Alinea el contenido de un grupo de columnas a un carácter.	SFT
charoff	number	Establece el número de caracteres que se ajustarán al contenido a partir del carácter especificado por el atributo.	SFT
span	number	Especifica el número de columnas en una tabla	SFT
valign	top middle bottom baseline	Alinea el contenido en vertical de un grupo de columnas.	SFT
width	pixels % relative_length	Especifica el ancho de un grupo de columnas.	SFT

Compatibilidad con navegadores

La etiqueta <colgroup> es compatible con los navegadores Internet Explorer y Opera. En el resto de navegadores solo se pueden utilizar los atributos “span” y “width”.

Ejemplo

<table width="100%" border="1"> <colgroup span="2" align="left"></colgroup> <colgroup align="right" style="color:#0000FF;"></colgroup> <tr> <th>MICHEL</th> <th>ISMAEL</th> <th>VÍCTOR</th> </tr> <tr> <td>EJEMPLO DE COLGROUP</td> <td>EJEMPLO DE COLGROUP</td> <td>EJEMPLO DE COLGROUP</td> </tr> </table>

<textarea>

Descripción

El tag <textarea> crea un control para entrada de texto. Este control provee un campo rectangular que acepta la entrada de texto en múltiples líneas.

Aplicación

Inicio: <textarea
Contenido: Atributos
Cierre: />

Atributos

Atributos requeridos:

Atributo	Valor	Descripción
cols	número	Especifica el ancho visible del textarea.
rows	número	Especifica el número de filas visibles en un área de texto.

Atributos opcionales:

Atributo	Valor	Descripción
Disable	discapacitado	Especifica que el texto de la zona debe ser desactivado.
name	nombre del textarea	Especifica el nombre de la zona de texto.
readonly	solo lectura	Especifica que el texto del área debe ser de solo lectura

Compatibilidad

XHTML 1.0	XHTML 1.1	HTML 4.01	HTML 5	XML

<button >

Descripción

La etiqueta <button> define un botón de pulsación, al que se puede dar varias funciones y llevar incluido texto, imagen, etc. Siempre debe llevar especificado un atributo al escribirlo en el código.

Aplicación

Inicio: <button
Contenido: Atributos
Cierre: >

Atributos

Indican las distintas funcionalidades que puede tener el botón que insertemos dentro del HTML.

Atributo	Variable	Comentarios
disabled	disabled	Especifica un botón no funcional (desactivado).
name	name	Especifica el nombre que se incluye en el botón.
type	`button`	Botón genérico que hace llamadas a funciones Javascript programadas.
	`reset`	Indica que la función del botón es mostrar los datos por defecto.
	`submit`	Especifica la función del botón para enviar la información introducida.
value	`text`	Muestra el valor que aparece indicado dentro del botón.

Compatibilidad

XHTML 1.0	XHTML 1.1	HTML 4.01	HTML 5	XML

Ejemplo de uso

Código	Descripción
<button type="button">Clic</button>	Botón genérico que hace llamadas a funciones Javascript programadas.
<button type="reset" value="resetear">Reset</button>	Botón que sirve para resetear los valores del campo por defecto.
<button type="submit" value="Submit">Enviar</button>	Botón que envía los datos introducidos por el usuario (ej. en un formulario).

Referencias

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]