Tironemota Atributos de las etiquetas HTML

A

accesskey

Atributo global. Especifica una tecla de método abreviado para activar / enfocar un elemento. El valor del atributo debe ser un solo carácter (una letra o un dígito).
Sintaxis: <elemento accesskey="carácter">
Valores de atributo: carácter

align

Especifica el alineamiento del applet en relación con su alrededor. Sus valores son: baseline, bottom, left, middle, right, top.

Desaprobado - Especifica la ubicación del título con respecto a la tabla. Sus valores son: bottom, left, right, top.

Especifica la alineación horizontal de los datos de una celda. Sus valores son: left, right, center, justify, char

<div>

Desaprobado Especifica la alineación horizontal del contenido del elemento div.

Desaprobado Alínea el contenido de la etiqueta horizontalmente. Sus valores son: left, center, right, justify.

<hr>

Desaprobado Especifica la alineación horizontal del separador. Sus valores son: center, left, right.

Desaprobado Especifica la alineación horizontal del iframe con respecto a su alrededor. Sus valores son: left, center, right, justify.

<img>

Desaprobado Especifica la posición de una imagen con respecto a su contexto. Sus valores son: bottom, left, middle, right, top.

<input>

Desaprobado Especifica la alineación de la entrada de una imagen (solo para type="image"). Solo left y right funcionan bien en todos los navegadores. Sus valores son: bottom, left, middle, right, top.

Desaprobado Especifica la ubicación del título en el fieldset. Sus valores son: bottom, left, right, top.

Especifica la alineación alrededor del objeto. Sus valores son: bottom, left, right, top

alink

<body>

Desaprobado Especifica el color de texto de los enlaces al ser seleccionados. Sus valores son: rgb, hexadecimal, nombre del color.

alt

<area>

Especifica un texto alternativo para el área. Requerido si el atributo href está presente.

B

border

<img>

Desaprobado Especifica el ancho del borde de una imagen en píxeles. Su valor: píxeles.

Define un borde alrededor del objeto. Su valor es dado en pixeles.

C

class

TODAS

Atributo global. Especifica uno o más nombres de clase para un elemento. Para especificar varias clases, separe los nombres de las clases con un espacio, p. Ej. <span class = "left important">. Esto le permite combinar varias clases de CSS para un elemento HTML.
Sintaxis: <elemento class="NombreClase">
Valores de atributo: Nombre de la clase

classid

Especifica la localización de la implementación de un objeto.
Su valor es URL

codetype

Especifica el tipo de contenido de datos cuando se carga el objeto especificado por classid.

color

Desaprobado - Especifica el color del texto por defecto.
Sus valores son: rgb, hexadecimal, nombre del color.

cols

Especifica la cantidad y el tamaño de las columnas en el frameset.
Sus valores son: píxeles, % , * .

content

<meta>

Requerido - Especifica el valor de una propiedad. Su valor es un texto.

contenteditable

TODAS

Atributo global. Especifica si el contenido de un elemento es editable o no.
Sintaxis: <elemento contenteditable="true|false">
Valores de atributo:true, false.

controls

Muestra los controles estándar de HTML5 para audio en una página Web.

coords

<area>

Especifica las coordenadas del área

D

data-*

Atributo global. Se utiliza para almacenar datos personalizados privados de la página o aplicación. Nos dan la capacidad de incrustar atributos de datos personalizados en todos los elementos HTML.
Ejemplo:

<ul>
    <li data-animal-type="pajaro">Búho</li>
    <li data-animal-type="pez">Salmon</li>
    <li data-animal-type="araña">Tarantula</li>
</ul>

Los atributos data-* constan de dos partes:

El nombre del atributo no debe contener letras mayúsculas y debe tener al menos un carácter después del prefijo "data-".
El valor del atributo puede ser cualquier cadena

datetime

Especifica la fecha y hora en que se realizó el cambio.
Valor: AAAA-MM-DDThh:mm:ssDZH

declare

Especifica que la definición actual de object sea solamente una declaración. Su valor es declare.

delay

Valor para para retrasar el inicio de la música. Número positivo en segundos.

dir

Atributo global. Indica la dirección del texto (útil para los idiomas que escriben de derecha a izquierda). Valores posibles:

