ventana semanticas modal etiquetas emergente ejemplos ejemplo dialogo bootstrap attribute html html5 modal-dialog semantic-markup

semanticas - Elemento HTML5 semánticamente preciso para un diálogo modal



ventana emergente css (2)

Me preguntaba qué pensaban algunos de mis colegas desarrolladores / diseñadores web sería el mejor elemento de HTML 5 para usar en un diálogo modal como lightbox, superbox, thickbox, o cualquiera que sea su sabor favorito.

Dado que estos tipos de IU no siguen el flujo típico de una página web ''normal'' (que, aparentemente, según los gurús de las especificaciones de HTML 5 es, esencialmente, un blog), realmente no encajan en su lugar como un <header> , <nav> , <section> , <article> o un <footer> (entre otros nuevos elementos ''semánticos'').

Por supuesto, siempre está el <div> , pero pensaba que podría haber algo un poco más preciso semánticamente.

Desafortunadamente, no hay ningún elemento <modal> . ¿Qué piensas sobre si debería haber uno en la especificación? Y dado que el elemento no existe, ¿cuál sería tu próxima mejor opción?


El borrador actual de HTML tiene un elemento de dialog . Fue retirado en un punto pero está de vuelta.

El elemento de diálogo representa una parte de una aplicación con la que un usuario interactúa para realizar una tarea, por ejemplo, un cuadro de diálogo, un inspector o una ventana.

Para accesibilidad (hasta que el elemento sea más ampliamente soportado) también incluiría el rol de diálogo ARIA .

Para obtener la API de JavaScript en los navegadores que no admiten de forma nativa el elemento <dialog> , puede utilizar un polyfill .


<aside> parece apropiado. La especificación actual con secciones relevantes en negrita:

El elemento aparte representa una sección de una página que consta de contenido que se relaciona tangencialmente con el contenido alrededor del elemento aparte y que podría considerarse independiente de ese contenido. Tales secciones se representan a menudo como barras laterales en tipografía impresa.

El elemento se puede usar para efectos tipográficos como comillas o barras laterales, para publicidad, para grupos de elementos de navegación y para otro contenido que se considera separado del contenido principal de la página.

En este caso, un modal está "relacionado tangencialmente" con la acción que lo causó. Mientras que normalmente se puede esperar que un aparte esté en una barra lateral, uno de los propósitos del contenido semántico es permitir una versatilidad que no esté restringida por las características físicas de la página. La última frase de la especificación parece implicar solo este versátil caso de uso.