Html menu: | HTML | WebReference

23.01.2023 alexxlab

| HTML | WebReference

Содержание
- Синтаксис
- Закрывающий тег
- Атрибуты
- Пример
- Примечание
- Спецификация
- Браузеры

Элемент <menu> (от англ. menu — меню) предназначен для отображения списка пунктов меню. Аналогично элементам <ol> и <ul> внутри контейнера <menu> список формируется с помощью <li>.

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

Синтаксис

<menu>
  <li>пункт меню</li>
  <li>пункт меню</li>
</menu>

Закрывающий тег

Обязателен.

Атрибуты

label: Устанавливает видимую метку для меню.
type: Задаёт тип меню.

Пример

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.

01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>MENU</title> </head> <body> <p><strong>В этом выпуске:</strong></p> <menu> <li>Русская кухня. Уха бурлацкая</li> <li>Украинская кухня. Вареники</li> <li>Молдавская кухня. Паприкаш</li> <li>Кавказская кухня. Суп-харчо</li> <li>Прибалтийская кухня. Вертиняй</li> </menu> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид списка, созданного с помощью <menu>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>MENU</title> </head> <body> <menu type=»toolbar»> <li> <menu label=»Файл»> <button type=»button»>Новый…</button> <button type=»button»>Открыть.

..</button> <button type=»button»>Сохранить</button> </menu> </li> <li> <menu label=»Правка»> <button type=»button»>Копировать</button> <button type=»button»>Вырезать</button> <button type=»button»>Вставить</button> </menu> </li> </menu> </body> </html>

Примечание

Firefox поддерживает только создание контекстного меню, когда значение атрибута type равно context.

Спецификация

Спецификация	Статус
WHATWG HTML Living Standard	Живой стандарт
HTML5.1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

<menuitem>

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Меню | HTML

Вернёмся к примеру из прошлых уроков:

<header>
  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
  <div> <!-- Меню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </div>
</header>

В нём меню сайта размечено с помощью обычного тега <div> с идентификатором menu. Как известно, такое обозначение работает для разработчиков, но не для браузеров. Они не понимают, что это меню, а не просто обёртка для списка.

Для создания полноценного меню используется парный тег <nav>, задача которого — разметить область страницы с основным меню. Также различные устройства для чтения с экрана, которыми пользуются люди со слабым зрением, используют этот тег, чтобы определить, стоит ли его отображать на странице.

Заменим <div></div> на изученный тег <nav>:

<header>
  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
  <nav> <!-- Меню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>
</header>

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

Нет необходимости оборачивать каждое меню в элемент nav. В основном такой областью указываются только основные меню. Дополнительные, такие как меню в футере, не оборачивают в тег <nav>, хотя это не запрещено
Хорошим примером дополнительного использования nav — навигация по текущей странице
nav может содержать не только ссылки, но так же и текст, в котором есть ссылки. Ориентируйтесь на здравый смысл. Если навигация является основной для страницы или всего сайта, то оберните её в тег <nav>

Задание

Создайте разметку «шапки» сайта. Расположите внутри картинку и меню из двух элементов. Используйте тег <nav> и маркированный список

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

Оборачивайте в элемент навигации только основные меню сайта или отдельной страницы. Дополнительные меню не нуждаются в обёртке в тег <nav>
Навигация может быть в любой области страницы, а не только в шапке сайте

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

&двоеточие; Элемент меню — HTML: Язык гипертекстовой разметки

HTML-элемент

описан в спецификации HTML как семантическая альтернатива

< ул>

элементами).

Этот элемент включает только глобальные атрибуты.

Элементы

предназначался для интерактивных элементов. Связанный элемент устарел.

Примечание: В ранних версиях спецификации HTML элемент

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

Панель инструментов

В этом примере <меню> используется для создания панели инструментов для приложения редактирования.

HTML

 <меню>

Обратите внимание, что это функционально ничем не отличается от:

CSS

 меню,
ул {
  дисплей: гибкий;
  стиль списка: нет;
  заполнение: 0;
  ширина: 400 пикселей;
}
ли {
  гибкий рост: 1;
}
кнопка {
  ширина: 100%;
}

Результат

Категории контента	Потоковое содержание. Если дочерние элементы элемента включают хотя бы один элемент: Ощутимое содержание.
Разрешенный контент	Ноль или более вхождений , `<скрипт>` и `<шаблон>` .
Отсутствие тега	Нет, начальный и конечный теги обязательны.
Разрешенные родители	Любой элемент, принимающий потоковое содержание.
Неявная роль ARIA	`список`
Разрешенные роли ARIA	`каталог` , `группа` , `список` , `меню` , `меню` , `нет` , `презентация` , `радиогруппа` , `таблист` , `панель инструментов` или `дерево`
Интерфейс DOM	`HTMLMenuElement`

Specification
HTML Standard # the-menu-element

BCD tables only load in the browser

with JavaScript enabled.

Включите JavaScript для просмотра данных.

Другие элементы HTML, связанные со списками:

Html menu: | HTML | WebReference

| HTML | WebReference

Синтаксис

Закрывающий тег

Атрибуты

Пример

Примечание

Спецификация

Спецификация

Браузеры

Браузеры

См. также

Автор и редакторы

Меню | HTML

Задание

Полезное

&двоеточие; Элемент меню — HTML: Язык гипертекстовой разметки

Панель инструментов

HTML

CSS

Результат

Тег HTML

`Синтаксис`

Пример

Атрибуты

Глобальные атрибуты

`Добавить комментарий Отменить ответ`