Маркированные списки в HTML
Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:
HTML КОД
| <html> <head> <title>Моя первая html страница</title> </head> <body> <p>Фрукты</p> <ul> <li>Банан</li> <li>Яблоко</li> <li>Персик</li> </ul> </body> </html> |
А вот так выглядит в браузере:
Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере
Стандартные маркеры для маркированного списка
На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:
| Название маркера | Значение атрибута "type" | Пример списка |
| Маркеры в виде круга | disc | · Земля · Сатурн · Венера |
| Маркеры в виде незакрашенного круга | circle | o HTML o JS o CSS |
| Маркеры в виде квадрата | square | § Лужа § Озеро § Море |
Маркер списка в виде пустого круга
Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение "circle" для атрибута type и задали его нашему маркированному списку:
HTML КОД
| <html> <head> <title>Пример маркированного списка с маркером в виде пустого круга</title> </head> <body> <p>Звезды:</p> <ul type="circle"> <li>Сириус</li> <li>Арктур</li> <li>Поллукс</li> <li>Бетельгейзе</li> <li>Солнце</li> </ul> </body> </html> |
Сразу смотрим как этот код будет выглядеть в браузере:
Рис. 1.2. Вид маркера для списка в виде окружности в браузере
Маркер списка в виде квадрата
Посмотрим также и последний пример с квадратным маркером для HTML списка:
HTML КОД
| <html> <head> <title>Пример маркированного списка с маркером в виде квадрата</title> </head> <body> <p>Виды птиц:</p> <ul type="square"> <li>Ара зеленокрылый</li> <li>Дрозд рябинник</li> <li>Индейка палевая</li> </ul> </body> </html> |
Обратите внимание на маркер, он стал квадратным:
Рис. 1.3. Вид маркера для списка в виде квадрата в браузере
Рис. 1.4. Ошибка на валидаторе при использовании атрибута "type" у списка
С маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах.
Нумерованные списки в HTML
В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега <ol></ol>. Как это выглядит на практике:
Пример нумерованного списка:
HTML КОД
| <html> <head> <title>Пример стандартного нумерованного списка</title> </head> <body> <p>От одного до пяти:</p> <ol> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> </ol> </body> </html> |
Таким образом выглядит нумерованный список со стандартными настройками в браузере:
Рис. 2.1. Нумерованный список в браузере со стандартными настройками
Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.