Меню html: Тег | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

Тег | htmlbook.ru

	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
HTML4	3.0+	1.0+	3.5+	1.0+	1.0+	1.1+	1.0+
HTML5

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

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

Синтаксис

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

Атрибуты

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

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

Обязателен.

Валидация

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

Пример 1

HTML 4.01IECrOpSaFx

<!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>

Пример 2

HTML5IECrOpSaFx

<!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>

HTML5Блочные элементыСписки

Семантический HTML | Основы современной верстки

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.

При создании верстки нужно учитывать семантику, то есть смысловое (логическое) значение элементов.

Основная цель любой HTML-верстки — передача смысла блоков. Часто помимо пользователей по нашим страницам ходят и роботы. Они собирают и анализируют информацию страницы. К примеру, поисковые роботы просматривают всю страницу и определяют ее полезность, а также уникальность. И если для человека достаточно просто поделить страницу на части и найти шапку, основной контент, футер, то для робота это достаточно сложная задача. Робот видит исключительно нашу верстку и не может «глазами» отделить части макета.

Вторая важная причина необходимости создания семантической верстки — использование страниц людьми с ограниченными возможностями. Слабовидящие пользователи используют «скринридеры» — устройства или приложения, воспроизводящие голосом элементы страницы. Чтобы скринридер мог правильно понять, где содержится основная информация, меню, поясняющие блоки и так далее, мы должны правильно разметить страницу. Это поможет устройствам правильно разбить страницу на логические блоки и дать возможность посетителям корректно перемещаться по странице. Такая концепция называется «Доступный WEB».

Для решения этих вопросов в стандарте HTML5 появилось множество семантических тегов, которыми вы можете пользоваться. В этом уроке изучим базовые семантические теги и разметим целую HTML-страницу.

Шапка сайта

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

Чтобы создать шапку сайта, используется парный тег <header>, внутри которого мы и располагаем необходимую информацию.

Один из примеров шапки сайта:

<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>

По своему поведению тег <header> работает так же, как и простой <div>. Почти все семантические элементы являются блочными и не имеют стилей по умолчанию. Это позволяет очень быстро добавить семантику в уже существующие проекты. Если стили в этих проектах не завязаны на тегах, то достаточно просто сменить название с <div> на <header>, и мы получим уже семантичную шапку сайта.

Вот и роботам не всегда просто это сделать. Конечно, они уже достаточно обучены, чтобы в таком простом наборе найти меню, но меню обычно может быть не одно и быть контекстно-зависимым. Тогда робот может принять за основное меню не то, что бы мы хотели.

Как же нам ему помочь? Для этого в стандарте HTML5 появился тег <nav>. Он обозначает навигационную область. Причем помочь отделить основное меню от меню раздела можно с помощью других тегов, речь о которых пойдет ниже.

Заменим простой блочный элемент <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> является то, что не обязательно оборачивать все меню на странице.

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

Уникальный контент

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

Для разметки уникального контента в стандарте HTML5 появился специальный тег <main>. Именно он поможет обозначить область с самым важным контентом на странице. Старайтесь в нем держать только контент. Обычно меню, боковые панели и футер в эту область не входят. Исключением может быть только ситуация, если эти блоки действительно уникальны для данной страницы. Например, меню может вести по разделам страницы. В таком случае оно на полных правах может быть включено в область уникального контента.

Добавим такую область в нашу верстку:

<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>
<main>
  <h2>Хекслет — практические курсы по программированию</h2>
  <p>
    Мы считаем, что настоящий программист должен понимать, как работает
    компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а
    не задание. Должен уметь анализировать и рассуждать на уровне проблемы и
    выше, а не только на уровне кода.
  </p>
  <p>
    При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос,
    который встает перед новичком, это не «где учиться?», а «что и в каком
    порядке учить?».    Существует множество мнений по этому поводу. Кто-то
    советует начинать с математики, кто-то советует конкретные языки и
    технологии.
  </p>
  <p>
    Хекслет — это готовый путь от абсолютного новичка до первого
    трудоустройства.
  </p>
</main>

