Добавляет доку про тег <menu> (#5552)

* Добавляет доку про css-функцию light-dark()

* Добавляет заапрувленные правки Алёны

Co-authored-by: Alena Batitskaia <[email protected]>

* Задаём цвет

Co-authored-by: Alena Batitskaia <[email protected]>

* Переносит предложение

* Легонько редачит

* Вносит правки по ревью

* Вносит финальные мелкие правочки

* Добавляет доку про тег menu

* Принимает правку

Co-authored-by: Vitya <[email protected]>

* Дополняет и вносит правки после ревью

* Немного редачит

---------

Co-authored-by: Alina Kozlovtseva <[email protected]>
Co-authored-by: Tatiana Fokina <[email protected]>
Co-authored-by: Alena Batitskaia <[email protected]>
Co-authored-by: Vitya <[email protected]>

html/menu/index.md

@@ -0,0 +1,48 @@
+---
+title: "`<menu>`"
+description: "Тег для создания меню — списка с интерактивными элементами."
+authors:
+  - kozlovtseva
+related:
+  - a11y/role-menu
+  - html/ul
+  - a11y/role-menubar
+tags:
+  - doka
+---
+
+## Кратко
+
+С помощью `<menu>` на странице можно создать меню со списком кнопок и других интерактивных элементов. Чаще всего тег используют для вёрстки панели инструментов (тулбара).
+
+Чтобы преобразовать какой-то список элементов в меню, просто оберните его в тег `<menu>`.
+
+## Пример
+
+Для примера создадим меню из аккаунта пользователя. Для этого сделаем каждый пункт кнопкой, обернём в тег [`<li>`](/html/li/) и вложим в тег `<menu>`:
+
+```html
+<menu>
+  <li>
+    <button onclick="signIn()">Войти</button>
+  </li>
+  <li>
+    <button onclick="signUp()">Зарегистрироваться</button>
+  </li>
+</menu>
+```
+
+## Как понять
+
+Тег `<menu>`, как и [`<ul>`](/html/ul/), объединяет неупорядоченный список элементов. Разница только в содержимом: внутри `<menu>` должны быть только интерактивные элементы. Чаще всего это кнопки, по клику на которые вызываются функции. Таким образом, пользователь совершает действие или выполняет команду. В [спецификации HTML](https://html.spec.whatwg.org/#the-menu-element) тег `<menu>` объясняется как альтернатива тегу `<ul>`, на данный момент разницы в обработке этих двух тегов браузерами нет.
+
+Также от тега `<menu>` отличается [`<nav>`](/html/nav/) . Тег `<nav>` группирует элементы навигации по сайту, внутри него помещаются ссылки для перехода к соответствующим разделам. `<menu>` группирует действия, которые обычно относятся к одному объекту. Один из примеров — контекстное меню. Когда мы кликаем правой клавишей на выделенный текст, видим меню из команд, которые можно выполнить («скопировать», «вырезать», «вставить» и другие).
+
+## Как пишется
+
+Тег `<menu>` парный, его всегда нужно закрывать. Кроме того, тег не должен быть пустым. В качестве элемента списка меню может быть только `<li>`, внутри которого уже можете использовать нужные вам элементы.
+`<menu>` поддерживает только [глобальные атрибуты](/html/global-attrs/), то есть те, которые задают любому HTML-элементу.
+
+## Подсказки
+
+💡 По умолчанию список, созданный с помощью тега `<menu>`, получает роль [`list`](/a11y/role-list/). Если хотите создать именно тулбар для группировки интерактивных элементов (контролов), используйте `<div>` с ролью [`toolbar`](/a11y/role-toolbar/).