ltr : De izquierda a derecha (left to right).
rtl: De derecha a izquierda (right to lleft).

Sintaxis: <elemento dir="ltr|rtl|auto">
Valores de atributo:

ltr - Defecto. Dirección de texto de izquierda a derecha
rtl - Dirección de texto de derecha a izquierda
auto - Deje que el navegador descubra la dirección del texto, según el contenido (solo se recomienda si se desconoce la dirección del texto)

disabled

Representa al botón deshabilitado. Su valor es disabled

<input>

Deshabilita el control para la entrada de datos. Su valor es disabled.

download

Especifica que el destino se descargará cuando un usuario haga clic en el hipervínculo.
El valor opcional del atributo download será el nuevo nombre del archivo después de que se descargue. No hay restricciones sobre los valores permitidos, y el navegador detectará automáticamente la extensión de archivo correcta y la agregará al archivo (.img, .pdf, .txt, .html, etc.).
Si se omite el valor, se utiliza el nombre de archivo original.
Sintaxis: <area download="nombreDelArchivo">

draggable

Atributo global. Especifica si un elemento se puede arrastrar o no
Sintaxis: <elemento draggable="true|false|auto">
Valores de atributo:

true - Especifica que el elemento se puede arrastrar
false - Especifica que el elemento no se puede arrastrar
auto - Utiliza el comportamiento predeterminado del navegador.

E

enctype

<form>

Especifica el tipo de contenido usado para enviar el formulario al servidor. Sus valores pueden ser:

text/plain
multipart/form-data
application/x-www-form-urlencoded

F

face

Desaprobado - Define el nombre de la fuente por defecto.

for

<label>

Asocia el rótulo definido con otro control.
Su valor es igual al id del elemento.

frameborder

Especifica si dibuja o no el borde alrededor del frame.
Sus valores son: 1 y 0

G

H

height

Especifica la altura.
Sus valores son: píxeles, %.

Especifica la altura del objeto.
Su valor es píxeles.

hidden

Atributo global. Especifica que un elemento aún no es o ya no es relevante.
Los navegadores no deben mostrar elementos que tengan el atributo hidden especificado.
El atributo hidden también se puede usar para evitar que un usuario vea un elemento hasta que se cumpla alguna otra condición (como seleccionar una casilla de verificación, etc.). Luego, un JavaScript podría eliminar el atributo oculto y hacer que el elemento sea visible.
Ejemplo:

<p hidden>Este párrafo debe estar oculto.</p>

href

<a>

El atributo href especifica la URL de la página a la que va el enlace.
Si el atributo href no está presente, la etiqueta <a> no será un hipervínculo.
Sugerencia: puede usar href="#top" o href="#" para vincular a la parte superior de la página actual.

<area>

El atributo href especifica el destino del hipervínculo para el área.
Si el atributo href no está presente, la etiqueta <area> no es un hipervínculo.

hreflang

Especifica el idioma de la URL de destino.

hspace

Define los espacios horizontales alrededor del objeto.

<img>

Desaprobado - Especifica la cantidad de espacio en blanco a dejar a la derecha y a la izquierda de la imagen. Sus valores son: píxeles.

http-equiv

<meta>

Obtiene información sobre los encabezados del mensaje de respuesta HTTP.
Sus valores son: Allow, Content-Encoding, Content-Length, Content-Type, Date, Expires, Last-Modified, Location, Refresh, Set-Cookie, WWW-Authenticate.

I

id

TODAS

Atributo global. Establece un identificador único a cada elemento dentro de una página HTML. Asigna un nombre a un elemento.
El atributo id actúa:

Como selector para las hojas de estilo(CSS).
Como vínculo destino para vínculos de hipertexto.
Como medio de hacer referencia a un elemento en particular desde un script.
Como nombre de un elemento object declarado.
Para procesos generales por parte del usuario.

ismap

<img>

Especifica una imagen como mapa de imagen del lado del servidor. Su valor es: ismap.

<input>

Especifica una imagen como mapa de imagen del lado del servidor(solo para type="image"). Su valor es: ismap.

J

K

L

lang

Atributo global. Especifica el idioma del contenido del elemento.
El atributo lang es útil para:

Ayudar a los motores de búsqueda.
Ayudar a los sintetizadores de voz.
Ayudar al agente de usuario a hacer decisiones sobre separación de palabras, ligaduras, y espaciado.
Ayudar a los verificadores de ortografía y gramática.

link

<body>

Desaprobado - Especifica el color de texto de los enlaces aún no visitados.
Sus valores son: rgb, hexadecimal, nombre del color.

longdesc

Especifica un enlace a una descripción larga del marco.
Su valor es URL

loop

Hace que el audio se repita automáticamente. Bien podemos indicarle un número concreto de repeticiones (dándole el valor de un número) o que sea infinito (dándole el valor "infinite")

M

marginheight

Especifica los márgenes superior e inferior del <frame> y <iframe>.
Su valor en píxeles.

marginwidth

Especifica los márgenes derecho e izquierdo del <frame> y <iframe>.
Su valor en píxeles

maxlength

<input>

Especifica el número máximo de caracteres que se pueden introducir(solo para type="text" o type="password").
Su valor es un número.

media

Especifica para qué medio / dispositivo está optimizada la URL de destino.
Este atributo se utiliza para especificar que la URL está diseñada para dispositivos especiales (como iPhone), medios impresos o de voz.
Solo se usa si el atributo href está presente.
Posibles operadores:

and - Especifica el operador y
not - Especifica el operador no
, - Especifica el operador o

Dispositivos:

all - Defecto. Apto para todos los dispositivos
aural - Sintetizadores de voz
braille - Dispositivos de retroalimentación Braille
handheld - Dispositivos de mano (pantalla pequeña, ancho de banda limitado)
projection - Proyectores
print - Modo de vista previa de impresión / páginas impresas
screen - Pantallas de computadora
tty - Teletipos y medios similares que utilizan una cuadrícula de caracteres de tono fijo
tv - Dispositivos de tipo televisión (baja resolución, capacidad de desplazamiento limitada)

Valores:

width - Especifica el ancho del área de visualización de destino. Se pueden utilizar los prefijos min- y max-.
Ejemplo: media="screen and (min-width:500px)"
height - Especifica la altura del área de visualización de destino. Se pueden utilizar los prefijos min- y max-.
Ejemplo: media="screen and (max-height:700px)"
device-width - Especifica el ancho de la pantalla / papel de destino. Se pueden utilizar los prefijos min- y max-.
Ejemplo: media="screen and (device-width:500px)"
device-height - Especifica la altura de la pantalla / papel de destino. Se pueden utilizar los prefijos min- y max-.
Ejemplo: media="screen and (device-height:500px)"
orientation - Especifica la orientación de la pantalla / papel de destino.
Valores posibles: portrait o landscape.
Ejemplo: media="all and (orientation: landscape)"
aspect-ratio - Especifica la relación ancho / alto del área de visualización de destino. Se pueden utilizar los prefijos min- y max-.
Ejemplo: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio - Especifica la relación de ancho de dispositivo / alto de dispositivo de la pantalla / papel de destino. Se pueden utilizar los prefijos min- y max-.
Ejemplo: media="screen and (aspect-ratio:16/9)"
color - Especifica los bits por color de la pantalla de destino. Se pueden utilizar los prefijos min- y max-.
Ejemplo: media="screen and (color:3)"
color-index - Especifica el número de colores que puede manejar la pantalla de destino. Se pueden utilizar los prefijos min- y max-.
Ejemplo: media="screen and (min-color-index:256)"
monochrome - Especifica los bits por píxel en un búfer de fotogramas monocromáticos. Se pueden utilizar los prefijos min- y max-.
Ejemplo: media="screen and (monochrome:2)"
resolution - Especifica la densidad de píxeles (dpi o dpcm) de la pantalla / papel de destino. Se pueden utilizar los prefijos min- y max-.
Ejemplo: media="print and (resolution:300dpi)"
scan - Especifica el método de escaneo de una pantalla de televisión. Los valores posibles son "progressive" y "interlace".
Ejemplo: media="tv and (scan:interlace)"
grid - Especifica si el dispositivo de salida es de cuadrícula o mapa de bits.
Los valores posibles son "1" para la cuadrícula y "0" en caso contrario.
Ejemplo: media="handheld and (grid:1)"

method

<form>

Especifica el método HTTP que se usará para enviar el formulario.
Sus valores son: Get y Post

N

name

Para definir un enlace dentro de la misma página en la que nos encontramos.
Especifica un nombre para el elemento: <applet>, <button>, <form>, <frame>, <iframe>, <input>.

<map>

Requerido - Define el mapa de una imagen del lado del cliente.

<meta>

Especifica un nombre de propiedad.
Sus valores son: author, copyright, description, distribution, generator, keywords, progid, rating, resource-type, revisit-after, robots, otros de su propia creación.

Define el nombre del objeto.

nohref

<area>

Especifica que el area no tiene asociado ningún enlace.

noresize

<frame>

No permite el redimensionamiento del frame. Su valor es: noresize

noshade

<hr>

Desaprobado - Representa al separador con un color sólido en lugar de con relieve.
Valor: noshade.

Ñ

O

object

Requerido - Nombre de un recurso que contiene una representación serializada del estado de un applet.

P

preload

<audio>

Para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:

"none" no almacena temporalmente el archivo
"auto" almacena temporalmente el archivo multimedia
"metadata" almacena temporalmente sólo los metadatos del archivo

profile

<head>

Especifica la URL de un perfil de metadatos.

Q

R

readonly

<input>

Especifica que el campo del input es de solo-lectura (solo para type="text" o type="password").
Su valor es readonly.

referrerpolicy

<area>

Especifica qué información de referencia enviar con el enlace
Valores de atributo:

no-referrer - No se envía información de referencia
no-referrer-when-downgrade - Defecto. Envía el origen, la ruta y la cadena de consulta si el nivel de seguridad del protocolo permanece igual o es más alto (HTTP a HTTP, HTTPS a HTTPS, HTTP a HTTPS está bien). No envía nada a un nivel menos seguro (HTTPS a HTTP no está bien)
origin - Envía el origen (esquema, host y puerto) del documento.
origin-when-cross-origin - Envía el origen del documento para la solicitud de origen cruzado. Envía el origen, la ruta y la cadena de consulta para la solicitud del mismo origen.
same-origin - Envía una referencia para una solicitud del mismo origen. No envía ninguna referencia para la solicitud de origen cruzado
strict-origin-when-cross-origin - Envía el origen si el nivel de seguridad del protocolo sigue siendo el mismo o es más alto (HTTP a HTTP, HTTPS a HTTPS y HTTP a HTTPS está bien). No envía nada a un nivel menos seguro (HTTPS a HTTP)
unsafe-url - Envía el origen, la ruta y la cadena de consulta (independientemente de la seguridad). ¡Utilice este valor con cuidado!

rel

Información del enlace

Especifica la relación entre el documento actual y el documento vinculado.
Solo se usa si el atributo href está presente.
Valores de atributo:

