контейнер для одного <img> и ноль или больше <source>
inline
<source>
местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>
none
<img>
html-изображения
inline
<iframe></iframe>
создаёт встроенный фрейм
block
<embed>
встраивает внешний интерактивный контент или плагин
inline-block
<object></object>
контейнер для встраивания мультимедиа
inline-block
<param>
задаёт параметры для плагинов, встраиваемых с помощью элемента <object>
none
<audio></audio>
добавляет аудио-файлы
inline-block
<video></video>
добавляет видео-файлы
inline-block
<track>
субтитры для элементов <audio> и <video>
none
<map></map>
активные области на карте-изображении
inline
<area>
гиперссылка с текстом или активная область внутри карты-изображения
inline
Семантика текста
<a></a>
гиперссылка
inline
<em></em>
выделяет важные фрагменты текста курсивом
inline
<strong></strong>
выделяет полужирным важный текст
inline
<small></small>
отображает текст шрифтом меньшего размера
inline
<s></s>
перечёркивает неактуальный текст
inline
<cite></cite>
источник цитирования
inline
<q></q>
краткая цитата
inline
<dfn></dfn>
выделяет термин курсивом
inline
<abbr></abbr>
аббревиатура или акроним
none
<ruby></ruby>
контейнер для Восточно-Азиатских символов и их расшифровки
inline
<rb></rb>
обертка для аннотации
inline
<rp></rp>
тег для скобок вокруг символов
none
<rt></rt>
расшифровка символов
block
<rtc></rtc>
обертка для дополнительной аннотации
inline
<data></data>
связывает содержимое с машиночитаемым переводом
inline
<time></time>
дата / время документа или статьи
inline
<code></code>
фрагмент программного кода
inline
<var></var>
выделяет переменные из программ
inline
<samp></samp>
результат выполнения сценария
inline
<kbd></kbd>
текст, вводимый пользователем с клавиатуры
inline
<sub></sub>
подстрочное написание символов
inline
<sup></sup>
надстрочное написание символов
inline
<i></i>
выделяет текст курсивом без акцента
inline
<b></b>
задает полужирное начертание отрывка текста, без дополнительного акцента
inline
<u></u>
выделяет отрывок текста подчёркиванием, без дополнительного акцента
inline
<mark></mark>
выделяет фрагменты текста желтым фоном
inline
<bdi></bdi>
изолирует текст, читаемый справа налево
inline
<bdo></bdo>
задаёт направление написания текста
inline
<span></span>
контейнер для строчных элементов
inline
<br>
перенос текста на новую строку
none
<wbr>
возможное место разрыва длинной строки
none
Формы
<form></form>
html-форма
block
<label></label>
текстовая метка для элемента <input>
inline
<input>
многофункциональные поля формы
inline-block
<button></button>
интерактивная кнопка
inline-block
<select></select>
элемент управления с выбором значений из предложенных вариантов <option>
inline-block
<datalist></datalist>
контейнер для выпадающего списка элемента <input> с <option>-значениями
none
<optgroup></optgroup>
контейнер с заголовком для группы элементов <option>
block
<option></option>
вариант (опция) в раскрывающемся списке
block
<textarea>
многострочное поле формы
inline-block
<output></output>
поле для вывода результата вычисления
inline
<progress></progress>
индикатор выполнения задачи
inline-block
<meter></meter>
индикатор измерения в заданном диапазоне
inline-block
<fieldset></fieldset>
группирует связанные элементы в форме
block
<legend></legend>
заголовок элементов формы, сгруппированных с помощью <fieldset>
block
HTML-атрибуты: таблица глобальных атрибутов
HTML-атрибуты сообщают браузеру, каким образом должен отображаться тот или иной элемент страницы. Атрибуты позволяют сделать более разнообразными внешний вид информации, добавляемой с помощью одинаковых тегов.
Значение атрибута заключается в кавычки "". Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.
Глобальные атрибуты
Глобальные атрибуты, приведенные в таблице ниже, могут быть использованы для любого HTML-элемента, хотя некоторые из них могут не оказывать на элементы никакого влияния.
Таблица 1. Глобальные атрибуты HTML
Атрибут
Описание, принимаемое значение
accesskey
Генерирует сочетания клавиш для доступа к текущему элементу. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры. Применяется к следующим элементам: <a>, <area>, <button>, <input>, <label>, <legend>, <textarea>. Принимаемые значения: перечень названий клавиш.
class
Определяет имя класса для элемента (используется для определения класса в таблице стилей). Принимаемые значения: имя класса.
contenteditable
Определяет, может ли пользователь редактировать содержимое (контент). Позволяет преобразовать любое поле HTML в редактируемый элемент. Принимаемые значения: true/false.
dir
Определяет направление текста контента в элементах <bdo> и <bdi>. Принимаемые значения: ltr/rtl/auto.
draggable
Определяет, может ли пользователь перетащить элемент. Принимаемые значения: true/false/auto.
hidden
Указывает на то, что элемент должен быть скрыт. Принимаемые значения: hidden.
id
Определяет уникальный идентификатор элемента. Принимаемые значения: id — идентификатор элемента.
lang
Определяет код языка содержимого (контента) в элементе. Принимаемые значения: код языка.
spellcheck
Указывает, подлежит ли содержимое элемента проверке орфографии и грамматики. Принимаемые значения: true/false.
style
Указывает на код CSS, применяемую для оформления элемента. Принимаемые значения: код CSS.
tabindex
Определяет порядок перехода к элементу при помощи клавиши TAB. Принимаемые значения: порядковый номер.
title
Определяет дополнительную информацию об элементе, задавая всплывающую подсказку для страницы. Принимаемые значения: текст.
translate
Разрешает или запрещает перевод текста внутри элемента. Принимаемые значения: yes/no.
Атрибут type | htmlbook.
ru
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
3.0+
1.0+
2.0+
1.0+
1.0+
1.0+
1.0+
Спецификация
HTML:
3.2
4.01
5.0
XHTML:
1.0
1.1
Описание
Устанавливает вид маркера.
Синтаксис
<ul type="disc | circle | square">...</ul>
Значения
Для маркированного списка маркеры могут принимать один из трех видов: кружок (disc), окружность (circle) и квадрат (square). Значения атрибута type и получаемый вид показан в табл. 1.
Табл 1. Значения атрибута type
Код
Пример
<ul type=»disc»> … </ul>
Чебурашка
Крокодил Гена
Шапокляк
<ul type=»circle»> . .. </ul>
Чебурашка
Крокодил Гена
Шапокляк
<ul type=»square»> … </ul>
Чебурашка
Крокодил Гена
Шапокляк
Значение по умолчанию
disc
Аналог CSS
list-style-type
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Пример
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>Тег UL, атрибут type</title>
</head>
<body>
<ul type="circle">
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Маркеры в виде окружности
HTML 5 Справочник всех тегов онлайн и примеры
= Новое в HTML5.
Тег
Описание
<!—…—>
Определяет комментарий
<!DOCTYPE>
Определяет тип документа
<a>
Определяет гиперссылку
<abbr>
Определяет аббревиатуру или акроним
<acronym>
Не поддерживается в HTML5. Использовать <abbr> Вместо. Определяет акроним
<address>
Определяет контактные данные автора/владельца документа
<applet>
Не поддерживается в HTML5. Использовать <embed> or <object> Вместо. Определяет встроенный апплет
<area>
Определяет область внутри изображения-карты
<article>
Определяет статью
<aside>
Определяет содержание в стороне от содержимого страницы
<audio>
Определяет звуковое содержимое
<b>
Определяет полужирный текст
<base>
Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе
<basefont>
Не поддерживается в HTML5. Вместо этого используйте CSS. Задает цвет, размер и шрифт по умолчанию для всего текста в документе
<bdi>
Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами
<bdo>
Переопределяет текущее направление текста
<big>
Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет большой текст
<blockquote>
Определяет раздел, который цитируется из другого источника
<body>
Определяет тело документа
<br>
Определяет один разрыв строки
<button>
Определяет нажатую кнопку
<canvas>
Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript)
<caption>
Определяет заголовок таблицы
<center>
Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет центрированный текст
<cite>
Определяет название работы
<code>
Определяет часть кода компьютера
<col>
Задает свойства столбца для каждого столбца в <colgroup> element
<colgroup>
Задает группу из одного или нескольких столбцов в таблице для форматирования
<data>
Связывает данное содержимое с машинно-читаемым переводом
<datalist>
Задает список предварительно заданных параметров для элементов управления вводом
<dd>
Определяет описание/значение термина в списке описания
<del>
Определяет текст, который был удален из документа
<details>
Определяет дополнительные сведения, которые пользователь может просматривать или скрывать
<dfn>
Представляет определяющий экземпляр термина
<dialog>
Определяет диалоговое окно или окно
<dir>
Не поддерживается в HTML5. Использовать <ul> Вместо. Определяет список каталогов
<div>
Определяет раздел в документе
<dl>
Определяет список описания
<dt>
Определяет термин/имя в списке описания
<em>
Определяет подчеркнутый текст
<embed>
Определяет контейнер для внешнего (не HTML) приложения
<fieldset>
Группирует связанные элементы в форме
<figcaption>
Определяет заголовок для <figure> Элемент
<figure>
Указывает автономное содержимое
<font>
Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет шрифт, цвет и размер текста
<footer>
Определяет нижний колонтитул для документа или раздела
<form>
Определяет HTML-форму для ввода данных пользователем
<frame>
Не поддерживается в HTML5. Определяет окно (фрейм) в фрейме
<frameset>
Не поддерживается в HTML5. Определяет набор фреймов
<h2> to <h6>
Определяет заголовки HTML
<head>
Определяет сведения о документе
<header>
Определяет заголовок документа или раздела
<hr>
Определяет тематическое изменение содержания
<html>
Определяет корень HTML-документа
<i>
Определяет часть текста в альтернативный голос или настроение
<iframe>
Определяет встроенный фрейм
<img>
Определяет изображение
<input>
Определяет элемент управления вводом
<ins>
Определяет текст, вставленный в документ
<kbd>
Определяет ввод с клавиатуры
<label>
Определяет метку для <input> Элемент
<legend>
Определяет заголовок для <fieldset> Элемент
<li>
Определяет элемент списка
<link>
Определяет связь между документом и внешним ресурсом (наиболее используемым для связывания с таблицами стилей)
<main>
Указывает основное содержимое документа
<map>
Определяет изображение на стороне клиента-Map
<mark>
Определяет выделенный/выделенный текст
<menu>
Определяет список/меню команд
<menuitem>
Определяет команду/пункт меню, который пользователь может вызвать из всплывающего меню
<meta>
Определяет метаданные HTML-документа
<meter>
Определяет скалярное измерение в пределах известного диапазона (датчика)
<nav>
Определяет навигационные ссылки
<noframes>
Не поддерживается в HTML5. Определяет альтернативное содержимое для пользователей, которые не поддерживают кадры
<noscript>
Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента
<object>
Определяет внедренный объект
<ol>
Определяет упорядоченный список
<optgroup>
Определяет группу связанных параметров в раскрывающемся списке
<option>
Определяет параметр в раскрывающемся списке
<output>
Определяет результат вычисления
<p>
Определяет абзац
<param>
Определяет параметр для объекта
<picture>
Определяет контейнер для нескольких ресурсов изображения
<pre>
Определяет предварительно отформатированный текст
<progress>
Представляет ход выполнения задачи
<q>
Определяет краткое предложение
<rp>
Определяет, что отображать в обозревателях, не поддерживающих аннотации Ruby
<rt>
Определяет объяснение/произношение символов (для восточно-азиатских типографии)
<ruby>
Определяет аннотацию Ruby (для восточно-азиатских типографий)
<s>
Определяет текст, который больше не является правильным
<samp>
Определяет выборку выходных данных из компьютерной программы
<script>
Определяет сценарий на стороне клиента
<section>
Определяет раздел в документе
<select>
Определяет раскрывающийся список
<small>
Определяет меньший текст
<source>
Определяет несколько мультимедийных ресурсов для элементов мультимедиа (<video> И <audio>)
<span>
Определяет раздел в документе
<strike>
Не поддерживается в HTML5. Использовать <del> или <s> Вместо. Определяет текст зачеркивания
<strong>
Определяет важный текст
<style>
Определяет сведения о стиле для документа
<sub>
Определяет текст с подстрочным текстом
<summary>
Определяет видимый заголовок для <details> Элемента
<sup>
Определяет текст с надписью
<svg>
Определяет контейнер для графики SVG
<table>
Определяет таблицу
<tbody>
Группирует содержимое тела в таблице
<td>
Определяет ячейку в таблице
<template>
Определяет шаблон
<textarea>
Определяет многострочный элемент управления вводом (область текста)
<tfoot>
Группирует содержимое нижнего колонтитула в таблице
<th>
Определяет ячейку заголовка в таблице
<thead>
Группирует содержимое заголовка в таблице
<time>
Определяет дату и время
<title>
Определяет заголовок документа
<tr>
Определяет строку в таблице
<track>
Определяет текстовые дорожки для элементов мультимедиа (<video> И <audio>)
<tt>
Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет телетайп текст
<u>
Определяет текст, который должен быть стилистически отличается от обычного текста
<ul>
Определяет неупорядоченный список
<var>
Определяет переменную
<video>
Определяет видео или фильм
<wbr>
Определяет возможный разрыв строки
Список HTML тегов на одной странице. Справочник по тегам HTML5
Тег
Краткое описание
<!—…—>
Комментарий. Подробнее
<!DOCTYPE>
Определяет тип документа. Подробнее
<a>
Ссылка, гиперссылка, якорь. Подробнее
<abbr>
Определяет текст как аббревиатуру. Подробнее
<address>
Контактная информация автора или владельца документа. Подробнее
<area>
Определяет область на карте-изображении
<article>
Статья
<aside>
Контент в стороне (содержимое не является основным на странице по смыслу)
<audio>
Позволяет вставить воспроизводимый аудио файл. Подробнее
<b>
Полужирный текст. Подробнее
<base>
Задает базовый URL или атрибут target для относительных ссылок в документе. Подробнее
<bdi>
Область, где написание текста может имееть другое направления. Подробнее
<bdo>
Устанавливает направление написания текста. В отличии от <bdi> направление указывается физическое направление Подробнее
<blockquote>
Цитата. Подробнее
<body>
Указывает область body документа. Подробнее
<br>
Перенос строки. Подробнее
<button>
Кликабельная кнопка. Подробнее
<canvas>
Используется для рисовании графики с помощью скриптов
<caption>
Подпись таблицы. Подробнее
<cite>
Сноска на название материала. Подробнее
<code>
Используется для вставки компьютерного кода в текстовом виде. Подробнее
<col>
Задает характеристики колонок в таблице. Подробнее
<colgroup>
Определяет группу из одной или более колонок таблицы для форматирования. Подробнее
<datalist>
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле. Подробнее
<dd>
Определяет описание термина из тега <dt> в списке терминов <dl>. Подробнее
<del>
Текст, который удален в новой версии документа. Подробнее
<details>
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть. Подробнее
<dfn>
Указывает, что содержимое является термином. Подробнее
<dialog>
Определяет диалоговое окно или интерактивный элемент
<div>
Блочный элемент — один из основных элементов верстки. Подробнее
<dl>
Определяет список определений. Подробнее
<dt>
Название термина в списке определений <dl>. Подробнее
<em>
выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее
<embed>
Контейнер для внешнего приложения
<fieldset>
Группа связанных элементов в форме. Подробнее
<figcaption>
Заголовок для <figure> элемента
<figure>
Определяет автономную группу из нескольких элементов (например картинка с подписью)
<footer>
Нижний колонтитул
<form>
Определяет форму пользовательского ввода. Подробнее
Горизонтальная линия — тематический разделитель. Подробнее
<html>
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее
<i>
Выделяет текст курсивом. Подробнее
<iframe>
Определяет встроенный фрейм
<img>
Изображение, картинка. Подробнее
<input>
Поле для ввода, элемент формы. Подробнее
<ins>
Текст, который был добавлен в новой версии документа. Подробнее
<kbd>
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее
<label>
Метка для поля ввода. Обычно содержит подпись поля. Подробнее
<legend>
Заголовок элементов <fieldset>. Подробнее
<li>
Элемент списка. Подробнее
<link>
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS). Подробнее
<main>
Основной контент
<map>
Контейнер для <area>. Определяет пользовательскую карту на изображении
<mark>
Выделенный текст (обычно с помощью подсветки фона). Подробнее
<menu>
Контейнер для списка пунктов меню
<menuitem>
Определяет элементы, которые пользователь может вызвать из контекстного меню
<meta>
Используется для определения мета-данных документа. Подробнее
<meter>
Измеритель значений в заданном диапазоне
<nav>
Контейнер для навигационных элементов
<noscript>
Альтернативный контент для пользователей, отключивших скрипты
<object>
Определяет встроенный объект
<ol>
Определяет нумерованный список. Подробнее
<optgroup>
Определяет группу связанных вариантов в выпадающем списке. Дает название группы. Подробнее
<option>
Параметр (вариант выбора) в выпадающем списке. Подробнее
<output>
Результат вычислений. Подробнее
<p>
Абзац. Подробнее
<param>
Задает параметры для встроенных объектов
<picture>
Контейнер для нескольких изображений
<pre>
Предварительно отформатированный текст. Подробнее
<progress>
Индикатор выполнения (прогресса)
<q>
Цитата в тексте. Подробнее
<rp>
Альтернативный текст, если браузер не поддерживает тег <ruby>. Подробнее
<rt>
Аннотация к содержимому тега <ruby>. Подробнее
<ruby>
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее
<s>
Перечеркнутый текст. Подробнее
<samp>
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее
<script>
Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее
<section>
Раздел
<select>
Определяет выпадающий список или список с множественным выбором. Подробнее
<small>
Текст шрифтом меньшего размера. Подробнее
<source>
Определяет ресурс для тегов <video>, <audio> и <picture>. Подробнее
<span>
Строчный элемент. Подробнее
<strong>
Текст, выделенный по значению. Обычно отображается полужирным. Подробнее
<style>
Определяет контейнер для определения CSS стилей документа. Подробнее
<sub>
Отображает текст в виде нижнего индекса. Подробнее
<summary>
Заголовок внутри тега <details>. Подробнее
<sup>
Отображает текст в виде верхнего индекса. Подробнее
<table>
Определяет таблицу. Подробнее
<tbody>
Определяет область контента в таблице. Подробнее
<td>
Ячейка в таблице <table>. Подробнее
<textarea>
Многострочное поле для ввода. Подробнее
<tfoot>
Определяет группу строк в нижней части таблицы <table> — нижний колонтитул. Подробнее
<th>
Ячейка — заголовок в таблице <table>. Подробнее
<thead>
Определяет группу строк в верхней части таблицы <table> — верхний колонтитул. Подробнее
<time>
Дата и/или время. Подробнее
<title>
Заголовок HTML документа. Подробнее
<tr>
Определяет строку в таблице. Подробнее
<track>
Определяет текстовую дорожку для тегов <video> и <audio> Подробнее
<ul>
Определяет маркированный список. Подробнее
<var>
Используется для обозначения содержимого тега как переменной. Подробнее
<video>
Позволяет вставить воспроизводимое видео. Подробнее
<wbr>
Место, где допускается перенос строки. Подробнее
Списки в HTML (XHTML)
Списки в HTML (XHTML)
Списки в HTML (XHTML) используются для оформления и форматирования видимой текстовой части html-документа. Дополнительно, на основании кодов списков, в HTML-разметке веб-страницы создаются и группируются элементы управления и навигации – кнопочки и менюшки (простые и выпадающие). Коды списков языка гипертекстовой разметки HTML ничем не отличаются от кодов списков XHTML…
Код и видимая часть списков HTML
Виды списков в HTML
Теги списков в HTML <ul>,<ol>,<li>,<dl>, dt>,<dd>
Как создать список в html
Примеры списков html
Код и видимая часть списков HTML
Равно как и все объекты веб-страницы, списки в HTML имеют две составляющие – код списка и его видимую часть (интерпретацию кода). Код списка HTML невидим пользователю. Код записывается в HTML-разметку веб-документа и интерпретируется браузером непосредственно на экран монитора пользователя – это будет видимая часть списка.
Виды списков в HTML
В HTML существует три вида списков – маркированный, нумерованный и список определений. Все виды списков могут быть многоуровневыми и содержать вложенные списки. Степень и вложенность списков определяется их кодом – порядком записи тегов.
Теги списков в HTML
Для создания кода списков в HTML используются теги: <ul>, <ol> и <li>, а также <dl>, <dt> и <dd> Все теги парные – закрывающий тег обязателен. Теги списков в HTML создают и обозначают:
<ul> – маркированный список
<ol> – нумерованный список
<li> – элементы (строки) маркированного и нумерованного списков
<dl> – список определений
<dt> – элемент-термин в списке определений
<dd> – элемент-описание в списке определений
Как создать список в html
Чтобы создать список в веб-документе, нужно в его HTML-разметке написать html-код списка. Код любого html-списка начинается и заканчивается обрамляющими (оборачивающими) тегами (ol, ul, dl) которые указывают браузеру на вид списка. Между оборачивающими (обрамляющими) тегами располагаются элементы списка, обёрнутые, в свою очередь – тегами элементов списка (li, dd, dt).
Существует множество визуальных html-редакторов, облегчающих работу по созданию разнообразных списков. В этой статье, речь – непосредственно про коды списка на веб-странице. Выбор способа создания кода, в Notepad-е (блокноте) или в хитрющем html-редакторе – личное дело юзера. Практически все текстовые html-редакторы слишком упрощённо подходят к созданию html-списков.
Маркированный html-список | Теги <ul> и <li>
Код маркированного списка начинается с открывающего тега <ul>. Потом идут элементы, обрамлённые парными тегами <li></li>. Код маркированного списка заканчивается закрывающим тегом </ul>. Пример кода маркированного списка:
Маркированный (неупорядоченный) список по-англицки звучит, как Unordered List. Становится понятной аббревиатура его обрамляющего тега – <ul> (Unordered List). Написание тега <ul> заглавными литерами – <UL>. В спецификации HTML нет верхнего регистра. Правильно писать – <ul>
Нумерованный html-список | Теги <ol> и <li>
Код нумерованного списка ничем не отличается от кода маркированного списка, с той разницей, что обрамляющие список теги <ul> заменяются на <ol> (анг. Ordered List – нумерованный, упорядоченный список). Код нумерованного списка открывает тег <ol>. Внутри находятся элементы, обрамлённые парными тегами, вида <li>элемент</li>. Закрывается код нумерованного списка тегом </ol>. Пример кода нумерованного списка:
Вложенные (многоуровневые, ступенчатые) списки в HTML представляют наибольший интерес. Чтобы создать многоуровневый вложенный список в HTML, нужно в код одного списка вставить код другого списка. Код вложенного списка вставляется в виде отдельного элемента, между тегами <li></li>. Порядок и степень вложения не имеет значения. Допускается вкладывать маркированный список в нумерованный и наоборот, на любую глубину и пока не надоест. Браузер всё вытерпит. Пример кода многоуровневого списка со вложенными списками (код основного списка обозначен синим цветом, первого вложенного – жёлтым, второго вложенного – зелёным):
<ol>
<li>Первый элемент основного списка
<ol>
<li>Раз (вложенный список)</li>
<li>Два (вложенный список)</li>
<li>Три (вложенный список)
<ul>
<li>1 (второй вложенный)</li>
<li>2 (второй вложенный)</li>
<li>3 (второй вложенный)</li>
</ul>
</li>
</ol>
</li>
<li>Второй элемент основного списка</li>
<li>Третий элемент основного списка</li>
</ol>
Выглядит в браузере:
Первый элемент основного списка
Раз (вложенный список)
Два (вложенный список)
Три (вложенный список)
1 (второй вложенный)
2 (второй вложенный)
3 (второй вложенный)
Второй элемент основного списка
Третий элемент основного списка
Список определений | Теги <dl>, <dt> и <dd>
Список определений (описаний, объяснений) – перечень терминов и пояснений к ним. Этот вид текстовой записи списка специально придуман для объяснения и описания терминов и определений, например – описания списка товаров. Список определений отличается от обычных списков. Элементы списка определений разделены на две части – слово (термин) и его описание (определение, пояснение для этого слова или термина).
Код списка определений начинается открывающим тегом <dl> (анг. Definition Lists – список определений). После него идёт элемент-термин списка, который требуется объяснить – этот элемент обрамлён парным тегом <dt></dt>. Дальше идёт текстовый объясняющий элемент списка, он обрамлён парным тегом <dd></dd>. Код списка определений заканчивается закрывающим тегом </dl>. Пример кода списка определений:
Для усиления визуального эффекта использован CSS, который к данному коду не имеет никакого отношения.
Элементы списка определений не имеют бу́ллетов – специальных типографских знаков. В HTML, списки определений существует исключительно для создания описаний и оформления текстовой видимой части веб-документа. Маркированный и нумерованный списки значительно универсальней и разнообразней. Управление их внешним видом производится при помощи атрибутов тегов списка и атрибутов тегов элементов (строк) списка. Дополнительно, маркированный и нумерованный списки используются в html-разметке веб-страниц для создания и группирования элементов управления и навигации.
Ненумерованные и немаркированные списки
Список без ничего – без нумерации, маркировки и прочих списочных причиндалов (бу́ллетов), получится из маркированного или нумерованного списка, после присвоения последнему свойства list-style:none;
Более сложный способ скрыть/убрать бу́ллеты (маркеры) у списка – это добавить ему свойство overflow: hidden;, которое обрезает выступающую за пределы списка маркировку (нумерацию, или что там у него есть). Прим. Обрезание маркеров (overflow: hidden;) работает только за пределами списка – свойство list-style-position: outside; Это свойство устанавливается дефолтными настройками по-умолчанию для всех видов браузеров и, если специально нигде не указано другое (list-style-position:inside;) то тогда добавляем просто overflow: hidden;. Пример кода немаркированного и ненумерованного списка (<ul> или <ol>, не важно):
<ul style="list-style:none;">
<li>Немаркированные и ненумерованные строки</li>
<li>Немаркированные и ненумерованные строки</li>
<li>Немаркированные и ненумерованные строки</li>
</ul>
Выглядит в браузере:
Немаркированные и ненумерованные строки
Немаркированные и ненумерованные строки
Немаркированные и ненумерованные строки
То же самое, через overflow: hidden;, при условии что list-style-position:outside; (маркеры списка находятся за пределами текста списка):
<ul style="overflow: hidden;">
<li>Немаркированные и ненумерованные строки</li>
<li>Немаркированные и ненумерованные строки</li>
<li>Немаркированные и ненумерованные строки</li>
</ul>
Выглядит в браузере:
Немаркированные и ненумерованные строки
Немаркированные и ненумерованные строки
Немаркированные и ненумерованные строки
Выпадающие списки
Выпадающие списки стоят особняком в HTML(XHTML).
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
Оформление списков в html Обтекание картинок html-списками
Интернетчик: HTML, интернет, сайт
Учебник HTML 5. Статья «Списки»
Списки представляют собой упорядоченный набор значений, который помогает нам систематизировать важную информацию, делая ее более доступной для понимания. Язык гипертекстовой разметки HTML позволяет составлять списки по следующим правилам:
Нумерованный (упорядоченный) список.
Маркированный (неупорядоченный) список.
Список описаний.
Список контекстных меню.
Нумерованный список
Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега <ol> (сокращенное от английского ordered list — упорядоченный список). Каждый элемент списка начинается с тега <li> (элемент списка).
Выглядеть на странице это будет соответственно так:
Первый пункт.
Второй пункт.
Третий пункт.
Если вы хотите, чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега <ol>.
Например:
<ol start = "101"> <!--список начнётся с номера 101-->
Выглядеть на странице это будет соответственно так:
Первый пункт.
Второй пункт.
Третий пункт.
Ещё один интересный атрибут — type, который позволит Вам задать буквенную нумерацию («A» – большие, «a» – строчные), либо нумерацию из римских цифр («I» – в верхнем регистре, «i» – в нижнем регистре).
Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):
<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута type HTML тега <оl></title>
</head>
<body>
<ol type = "A"> <!--указываем, что список формируется в алфавитном порядке заглавными буквами -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
<ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
<ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
<ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
</body>
</html>
Результат нашего примера:
Рис. 14 Виды нумерованных списков.
Еще один нюанс: при использовании атрибута start с буквами (type = «A» и type = «a»), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = «4», будет соответствовать букве «D» и список начнётся именно с неё. При использовании значения start = «27» счетчик обнуляется, при этом список становится двухзначным («27» = «AA», «28» = «AB», «29» = «AC»…). Значения должны быть целочисленными, допускается использование отрицательных значений.
Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка <li>):
<!DOCTYPE html>
<html>
<head>
<title>Пример нумерованного списка, вложенного в другой нумерованный список</title>
</head>
<body>
<ol>
<li>Первый пункт
<ol> <!--открываем новый нумерованный список внутри элемента списка-->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
</body>
</html>
Выглядеть на странице это будет соответственно так:
Первый пункт.
Первый пункт.
Второй пункт.
Третий пункт.
Второй пункт.
Третий пункт.
Но и это еще не все, атрибут reversed элемента позволяет задать, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.
Выглядеть на странице это будет соответственно так:
Первый пункт.
Второй пункт.
Третий пункт.
Маркированный список.
Маркированный (неупорядоченный) список в HTML определяется тегом <ul> (Unordered List Element). Каждый элемент списка должен начинаться с тега <li> (сокращенное от английского list item — элемент списка).
По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга.
Выглядеть на странице это будет соответственно так:
Светлое
Тёмное
Пятница
Забегая вперед, скажу, что каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть сделано с использованием глобального атрибута style. Более подробно этот атрибут будет рассмотрен в следующей статье «HTML стили».
Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера. Возможные значения свойства:
Атрибут
Значение
list-style-type:none
Убирает маркер.
list-style-type:disc
Маленький черный круг. Это значение по умолчанию.
list-style-type:circle
Круг пустой внутри.
list-style-type:square
Маркер в виде квадрата.
Ниже приведен пример использования стилей CSS внутри маркированного списка:
Обращаю Ваше внимание, что допускается формировать маркированные (неупорядоченные) списки, вложенные в другие маркированные списки (внутри элемента списка <li>) при этом элементы вложенного списка по умолчанию будут с пустым кругом внутри, a последующие будут с квадратом:
Первый пункт
Первый пункт
Первый пункт
Первый пункт
Второй пункт
Третий пункт
Второй пункт
Третий пункт
Второй пункт
Третий пункт
Второй пункт
Третий пункт
Список описаний
Списки описаний используются для формирования пар типа «имя/значение» / «вопрос/ответ» и т.п.
Тэг <dl> (HTML Description List Element) определяет список, тэг <dt> (HTML Definition Term Element) определяет его имя, а тег <dd> (HTML Description Element) описывает его значение.
Рассмотрим пример использования:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования списка описаний</title>
</head>
<body>
<dl>
<dt>Жамевю</dt>
<dd>состояние, противоположное дежавю, внезапно наступающее ощущение того, что хорошо знакомое место
или человек кажутся совершенно неизвестными или необычным.</dd>
<dt>Фасцинация</dt>
<dd>повышение эффективности воспринимаемого материала через использование сопутствующих (фоновых) воздействий.</dd>
</dl>
</body>
</html>
Как вы можете заметить значение списка описаний (элемент <dd>) имеет по умолчанию внешний отступ с левой стороны равный 40 пикселям:
Рис. 16 Список описаний.
Обращаю Ваше внимание, что допускается формировать списки описаний, вложенные в другие списки описаний (внутри элемента значения списка <dd>).
Маркированные (неупорядоченные), нумерованные (упорядоченные) и списки описаний внутри себя могут содержать элементы нового списка (внутри элементов списка / значений списка), другие элементы HTML, такие как, изображения, ссылки и т.д. Списки можно размещать горизонтально, формировать из них меню навигации и так далее. Более подробно о возможностях CSS (каскадных таблицах стилей) и некоторых особенностях HTML 5 вы узнаете позднее.
Список контекстных меню
Тег <menu> используется для контекстных меню, панелей инструментов и для включения элементов управления формы.
Тег <menuitem> определяет элемент команды / меню, который пользователь может вызвать из контекстного меню.
В настоящее время теги <menu> и <menuitem> имеют очень ограниченную поддержку браузерами и практически не используется по этой причине:
Рассмотрим пример для расширения кругозора:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования тега <menu></title>
</head>
<body>
<div contextmenu = "testmenu"> <!-- определяем, для блока контекстное меню -->
Кликни по мне правой кнопкой мыши.
<menu type = "context" id = "testmenu"> <!-- создаем контекстное меню -->
<menuitem label = "like"></menuitem> <!-- определяем первый элемент меню -->
<menuitem label = "dislike"></menuitem> <!-- определяем второй элемент меню -->
</menu>
</div>
</body>
</html>
Кликни по мне правой кнопкой мыши.
Для тех у кого браузер не отображает результат:
Использование глобального атрибута contextmenu, тегов <menu> и <menuitem>.
Элемент <div>, который был использован в этом примере будет подробно рассмотрен в статье учебника «Теги разметки страницы».
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы выполните практические задания.
Используя полученные знания составьте следующие HTML списки:
Практическое задание № 6.
Практическое задание № 7.
Практическое задание № 8.
Практическое задание № 9.
Если у Вас есть затруднения в составлении какого-то списка, то внимательно перечитайте статью еще раз, если вы не найдете ответа на ваш вопрос, то проинспектируйте код страницы, открыв пример в отдельном окне кликнув по изображению.
HTML Ссылка
Тег
Описание
Определяет комментарий
Определяет вид документа
Определяет гиперссылку
Определяет аббревиатуру или акроним
<аббревиатура>
Не поддерживается в HTML5.Вместо этого используйте . Определяет аббревиатуру
<адрес>
Определяет контактную информацию автора / владельца документа
<приложение>
Не поддерживается в HTML5. Вместо этого используйте
<зона
Определяет область внутри карты изображения
<статья>
Определяет артикул
<сторона>
Определяет содержимое помимо содержимого страницы
<аудио>
Определяет встроенный звуковой контент
Определяет полужирный текст
<база>
Определяет базовый URL-адрес / цель для всех относительных URL-адресов в документе.
<баз.
Не поддерживается в HTML5.Вместо этого используйте CSS. Задает цвет, размер и шрифт по умолчанию для всего текста в документе.
Изолирует часть текста, которая может быть отформатирована в другом направлении. из другого текста вне его
Заменяет текущее направление текста
<большой>
Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет большой текст
Определяет раздел, цитируемый из другого источника
<тело>
Определяет тело документа
Определяет одинарный разрыв строки
<кнопка>
Определяет кнопку, на которую можно нажимать
<холст>
Используется для рисования графики «на лету» с помощью сценариев (обычно JavaScript).
<заголовок>
Определяет заголовок таблицы
<центр>
Не поддерживается в HTML5.Вместо этого используйте CSS. Определяет центрированный текст
Определяет название работы
<код>
Определяет часть компьютерного кода
Задает свойства столбца для каждого столбца в элементе
Определяет группу из одного или нескольких столбцов в таблице для форматирования.
<данные>
Добавляет машиночитаемый перевод заданного содержания
<специалист по данным>
Определяет список предопределенных параметров для элементов управления вводом
Определяет описание / значение термина в списке описаний
Определяет текст, который был удален из документа
<подробности>
Определяет дополнительные сведения, которые пользователь может просматривать или скрывать.
Определяет термин, который будет определен в содержимом
<диалог>
Определяет диалоговое окно или окно
Не поддерживается в HTML5.Вместо этого используйте
. Определяет список каталогов
Определяет раздел в документе
Определяет список описаний
Определяет термин / имя в списке описаний
Определяет выделенный текст
<вставка>
Определяет контейнер для внешнего приложения
Группирует связанные элементы в форме
Определяет заголовок для элемента
<рисунок>
Определяет автономное содержимое
Не поддерживается в HTML5.Вместо этого используйте CSS. Определяет шрифт, цвет и размер текста
<нижний колонтитул>
Определяет нижний колонтитул для документа или раздела
<форма>
Определяет HTML-форму для ввода данных пользователем
<рамка>
Не поддерживается в HTML5. Определяет окно (фрейм) в наборе фреймов
<набор кадров>
Не поддерживается в HTML5. Определяет набор фреймов
до
Определяет заголовки HTML
<заголовок>
Содержит метаданные / информацию для документа
<заголовок>
Определяет заголовок документа или раздела
<час>
Определяет тематическое изменение содержания
Определяет корень HTML-документа
Определяет часть текста альтернативным голосом или настроением
<кадр>
Определяет встроенный фрейм
Определяет изображение
<вход>
Определяет элемент управления вводом
Определяет текст, который был вставлен в документ
<КБД>
Определяет ввод с клавиатуры
<метка>
Определяет метку для элемента
<легенда>
Определяет заголовок для элемента
Определяет элемент списка
<ссылка>
Определяет связь между документом и внешним ресурсом (большинство используется для ссылки на таблицы стилей)
<основной>
Определяет основное содержание документа
<карта>
Определяет карту изображения
<марка>
Определяет выделенный / выделенный текст
Определяет метаданные о документе HTML
<метр>
Определяет скалярное измерение в известном диапазоне (датчик)
Атрибуты позволяют сделать более разнообразными внешний вид информации, добавляемой с помощью одинаковых тегов.
ru
..
1.
Вместо этого используйте CSS.
Вместо этого используйте CSS.
Использовать <ul> Вместо.
Использовать <del> или <s> Вместо.
Вместо этого используйте CSS.
Подробнее
Подробнее
Подробнее
Подробнее