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.

<!-- --> editar

Descripción editar

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 editar

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

Atributos editar

Ninguno.

Compatibilidad editar

XHTML 1.0 XHTML 1.1 HTML 4.01 HTML 5 XML
              

Notas editar

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 editar

<!-- Comentario de ejemplo
que ocupa dos líneas-->

<![CDATA[   ]]> editar

Descripción editar

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 editar

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

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

Atributos editar

Ninguno.

Compatibilidad editar

XHTML 1.0 XHTML 1.1 HTML 4.01 HTML 5 XML
              

Notas editar

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 editar

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

<!DOCTYPE > editar

Descripción editar

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 editar

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

Atributos editar

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">
<!DOCTYPE tipodocumento identificador & System identifier> <!DOCTYPE html SYSTEM "about:srcdoc">

Compatibilidad editar

XHTML 1.0 XHTML 1.1 HTML 4.01 HTML 5 XML
              

Notas editar

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 editar

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> editar

Descripción editar

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 editar

  • 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 editar

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> editar

Descripción editar

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 editar

  • 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 editar

Atributos obligatorios editar

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


Atributos opcionales editar

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 editar

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 editar

XHTML 1.0 XHTML 1.1 HTML 4.01 HTML 5 XML
              

Ejemplo de uso editar

EjemploMuestra
<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> editar

Descripción editar

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 editar

Atributos editar

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 editar

XHTML 1.0 XHTML 1.1 HTML 4.01 HTML 5 XML
              

Notas editar

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> editar

Descripción editar

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 editar

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 editar

XHTML 1.0 XHTML 1.1 HTML 4.01 HTML 5 XML
              

Ejemplo de uso editar

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 editar

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 > editar

Descripción editar

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 editar

  • Inicio: <input
  • Contenido: Atributos
  • Cierre: />

Atributos editar

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 editar

Diferencias entre HTML y XHTML En 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 editar

XHTML 1.0 XHTML 1.1 HTML 4.01 HTML 5 XML
              

Ejemplo de uso editar

<colgroup> editar

Descripción editar

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 editar

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 editar

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 editar

<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> editar

Descripción editar

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 editar

  • Inicio: <textarea
  • Contenido: Atributos
  • Cierre: />

Atributos editar

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 editar

XHTML 1.0 XHTML 1.1 HTML 4.01 HTML 5 XML
              

<button > editar

Descripción editar

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 editar

  • Inicio: <button
  • Contenido: Atributos
  • Cierre: >

Atributos editar

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 editar

XHTML 1.0 XHTML 1.1 HTML 4.01 HTML 5 XML
              

Ejemplo de uso editar

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 editar

  1. «3.2.4 Comments». 
  2. «8.1.5 CDATA sections». 
  3. «Secciones CDATA [Normas XML]». 
  4. «7.1 Introduction to the structure of an HTML document». 
  5. «8.1.1 The DOCTYPE». 
  6. «MathML 1.01 (2)». 
  7. «MathML 1.01». 
  8. «3.2.1 DOCTYPE Declaration». 
  9. «obsolete-permitted-doctype». 
  10. «obsolete-permitted-doctype (2)». 
  11. «obsolete-permitted-doctype (3)». 
  12. «2.6 URLs». 
  13. «about:legacy-compat (2)». 
  14. «about:legacy-compat». 
  15. «3.2.1 DOCTYPE Declaration (about:legacy-compat)». 
  16. «8.1.1 The DOCTYPE (HTML5) (Allowed values for public and system identifiers)». 
  17. «2.6 URLs (HTML5) (The document base URL ...)». 
  18. «doctype-declaration». «[...] This quoted string, however, may also be quoted with single quotes, rather than double quotes.[...]». 
  19. «12.1.1 Visiting a linked resource». «This behavior is commonly and implicitly obtained by selecting the link (e.g., by clicking, through keyboard input, etc.)». 
  20. «Descriptions for attributes specific to this element». «Specifies that its a element is a named hyperlink, with the name given by the value of this attribute.» 
  21. «6.16 Frame target names». 
  22. «6.16 Frame target names (2)». 
  23. «6.16 Frame target names (4).». 
  24. «6.16 Frame target names (3)». 
  25. «5.1.6 Browsing context names». «A valid browsing context name is any string with at least one character that does not start with a U+005F LOW LINE character». 
  26. «a.attrs.target». «A list of tokens that specify the relationship between the document containing the hyperlink and the destination indicated by the hyperlink.»