alternate - Proporciona un enlace a una representación alternativa del documento (es decir, página impresa, traducida o reflejada)
author - Proporciona un enlace al autor del documento.
bookmark - URL permanente utilizada para los marcadores
dns-prefetch - Especifica que el navegador debe realizar de forma preventiva la resolución de DNS para el origen del recurso de destino
external - Indica que el documento referenciado no es parte del mismo sitio que el documento actual. Esto significa que se hace referencia a una pagina web externa.
help - Proporciona un enlace a un documento de ayuda.
icon - Importa un icono para representar el documento.
Ejemplo: <link rel="icon" href="favicon.ico" type="image/x-icon">
license - Proporciona un enlace a la información de derechos de autor del documento.
next - Proporciona un enlace al siguiente documento de la serie.
nofollow - Vínculos a un documento no endosado, como un vínculo pago. (Google utiliza "nofollow" para especificar que la araña de búsqueda de Google no debe seguir ese enlace).
Originalmente se usaba en la directiva <meta>
<meta name="robots" content="nofollow"/>
En HTML 5 se ideó poder hacer lo mismo para enlaces independientes, y sin importar si son externos o no
<a href="http://google.com/" rel="nofollow">Google</a>
noopener - Requiere que cualquier contexto de navegación creado siguiendo el hipervínculo no debe tener un contexto de navegación de apertura
noreferrer - Hace que la referencia sea desconocida. No se incluirá ningún encabezado de referencia cuando el usuario haga clic en el hipervínculo.
El "referrer" es simplemente la URL de una pagina web. El valor "noreferrer" ha sido introducido en Html5 por razones de seguridad y si esta presente deja de enviar informacion sobre la URL.
pingback - Proporciona la dirección del servidor pingback que maneja los pingbacks al documento actual.
preconnect - Especifica que el navegador debe conectarse de forma preventiva al origen del recurso de destino.
prefetch - Especifica que el documento de destino debe almacenarse en caché
preload - Especifica que el agente del navegador debe buscar y almacenar en caché de forma preventiva el recurso de destino para la navegación actual de acuerdo con el destino dado por el atributo "como" (y la prioridad asociada con ese destino).
prerender - Especifica que el navegador debe preprocesar (cargar) la página web especificada en segundo plano. Entonces, si el usuario navega a esta página, acelera la carga de la página (porque la página ya está cargada). ¡Advertencia! ¡Esto desperdicia el ancho de banda del usuario! Utilice prerender solo si está absolutamente seguro de que la página web es necesaria en algún momento del viaje del usuario.
prev - Indica que el documento es parte de una serie y que el documento anterior de la serie es el documento de referencia.
search - Proporciona un enlace a un recurso que se puede utilizar para buscar en el documento actual y sus páginas relacionadas.
stylesheet - Importa una hoja de estilo
tag - Una etiqueta (palabra clave) para el documento actual.
La palabra "tag" proviene del ingles y traducida en castellano significa elemento, etiqueta o directiva. Si el valor "tag" esta presente en algun vinculo, hace referencia a una Url cuyo tema se refiere a una etiqueta, directiva, atributo o valor Html.

<a>

Especifica la relación entre el documento actual y el documento vinculado.
Valores de atributo: alternate, author, bookmark, external, help, license, next, nofollow, noopener, noreferrer, prev, search, tag.

<area>

Especifica la relación entre el documento actual y la URL de destino.
Valores de atributo: alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag.

<form>

Valores de atributo: external, help, license, next, nofollow, noopener, noreferrer, opener, prev, search.

<link>

Requerido. Especifica la relación entre el documento actual y el documento vinculado.
Valores de atributo: alternate, author, dns-prefetch, help, icon, license, next, pingback, preconnect, prefetch, preload, prerender, prev, search, stylesheet.

Sus valores son:

first, last, next, prev: son valores que nos indica el comienzo y el final de la navegacion en un sitio web. Presuponemos que hemos creado cuatro paginas web:
page_A
page_B
page_C
page_D

El comienzo rel="first" es la pagina "page_A", el siguiente documento, rel="next, es la pagina "page_B", el ultimo documento,rel="last, es la pagina "page_D", pero si queremos hacer una referencia desde la pagina "page_D" a la pagina "page_C", en el vinculo de la pagina "page_D" ponemos rel="prev que significa el documento anterior. En este modo, el navegador tiene la oportunidad de crear una pequeña mapa acerca de nuestro sitio web.

rev

<a>

Especifica la relación entre el destino del vínculo y el documento actual(vínculo inverso).
Sus valores son: alternate, apendix, bookmark, chapter, contents, copyright, designates, glossary, help, index, next, prev, section, start, stylesheet, subsection.

<link>

Describe la relación entre el destino del enlace y el documento.
Sus valores son: alternate, apendix, bookmark, chapter, contents, copyright, designates, glossary, help, index, next, prev, section, start, stylesheet, subsection.

rows

Especifica la cantidad y el tamaño de las filas en el frameset.
Sus valores son: píxeles, % , * .

S

scheme

<meta>

Especifica el formato o URL del valor dado en el atributo content.
Su valor es: formato/URL

scrolling

Especifica si incorpora o no la barra de desplazamiento dentro del <frame>, <iframe>.
Sus valores son: yes, no, auto.

shape

Define la forma del area.
Sus valores son:

