Маркований список визначається тим, що перед кожним елементом списку додається невеликий маркер, зазвичай у вигляді закрашеного гуртка. Сам список формується за допомогою контейнера <ul> , а кожен пункт списку починається з тега <li> , як показано нижче.
<ul> <li> Перший пункт </li> <li> Другий пункт </li> <li> Третій пункт </li> </ul>
У списку неодмінно повинен бути присутнім закриває тег </ul> , інакше виникне помилка. Закриває тег </li> хоча і не обов'язковий, але радимо завжди його додавати, щоб чітко розділяти елементи списку.
У прикладі 11.1 наведено код HTML для додавання маркованого списку на веб-сторінці.
Приклад 11.1. Створення маркованого списку
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Маркований список </title> </head> <body> <hr> <ul> <li> Чебурашка </li> <li> Крокодил Гена </li> <li> Шапокляк </li> <li> Щур Лариса </li> </ul> <hr> </body> </html>
Результат даного прикладу показаний на рис. 11.1.
Зверніть увагу на відступи зверху, знизу і зліва від списку. Такі відступи додаються автоматично.
Маркери можуть приймати один з трьох видів: коло (за умовчанням), окружність і квадрат. Для вибору стилю маркера використовується атрибут type тега <ul> . Допустимі значення наведені в табл. 11.1
Тип списку | Код HTML | Приклад |
---|---|---|
Список з маркерами в вигляді кола | <ul type="disc"> <li> ... </li> </ul> |
|
Список з маркерами у вигляді кола | <ul type="circle"> <li> ... </li> </ul> |
|
Список з квадратними маркерами | <ul type="square"> <li> ... </li> </ul> |
|
Вигляд маркерів може незначно відрізнятися в різних браузерах, а також при зміні шрифту і розміру тексту.
Встановлення з квадратними маркерами показано в прикладі 11.2.
Приклад 11.2. Вигляд маркерів
<!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> Маркований список </title> </head> <body> <p> <strong> Зміна переконань </strong> </p> <ul type="square"> <li> зміна релігійної віри (на вибір: буддизм, конфуціанство, індуїзм). Спеціальна пропозиція - іудаїзм і мусульманство разом; </li> <li> зміна віри в непогрішність улюбленої партії; </li> <li> переконання в тому, що інопланетяни існують; </li> <li> перевагу політичного ладу, як самого кращого в своєму роді (на вибір: феодалізм, соціалізм, комунізм, капіталізм). </li> </ul> </body> </html>
Результат даного прикладу показаний на рис. 11.2.