HTML
Atributos globales
Referencia práctica de atributos globales en HTML para identidad, idioma, foco, visibilidad, edición, datos personalizados, seguridad y comportamiento.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
HTML
Referencia práctica de atributos globales en HTML para identidad, idioma, foco, visibilidad, edición, datos personalizados, seguridad y comportamiento.
<section id="contact">...</section>Debe ser único. Se utiliza para fragmentos, labels, relaciones ARIA, CSS y JavaScript.
<article class="project-card featured">...</article>Es una lista de tokens. Sirve para estilos y selección; no aporta semántica accesible por sí misma.
<div style="color: red">...</div>Aplica CSS inline. Puede dificultar reutilización y CSP estricta. Prefiere clases o custom properties dentro de una arquitectura definida.
<abbr title="HyperText Markup Language">HTML</abbr>Aporta información consultiva, pero no debe ser la única fuente de instrucciones o labels: su acceso varía entre teclado, touch y tecnologías de asistencia.
<p lang="en">Progressive enhancement</p>
<p dir="rtl" lang="ar">...</p>Comunican idioma y dirección, no solo apariencia.
<section hidden>...</section>Indica que el contenido no es relevante en el estado actual. Normalmente no se renderiza ni se expone a tecnologías de asistencia.
<section hidden="until-found">...</section>Puede revelarse mediante búsqueda en página o navegación a fragmento en navegadores compatibles.
<main inert>...</main>Hace que un subtree no sea interactivo ni participe normalmente en foco. Es útil mientras un diálogo modal controla la interacción.
No equivale a pointer-events: none.
0: entra en el orden natural.-1: foco programático, no tab normal.<div tabindex="-1" id="error-summary">...</div>No hagas enfocables textos sin una razón de navegación o interacción.
<div contenteditable="true">...</div>No crea un editor completo. Necesita nombre accesible, manejo de selección, pegado, sanitización y persistencia.
<textarea spellcheck="true"></textarea>
<code translate="no">createProduct</code>Son pistas para procesamiento del contenido.
<article data-project-id="domisys">...</article>JavaScript accede mediante dataset. Todos los valores son strings.
No lo uses para semántica, secretos o estado accesible.
<input inputmode="numeric" autocapitalize="none">Sugieren teclado y capitalización. No validan ni transforman el valor enviado.
<img src="product.webp" alt="" draggable="false">Activar drag no crea por sí solo una experiencia accesible; pueden necesitarse alternativas de teclado.
Puede colisionar con atajos del navegador, sistema o lector de pantalla. Evítalo salvo un entorno controlado y documentado.
<script nonce="valor-generado-por-respuesta">...</script>Autoriza contenido bajo CSP. Debe ser impredecible, único por respuesta y generado por servidor.
<div id="menu" popover>...</div>Declara un elemento como popover. Su comportamiento se estudia con componentes nativos.
<button
type="button"
aria-expanded="false"
aria-controls="filters"
>
Filtros
</button>JavaScript debe mantener el estado sincronizado.
Evita handlers inline como onclick para separar comportamiento y facilitar CSP.
¿Por qué inputmode="numeric" no garantiza que el usuario envíe solo números?
Porque solo sugiere un teclado. No cambia validación, tipo del control ni impide pegar otros caracteres.
Idioma, dirección y codificación explica cómo se interpreta el texto.