Здрастуйте, шановні читачі блогу . Сьогодні в рамках цієї рубрики я хочу поговорити про різноманітних Html списках, які можна створити на основі спеціально призначених для цього тегів UL, OL, LI і DL. З допомогою пари UL і LI створюються марковані списки, з допомогою OL і LI — нумеровані, а з допомогою елементів DL, DT, DD створюються так звані лістинги визначень. Так само ми розглянемо коротко принципи створення вкладених конструкцій.
Хочу нагадати вам, що ми вже встигли розглянути мову Html і валідатор W3C, як задаються кольори в коді вебсторінок, встигли поговорити про основи сучасної верстки, а так само табличної верстки (тут). Крім цього ми торкнулися основи формування директиви Doctype та оформлення коментарів в коді, ну і дізналися як вставити в Html картинку через тег Img.
Марковані списки на основі тегів UL і LI
Для створення маркованих списків використовується тег UL, а для створення нумерованих – OL. Ці теги є парними і блоковими, точно так само, як і елемент LI.
Між відкриваючим і закриваючим тегом розташовуються окремі пункти списку, які в свою чергу полягають в відкриваючий і закриваючий елемент LI. Зверху і знизу списків Html браузер додає відступ в один рядок, подібні або вставкам, створюваним тегом абзацу.
Давайте подивимося, наприклад, маркований варіант, який може виглядати так:
- Перший рядок
- Друга
- Останній елемент
Всередині відкриває і закриває тегів UL можуть стояти тільки елементи LI, а вже всередині самих цих елементів (пунктів) можна вставляти будь-який контент (текст, малюнки, заголовки, абзаци, посилання, і навіть інші списки).
Тобто UL служить тільки для організації маркованого (не впорядкованого) лістингу, а все, що ви будете бачити на web сторінці всередині нього, реалізується з допомогою вмісту елементів LI.
Для UL можна змінювати вигляд маркера, прописуючи в ньому різні значення для атрибуту «Type». Якщо «Type» (управління зовнішнім виглядом маркерів) для елемента UL не вказано, то буде відображатися вид маркера, прийнятого за замовчуванням (disc — пофарбовані в колір тексту гурток):
- — зафарбований гурток (за замовчуванням);
- — не зафарбований гурток;
- – квадрат
У наведених прикладах атрибут «Type» ми прописували в елементі UL, застосовуючи даний тип маркерів для всіх пунктів. Але атрибут «Type» можна прописати і для кожного окремого теґу LI, задавши для цього пункту свій власний тип маркера.
Приклад маркірованого списку з різними типами маркера для кожного пункту:
Нумеровані списки в Html на основі тега OL
Для створення нумерованого лістингу використовуються теги OL, всередині яких знову ж будуть розташовані елементи LI. OL і LI, як я вже згадував, є блоковими (тобто прагнуть зайняти все їм доступне місце по ширині) і всередині OL не можна буде розміщувати нічого крім елементів LI.
Виходить, що і UL OL — це службові теги, які потрібні тільки для того, щоб вказати браузеру, який саме вид списку ми формуємо (маркірований або нумерований). У разі нумерованого — зліва від кожного пункту ми будемо бачити маркер, а цифру і що стоїть за нею точку:
Як я вже згадував трохи вище, у елементів UL, OL і LI є можливість використовувати атрибут TYPE. Він дозволяє налаштувати тип маркера або задати, якими цифрами або літерами будуть нумеруватися пункти лістингу. Для нумерованого списку параметри цього атрибута можуть приймати наступні значення:
Приклад нумерованого списку з різними типами нумерації для кожного пункту:
При створенні списків є можливість почати нумерацію не з одиниці, а з заданого в атрибуті START числа. Наприклад:
Для OL так само можна почати нову нумерацію з будь-якого значення, починаючи з будь-якого пункту, прописавши у початковому LI цього пункту атрибут VALUE з необхідним числом. Наприклад:
Оформлення зовнішнього вигляду списків в CSS (таблицях стилів)
Але, як правило, зараз зовнішній вигляд маркера задається не через атрибут TYPE, а за допомогою селекторів класу або Id, для яких прописуються відповідні властивості.
У правилах CSS, прописаних для цього класу або Id, вказується, яка картинка буде використовуватися в якості маркера, на якій відстані маркер буде відстояти від тексту і ще багато чого. Подробиці дивіться в статті про властивості таблиць стилів List style ( type, image, position).
Тут я просто наведу приклад різних маркерів для ненумерованих списків, зовнішній вигляд яких задається через окремий файл каскадних таблиць стилів.
- Перший пункт
- Другий
- Останній
Але а про тонкощі роботи з CSS ми поговоримо в наступних статтях. Саме таким способом визначається зовнішній вид маркерів для UL на цьому блозі. В якості маркерів використовуються картинки: для звичайних пунктів не нумерованого списку 
, для вкладених пунктів ненумерованного — 
.
Спеціальні та вкладені списки в Html коді
Третій і останній вид називається «списки визначень» і вони задаються за допомогою трьох тегів — DL, DT, DD. DL повідомляє браузеру, що далі піде список визначень.
Зазвичай такий вид використовується (ну, або передбачалося, що він буде використовуватися) для написання словникових статей, що складаються з термінів укладених теги DT) та їх описів (укладених теги DD).
Перший термін
Опис
Другий термін
Його опис
Якщо ви подивитеся на наведений вище приклад, то помітите, що елемент DD (опис терміна) зсувається (на 40 пікселів) щодо елемента DT (самого терміна).
Взагалі, DL, DT, DD є блоковими тегами, причому всередині елемента DT можна вставляти тільки контент з малими тегами (виходить, що всередині DT можна буде використовувати блочні елементи заголовків і абзаців). А всередині тегів DD можна вставляти будь-які елементи і рядкові і блокові.
Вкладений список в Html створюється за аналогією з простим, але всередині основного списку частина пунктів полягає ще раз в відкриваючий і закриваючий тег UL або OL.
Зверніть увагу, що закриває LI того пункту, в якому буде створено вкладений пункт, ставиться лише після коду вкладеного списку (це дуже важливо для її правильного відображення на веб сторінці). Вкладений список може виглядати приблизно так:
- Перший елемент вкладеного маркованого
- Другий
- Третій і останній пункт маркованого
Удачі вам! До зустрічей на сторінках блогу
