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

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу <ul>. Описание тега <ul>, атрибуты тега <ul>, синтаксис тега <ul>, пример использования тега <ul>. Тег <ul> относится к группе тегов HTML списков, маркированных списков.

HTML тег <ul>. Описание <ul>.

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

HTML тег <ul>. Описание <ul>.
Тег <ul>. Синтаксис тега <ul>.
Тег <ul>. Атрибуты тега <ul>.
Теги HTML списков
Тег <ul>. Пример использования тега <ul>.

HTML тег <ul> относится к тегам предназначенным для формирования HTML списков.

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

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

Тег <ul>. Синтаксис тега <ul>.

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

<ul>

<li>Первый элемент</li>

<li>Второй элемент</li>

<li>Третий элемент</li>

</ul>

<ul>

<li>Первый элемент</li>

<li>Второй элемент</li>

<li>Третий элемент</li>

</ul>

Тег <ul>. Атрибуты тега <ul>.

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

Type – Атрибут type позволяет изменить вид маркера неупорядоченного списка.

Обратите внимание, если значения атрибута type у тега <ul> и расположенного внутри него тега <li> будут разными, то к конкретному элементу списка будет применено значение, которое присвоено тегу <li>, эта особенность справедлива и для нумерованных списков <ol>.

Теги HTML списков

В языке HTML имеется целая группа тегов предназначенных для формирования HTML списков.

Теги, формирующие HTML списки:

<dd> - контейнер для записи определения в списке определений HTML
<dl> - формирует список определений HTML
<dt> - контейнер, в который записывается термин списка определений
<li> - создает элемент списка для любого вида HTML списков
<menu> - в HTML 4 запрещен, служил для создания списка меню, в HTML 5 используется как обертка для элемента <command>
<ol> - создает нумерованный список HTML или упорядоченный список
<dir> - создает список директорий HTML

Тег <ul>. Пример использования тега <ul>.

<!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>Пример использования тега OL</title>
</head>
<body>
<ul>
<li>Первый
<ul type="square">
<li>1.1</li>
<li type="circle">1.2</li>
<li>1.3</li>
<li>1.4</li>
</ul>
</li>
<li>Второй
<ul type="circle">
<li>2.1</li>
<li type="disc">2.2</li>
<li>2.3</li>
</ul>
</li>
<li>Третий
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>

</ul>
</body>
</html>

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

<html>

<head>

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

</head>

<body>

<ul>

<li>Первый

</ul>

</li>

<li>Второй

</ul>

</li>

<li>Третий

<ul>

</ul>

</li>

</ul>

</body>

</html>

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

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