circ: Usamos coords="centro x, centro y, radio"
circle: Usamos coords="centro x, centro y, radio"
rect: Usamos coords="izquierda, arriba, derecha, abajo"
rectangle: Usamos coords="izquierda, arriba, derecha, abajo"
poly: Usamos coords="x1, y1, x2, y2, .., xn, yn"
polygon: Usamos coords="x1, y1, x2, y2, .., xn, yn"

size

Desaprobado - Especifica el tamaño de la fuente por defecto. El valor debe ser un entero entre 1 y 7.

En <hr> Especifica la altura del separador.
En <input> Especifica el ancho del campo del input en píxeles(para type="text" o type="password" el ancho es en caracteres).

span

Especifica el número de columnas de un grupo de columnas.

spellcheck

Atributo global. Especifica si se revisará la ortografía y la gramática del elemento o no
Sintaxis: <elemento spellcheck="true|false">
Valores de atributo:

true - El elemento es tener su corrector ortográfico y gramatical.
false - El elemento no debe comprobarse

src

Es la URL del archivo de audio o la ruta al archivo en el sistema local.

Especifica el URL del documento que sera mostrado en el marco.

<img>

Requerido - Especifica la dirección URL de la imagen.

<input>

Especifica el URL de la imagen que se va a usar como botón de envio.

standby

Muestra un mensaje mientras se carga la implementación y los datos del objeto.

style

TODAS

Atributo global. Establece de forma directa los estilos CSS de un elemento.

T

tabindex

Atributo global. Atributo de foco. Establece la posición del elemento en el orden de tabulación de la página. Su valor debe estar comprendido entre 0 y 32.767

tabindex = "numero"

target

Nos indica como tiene que abrirse la pagina. Tiene 4 valores:

_blank: El URL se abrirá en una nueva ventana.
_parent: El URL se abrirá en el frameset padre.
_self: El URL se abrirá en el mismo frame donde fue apretado.
_top: El URL se abrirá en una ventana de tamaño completo.

En <form> Desaprobado - Especifica donde se abrirá el archivo procesador del formulario.

text

<body>

Desaprobado - Especifica el color de texto de toda la página.
Sus valores son: rgb, hexadecimal, nombre del color.

title

Atributo global. Especifica información adicional sobre un elemento.
La información se muestra con mayor frecuencia como un texto de información sobre herramientas cuando el mouse se mueve sobre el elemento.

translate

Atributo global. Especifica si el contenido de un elemento debe traducirse o no.
Sintaxis: <elemento translate="yes|no">

type

En <a> especifica el tipo de contenido a conectar.
En <button> define el tipo de botón. Sus valores son: button, submit, reset.

<input>

Especifica el tipo de control a crear.
Sus valores son: button, checkbox, file, hidden, image, password, radio, reset, submit, text.

<li>

Desaprobado - Especifica el estilo de un objeto de lista.
Sus valores son: 1, A, a, I, i, disc, circle, square.

<link>

Especifica el tipo de documento a enlazar. El más común es type="text/css".

U

usemap

Especifica una imagen como mapa de imagen del lado del cliente.
Su valor es: #nombre_del_mapa

V

valign

Especifica la posición vertical de los datos dentro de la celda.
Sus valores son: bottom, middle, top, baseline.

value

Asigna un valor inicial al botón.

<input>

Especifica el valor inicial del control (obligatorio para type="radio" o type="checkbox").

<li>

Desaprobado - Establece el número del objeto de lista actual.

vlink

<body>

Desaprobado - Especifica el color de texto de los enlaces que han sido visitados.
Sus valores son: rgb, hexadecimal, nombre del color.

volumen

Determina la intensidad del sonido de fondo. Los valores van entre -10,000 (el más debil) a 0 (el más alto). No está soportado por los Mac.

vspace

Espacios verticales alrededor del applet.

<img>

Desaprobado - Especifica la cantidad de espacio en blanco a dejar arriba y abajo de la imagen.

W

width

Especifica el ancho. Sus valores son: píxeles, %.

Define la anchura de las columnas.

<hr>

Desaprobado - Especifica la anchura del separador. El valor por defecto es de 100%.

X

xml:lang

Indica el idioma del elemento mediante un código predefinido

Y

Z

Atributos de las etiquetas HTML19-08-2022

Atributos de las etiquetas HTML
19-08-2022