Наличие тега <main> также очень важно для мобильных браузеров. Вы могли видеть, что многие из них имеют функцию «Режим чтения». При его включении браузер автоматически удалит все оформление и все ненужные блоки, оставив только главный контент. Этим контентом и будет являться область, заключенная в тег

<main>. Такой режим отлично подходит для людей, у которых в настоящий момент слабое подключение к интернету.

Так как внутри <main> содержится уникальный контент страницы, то разрешено использовать только один такой тег на странице.

Секции

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

С правильно разделенным контентом удобно работать. Мы легко можем перемещать такие области, менять местами или удалять. В коде их будет легко найти
Правильная группировка разделов — важная часть при создании доступного web’а

Для таких самостоятельных логических единиц существует специальный тег <section>, который внутри себя может содержать одну конкретную секцию. Добавим ее в наш пример:

<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>
<main>
  <h2>Хекслет — практические курсы по программированию</h2>
  <p>
    Мы считаем, что настоящий программист должен понимать, как работает
    компьютер, и обладать вычислительным мышлением.   Он должен видеть проблему, а
    не задание. Должен уметь анализировать и рассуждать на уровне проблемы и
    выше, а не только на уровне кода.
  </p>
  <p>
    При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос,
    который встает перед новичком, это не «где учиться?», а «что и в каком
    порядке учить?». Существует множество мнений по этому поводу. Кто-то
    советует начинать с математики, кто-то советует конкретные языки и
    технологии.
  </p>
  <p>
    Хекслет — это готовый путь от абсолютного новичка до первого
    трудоустройства.
  </p>
  <section>
    <h3>Преимущества</h3>
    <ul>
      <li>Много теории</li>
      <li>Много практики</li>
      <li>Много менторов</li>
    </ul>
  </section>
</main>

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

Как быстро определить, стоит ли включать участок контента в отдельную секцию? Все очень просто: если вы можете описать участок контента в одном или двух словах (преимущества, цены, форма заказа, каталог, контакты и так далее), то с большой вероятностью этот участок является самостоятельной секцией.

Независимые секции

Другим способом выделить логический участок текста является использование тега <article>. У вас может возникнуть вопрос: «Зачем иметь два различных тега для выделения одного и того же?»

Между <section> и <article> есть одна существенная разница: <article> является независимой секцией, то есть ее можно перенести на любую страницу сайта или даже на другой сайт, и при этом она не потеряет своего контекста.

Представьте себе блог и отдельную статью в нем. Можем ли мы понять статью, если она вдруг окажется не в блоге, а, например, на странице с услугами? Конечно! Ведь статья — это законченный текст. Следовательно, такую статью можно обернуть в тег <article>.

Добавим колонку новостей в наш пример верстки. Сразу подумаем, как она может быть разделена. Сами по себе новости являются достаточно уникальным элементом, ведь даже если их перенести на другую страницу, то они не потеряют свою актуальность. В этом случае каждую новость можно обернуть в <article>. А что делать с оберткой блока? Она объединяет по смыслу несколько различных новостей, ее можно спокойно назвать одним словом, и она точно будет иметь свой заголовок. Следовательно, ей подойдет тег <section>.

<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>
<main>
  <h2>Хекслет — практические курсы по программированию</h2>
  <p>
    Мы считаем, что настоящий программист должен понимать, как работает
    компьютер, и обладать вычислительным мышлением.  Он должен видеть проблему, а
    не задание. Должен уметь анализировать и рассуждать на уровне проблемы и
    выше, а не только на уровне кода.
  </p>
  <p>
    При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос,
    который встает перед новичком, это не «где учиться?», а «что и в каком
    порядке учить?». Существует множество мнений по этому поводу. Кто-то
    советует начинать с математики, кто-то советует конкретные языки и
    технологии.
  </p>
  <p>
    Хекслет — это готовый путь от абсолютного новичка до первого
    трудоустройства.
  </p>
  <section>
    <h3>Преимущества</h3>
    <ul>
      <li>Много теории</li>
      <li>Много практики</li>
      <li>Много менторов</li>
    </ul>
  </section>
  <section>
    <h3>Новости</h3>
    <article>
      <h4>Новость 1</h4>
      <p>Текст новости 1</p>
      <a href="#">Подробнее</a>
    </article>
    <article>
      <h4>Новость 2</h4>
      <p>Текст новости 2</p>
      <a href="#">Подробнее</a>
    </article>
    <article>
      <h4>Новость 3</h4>
      <p>Текст новости 3</p>
      <a href="#">Подробнее</a>
    </article>
  </section>
