Playgrounds de HTML moderno

Explora datalist como una lista de valores sugeridos para un input. Cambia el tipo de control, configura atributos y compara menús, marcas de rango y selectores nativos sin restringir el valor a las opciones disponibles.

Explora details con controles para editar cada summary y contenido, añadir nuevos bloques y probar el atributo name para crear acordeones exclusivos sin JavaScript.

Explora dialog con una previsualización mínima formada solo por el botón de apertura y el modal. Cambia command, commandfor y closedby sin generar CSS.

Explora <geolocation> como control declarativo de ubicación gestionado por el navegador, ajusta sus atributos y copia el HTML con fallback. Conviene usar esta opción declarativa porque el navegador controla una interfaz de permiso contextual y fiable, reduce JavaScript imperativo y refleja mejor la intención explícita del usuario.

Explora <usermedia> como control de confianza gestionado por el navegador para solicitar cámara y micrófono. Configura setConstraints(), conecta el MediaStream a una previsualización y compara el elemento nativo con un fallback progresivo basado en getUserMedia().

Explora <install> como botón declarativo de instalación renderizado por el navegador, con una opción para la app actual y otra para una app externa como MDN. Conviene usar esta opción declarativa porque el navegador renderiza un botón de instalación de confianza, evita la ceremonia de beforeinstallprompt y mantiene una señal clara de intención del usuario.

Combina los tres tipos de listas de HTML, crea niveles anidados y genera marcado semántico con ul, ol, li, dl, dt y dd.

Construye datos tabulares con table, caption, th, scope, thead, tbody, tfoot, colgroup, colspan y rowspan mientras ves y copias el resultado.

Explora meter con controles para el valor actual, el rango total y los umbrales low, high y optimum de una medida escalar conocida.

Explora progress con controles para el valor actual, el máximo de la tarea y el estado indeterminado que se obtiene al omitir el atributo value.

Explora select con controles para editar su label, ordenar opciones, crear optgroups, añadir separadores hr y probar multiple y size sin JavaScript.

Crea contenido no modal en la capa superior con el atributo popover. Compara controles declarativos y JavaScript, prueba el cierre ligero y copia HTML, CSS y JS reutilizable.