HTML теги. HTML списки. Список меню | IT-блог о веб-технологиях, серверах, протоколах, базах данных, СУБД, SQL, компьютерных сетях, языках программирования и создание сайтов.

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена спискам меню HTML. Список меню формируется тегами <menu>, <li> в HTML 4 и тегами <menu>, <li>, <input>, <command> в HTML 5.

Список директорий. Формирования списка директорий в HTML. Теги <dir>, <li>.

Содержание статьи:

Список директорий. Формирования списка директорий в HTML. Теги <dir>, <li>.
Синтаксис списка меню
Атрибуты тегов списка меню
Другие HTML списки
Пример формирования списка определений

Как говорилось ранее, списки меню формируются двумя тегами <menu>, <li> в HTML 4, а в HTML 5 тег <menu> создает меню на сайте вместе с тегами <input>, <command> и <li>. Списки меню - это одна из разновидностей HTML списков.

Тег <li> предназначен для формирования элементов списка меню, то есть, тег <li> формирует пункты HTML списка. Элемент <li> является блочным HTML элементом, внутри него могут располагаться любые HTML элементы, а его ширина зависит от области в которой он находится.

Тег <menu> предназначен для формирования списка меню. Тег <menu> является запрещенным в HTML 4, поэтому валидный код будет только при использование переходного <!DOCTYPE>. В HTML 5 тег <menu> был снова введен, но его назначение далеко от создания списков.

Если к списку меню не применяются дополнительные стили и правила CSS, то браузер отобразит их шрифтом, заданным по умолчанию.

Синтаксис списка меню

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

<menu>

<li>Раз</li>

<li>Два</li>

</menu>

<menu>

</menu>

Атрибуты тегов списка меню

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

Label – Атрибут label служит для создания видимой метки

Type – При помощи атрибута type можно задать тип меню

Тег <li> имеет все универсальные HTML атрибуты, атрибуты событий и два уникальных атрибута:

Value – атрибут value изменяет значение нумерации, но это в случае с упорядоченным списком

Type – атрибут type изменяет вид маркера, как в списке директорий, так и в маркированном списке, и списке меню.

Другие HTML списки

Помимо списка меню. Есть еще четыре HTML списка:

Маркированный список – второе название не упорядоченный список, данный список HTML формируется тегами <ul>, <li>
Нумерованный список – другое название упорядоченный список, этот HTML список формируется тегами <ol>, <li>
Список определений – данный вид HTML списка формируется при помощи тегов <dl> , <dd>, <dt>
Список директорий – данный вид HTML списка формируется при помощи тегов <dir>, <li>

Тег <ul> формирует маркированный список. Тег <ol> формирует нумерованный список. Тег <dl> формирует список определений. Контейнер <dt> служит для хранения и отображения термина списка определений. В контейнер <dd> помещается определение термина списка определений. Тег <dir> создает список директорий.

Пример формирования списка определений

Пример использования в HTML 4, крайне не рекомендуется это делать:

<!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>
<menu>
<li>Первый пункт</li>
<li>Второй пункт
<dir>
<li>Первый подпункт</li>
<li>Второй подпункт</li>
</dir>
</li>
<li>Третий пункт</li>
</menu>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Пример использования тега MENU</title>

</head>

<body>

<menu>

<li>Первый пункт</li>

<li>Второй пункт

<dir>

<li>Первый подпункт</li>

<li>Второй подпункт</li>

</dir>

</li>

<li>Третий пункт</li>

</menu>

</body>

</html>

Пример использования в HTML 5:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример использования тега MENU в HTML 5</title>
</head>
<body>
<menu type="context">
<menu label="Переключи">
<li><input type="checkbox" />Активируй</li>
<li><input type="checkbox" />Можешь вот тут еще нажать</li>
</menu>
<menu label="Выбери">
<input type="radio">Раз</button>
<input type="radio">Два</button>
<input type="radio">Три</button>
</menu>
</menu>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Пример использования тега MENU в HTML 5</title>

</head>

<body>

<li><input type="checkbox" />Активируй</li>

<li><input type="checkbox" />Можешь вот тут еще нажать</li>

</menu>

</menu>

</body>

</html>

Если вы скопируете примеры в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:

Пример использования тега <menu> в HTML 4:

Пример использования тега <menu> в HTML 4

Пример использования тега <menu> в HTML 5:

Пример использования тега <menu> в HTML 5

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru