Семантически точный элемент HTML5 для модального диалога

Мне было интересно, что некоторые из моих коллег из веб-разработчиков/дизайнеров почувствовали, что это лучший элемент HTML 5, который будет использоваться для модального диалога, такого как лайтбокс, супербокс, толстый бокс или любой другой ваш любимый вкус.

Поскольку эти типы пользовательского интерфейса не соответствуют типичному потоку "нормальной" веб-страницы (которая, судя по всему, в соответствии с HTML 5 spec gurus, по сути, является блогом), они действительно не встают на свои места, как a <header>, <nav>, <section>, <article> или <footer> (среди других новых семантических элементов).

Конечно, всегда есть <div>, но я просто подумал, что может быть что-то более семантически точная.

К сожалению, элемент <modal> отсутствует. Что вы думаете о том, должен ли быть один в спецификации? А поскольку элемент не существует, каким будет ваш следующий лучший выбор?

Ответ 1

<aside> кажется уместным. Текущая спецификация с соответствующими разделами выделена жирным шрифтом:

Отложенный элемент представляет собой раздел страницы, состоящей из содержимого что касательно связано с содержимое вокруг элемента в стороне и которые можно считать отдельными из этого содержимого.. Такие разделы часто представлены в виде боковых печатная типография.

Элемент может использоваться для типографские эффекты, такие как котировки или боковых панелей, для рекламы, для группы элементов навигации, а для других содержание, которое считается отдельным из основного содержимого страницы.

В этом случае модаль "тангенциально связан" с действием, вызвавшим его. Хотя обычно вы можете ожидать, что в стороне есть боковая панель, одна из целей семантического контента - обеспечить универсальность, которая не ограничена физическими характеристиками страницы. Последняя фраза спецификации, кажется, подразумевает только этот универсальный вариант использования.

Ответ 2

В текущем черновике HTML есть элемент dialog. Он был удален в какой-то момент, но он вернулся.

Элемент диалога представляет собой часть приложения, которое пользователь взаимодействует с целью выполнения задачи, например диалоговое окно, инспектор, или окно.

Для доступности (пока элемент более широко поддерживается) я бы также включил диалог ARIA.

Чтобы получить API JavaScript в браузерах, которые не поддерживают элемент <dialog>, вы можете использовать polyfill.