Редкие теги в HTML: details, dialog, menu⁠⁠

Привет, Привет, в рамках этого урока мы познакомимся в очень редкими тегами в HTML которые практически невозможно встретить, а именно: details, dialog, menu. Текстовая версия урок в полной версии статьи.

Details

<details> - создает интерактивный элемент при нажатии на который пользователю будет показана дополнительная информация. Обычно используется в паре с тегом <summary>. Этот элемент практически не используется так как является стандартным и тяжел для стилизации через CSS. Обычно если нужен элемент с подобным функционалом его создают из базовых тегов используя HTML + CSS + JavaScript.

<details> 
<summary>Описание</summary> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, saepe?</p>
</details>

Имеет атрибут open при наличии которого браузер сразу будет показывать скрытый контент

<details open>
<summary>Описание</summary>
<p>content</p>
</details>

Как вы могли заметить текст из тега <summary> стал заголовком <details>

Dialog

<dialog> - создает интерактивный элемент при нажатии на который пользователю будет показано всплывающее окно с контентом. Этот элемент практически не используется так как является стандартным и тяжел для стилизации через CSS.

Обычно если нужен элемент с подобным функционалом его создают из базовых тегов используя HTML + CSS + JavaScript.

В данном случае мы ничего не увидим так как по-умолчанию диалог скрыт

<dialog>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consequatur cupiditate eos, excepturi inventore iste libero perferendis quibusdam reiciendis soluta vel veritatis voluptate voluptates! Blanditiis laborum quos repellat vero voluptatem?
</dialog>

Для того, чтобы открыть диалог, нам нужно добавить ему атрибут open

<dialog id="favDialog" open>  dialog content  </dialog>

Menu

Тег <menu> является семантической заменой тега <ul>, на данный момент тег <menu> является экспериментальной технологией и его лучше не использовать, так как не все браузеры его могут поддерживать.

<menu type="context" id="popup-menu">
<menuitem>Action</menuitem>
<menuitem>Another action</menuitem>
<hr/>
<menuitem>Separated action</menuitem>
</menu>

<menu type="toolbar">
<li>
<button type="menu" menu="file-menu">File</button>
<menu type="context" id="file-menu">
<menuitem label="New..." onclick="newFile()"></menuitem>
<menuitem label="Save..." onclick="saveFile()"></menuitem>
</menu>
</li>

<li>
<button type="menu" menu="edit-menu">Edit</button>
<menu type="context" id="edit-menu">
<menuitem label="Cut..." onclick="cutEdit()"></menuitem>
<menuitem label="Copy..." onclick="copyEdit()"></menuitem>
<menuitem label="Paste..." onclick="pasteEdit()"></menuitem>
</menu>
</li>
</menu>

В спецификации HTML4 <menu> работал по другом, но с выходом стандарта HTML5 логика тега <menu> была изменена, но на данный момент его практически не поддерживают никакие браузеры.

Более подробная информация о данных тегах рассказана в видео

Файлы с урока

Мой Телеграм канал