todas son que las etiquetas ejemplos cuales atributos atributo html5 custom-data-attribute html5-data

html5 - son - que es un atributo en html



¿Son válidos los atributos de datos HTML5 vacíos? (4)

Por un lado, pasa el validador 16.5.7 https://validator.w3.org/nu/#textarea :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>a</title> </head> <body data-asdf> </body> </html>

Por otro lado, HTML5 no dice en la especificación de atributos de data- que son booleanos: https://www.w3.org/TR/html5/dom.html#custom-data-attribute mientras dice eso claramente para otros atributos booleanos como https://www.w3.org/TR/html5/forms.html#attr-input-checked

Me gustaría escribir un plugin jQuery simple que muestre modales en línea bajo los elementos especificados. Mi idea es que el script inicie automáticamente en función de los atributos de datos especificados en los elementos.

Un ejemplo muy básico:

<p data-modal-target>Hover over me for an inline modal!</p> <div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>

Me pregunto si data-modal-target en el ejemplo anterior es válido, o tiene que ser data-modal-target="true" ? No me importa nada más complicado que IE9, etc., mi único requisito es que sea un HTML5 válido.


Sí, es una sintaxis válida para omitir el valor de un atributo de datos personalizado.

"Los atributos se pueden especificar de cuatro maneras diferentes:

Sintaxis de atributos vacíos Solo el nombre del atributo. El valor es implícitamente la cadena vacía. [...] " https://developers.whatwg.org/syntax.html#attributes-0


Sí, perfectamente válido. En su caso, data-modal-target representaría un atributo booleano:

2.4.2 atributos booleanos

La presencia de un atributo booleano en un elemento representa el valor verdadero, y la ausencia del atributo representa el valor falso.


La especificación de atributos de datos personalizados no menciona ningún cambio en el manejo de atributos vacíos, por lo que las reglas generales sobre atributos vacíos se aplican aquí:

Ciertos atributos se pueden especificar proporcionando solo el nombre del atributo, sin ningún valor.

En el siguiente ejemplo, el atributo disabled se da con la sintaxis del atributo vacío:

<input disabled>

Tenga en cuenta que la sintaxis de atributo vacía es exactamente equivalente a especificar la cadena vacía como el valor para el atributo, como en el siguiente ejemplo.

<input disabled="">

Por lo tanto, puede usar atributos de datos personalizados vacíos, pero es necesario un manejo especial para usarlos como booleanos.

Si está accediendo a un atributo a través de element.dataset :

  • Cuando hay un atributo vacío, su valor es "" .
  • Cuando un atributo está ausente, se está undefined .

Por lo tanto, no puede simplemente marcar como if (element.dataset.myattr) porque siempre será false .

Puede y debe verificar los atributos booleanos como if (element.dataset.myattr !== undefined) .

La respuesta de Lloyd es incorrecta. Menciona el enlace a los atributos booleanos microsintaxis, pero los atributos data-* no se especifican como booleanos en la especificación.