</main>

Дополняющие секции

Еще одним крупным контейнером для нашего контента служит тег <aside>. Это область с дополнительной информацией. Она может быть как связана с текущей страницей, так и не очень. Подобные секции вы можете встречать в виде боковых панелей на сайтах. Там содержится дополнительное меню, баннеры, реклама и другая информация.

Обратите внимание, что <aside> не обязан являться боковой панелью по внешнему виду. Это может быть даже дополнительная информация внутри статьи. Но чаще всего внешнее оформление у такого тега именно в виде боковой панели.

Давайте добавим такую информацию в нашу верстку. Внутри этой дополнительной секции будет находиться еще одно меню, которое не будем оборачивать в <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>
<aside>
  <div>
    <a href="#">Необязательный пункт 1</a>
    <a href="#">Необязательный пункт 2</a>
    <a href="#">Необязательный пункт 3</a>
  </div>
</aside>
<main>
  <h2>Хекслет — практические курсы по программированию</h2>
  <p>
    Мы считаем, что настоящий программист должен понимать, как работает
    компьютер, и обладать вычислительным мышлением.  Он должен видеть проблему, а
    не задание. Должен уметь анализировать и рассуждать на уровне проблемы и
    выше, а не только на уровне кода.
  </p>
  <p>
    При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос,
    который встает перед новичком, это не «где учиться?», а «что и в каком
    порядке учить?». Существует множество мнений по этому поводу. Кто-то
    советует начинать с математики, кто-то советует конкретные языки и
    технологии.
  </p>
  <p>
    Хекслет — это готовый путь от абсолютного новичка до первого
    трудоустройства.
  </p>
  <section>
    <h3>Преимущества</h3>
    <ul>
      <li>Много теории</li>
      <li>Много практики</li>
      <li>Много менторов</li>
    </ul>
  </section>
  <section>
    <h3>Новости</h3>
    <article>
      <h4>Новость 1</h4>
      <p>Текст новости 1</p>
      <a href="#">Подробнее</a>
    </article>
    <article>
      <h4>Новость 2</h4>
      <p>Текст новости 2</p>
      <a href="#">Подробнее</a>
    </article>
    <article>
      <h4>Новость 3</h4>
      <p>Текст новости 3</p>
      <a href="#">Подробнее</a>
    </article>
  </section>
</main>

Самостоятельная работа

Создайте файл index. html на своем компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

: Элемент меню — HTML: язык гипертекстовой разметки

HTML-элемент

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

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

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

Элементы

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

Связанный элемент устарел.

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

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

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

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

HTML

 <меню>

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

CSS

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

Результат

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

Спецификация
Стандарт HTML # the-menu-element

90 загрузка таблиц браузера включена.

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

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

Меню html: Тег | htmlbook.ru

Тег | htmlbook.ru

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

Описание

Синтаксис

Атрибуты

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

Валидация

Семантический HTML | Основы современной верстки

Шапка сайта

Навигация

Уникальный контент

Секции

Независимые секции

Дополняющие секции

Самостоятельная работа

Остались вопросы? Задайте их в разделе «Обсуждение»

: Элемент меню — HTML: язык гипертекстовой разметки

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

HTML

CSS

Результат

Обнаружили проблему с содержанием этой страницы?

Как создать вертикальное меню

Вертикальное меню

Как создать вертикальную группу кнопок

Шаг 1) Добавьте HTML:

Пример

Шаг 2) Добавьте CSS:

Пример

Меню вертикальной прокрутки

Пример

ВЫБОР ЦВЕТА

Лучшие учебники

Основные ссылки

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

Рубрики

Рубрики