Представление данных через списки может быть использовано для систематизации информации, формирования критериев, создания меню и навигации по страницам веб-ресурса. Списочное представление данных актуально и практично для любой области применения. Стандарт HTML предлагает простой и удобный механизм описания списков и коллекций данных.
Системы, категории и списки
Категории, последовательности и системы отношений – важные моменты в области обработки данных. Характерная особенность: в информационной сфере все так просто выглядит на естественном языке и все так сложно получается, когда дело доходит до формализации и обработки данных.
Вам будет интересно:Классы в CSS. Имена классов
В современных алгоритмах термин «информация» – это смысл термина «данные». Сказать, что алгоритм работает с информацией, и разработчик создал информационную систему – слишком громкое заявление, вызывающее сомнения, при текущем положении вещей.
Разработчикам нравится повышать свой рейтинг силой красивого слова, а не реально работающей системой. Это хорошее качество, как минимум:
- есть к чему стремиться;
- есть цель;
- активно формируется опыт достижения желаемого.
Списки – результат формализации, естественное явление при создании любых, даже самых простых информационных систем. HTML позволяет оформлять списки, не ограничивая воображение разработчика. Есть только три варианта синтаксиса:
- простой список (маркер);
- нумерованный список (индекс);
- список определений (понятие).
Все три варианта разработчик волен понимать так, как подсказывает его воображение в процессе решения реальной задачи.
Описание списков средствами HTML
Успехи в обработке информации и создании информационных систем несомненны. Списки здесь играют важнейшую роль. Вопрос, как сделать вложенный список в HTML, возникает часто. По сути, список – это критерии, понятия, смысловые элементы и другие позиции, которые могут иметь внутренние составляющие или быть частью системы более высокого порядка.
Стандарт гипертекста предлагает три варианта списка для целей отображения в окне браузера, но как именно будет выполнено отображение определяет разработчик.
Маркированный список – наиболее востребован. Он прост, никаких дополнительных ограничений и может быть использован как угодно и где угодно на HTML-странице. Можно вместо маркера использовать собственную картинку, а изображение маркера можно менять в пределах одного списка.
Вложенные HTML-списки ничем не отличаются от тега списка и остальных тегов. Логика стандарта HTML, не меняется ни при каких обстоятельствах.
На самом деле есть одиночный и парный тег. Есть конструкция select – список с возможностью выбора. Вложенные HTML-списки и конструкция select никоим образом не сочетаются по стандарту и логике HTML. Соединив триаду HTML, CSS и JavaScript, можно получить систему связанных списков в варианте select.
Нумерованный список начинается с тега «ol», а список определений (понятий) с тега «dl». Чаще всего используется популярная парочка: «ul» и «li» – простой маркированный список.
В этом примере показаны вложенные списки и отступы слева. HTML допускает применение стиля непосредственно на элементах «ul» и «li». Хотя на самом деле в контексте вложенности использовать вариант с CSS – практически бесперспективно. На второй уровень вложенности CSS еще можно как-то применить, но чем дальше вглубь, тем меньше шансов проявить разнообразие в дизайне и конструкции.
Списки и меню HTML-страницы
Считается, что изначально верстка была табличной (table), потом стала «дивной» (div). Странно, что про списочную (ul) верстку никто никогда ничего не говорил. Но списки, особенно теги «ul» и «li» так часто используются для создания меню, что можно было бы сделать акцент: не важно, на чем основана верстка на table, div или ul – важно, что страница сделана и она работает.
Это наглядный процесс на базе реальной информации создания информационных систем начала 90-х годов прошлого века. Интернета тогда, как говорится, не было, но здесь важна семантика, которую хотелось бы отразить.
Это та ситуация, когда вложенные HTML-списки показывают свою сущность: они не передают смысл, они просто отображают информацию. Способ отображения информации достаточно громоздок, даже после проведения оптимизации кода.
Так выглядит код, которым был описан, приведенный пример. Здесь:
- хотелось бы передать логику времени тех или иных событий, но средствами HTML не построить корреляцию между позицией «Продукты» и позицией «История компании»;
- предложена крайне тривиальная задача, но вложенные HTML-списки могут только отобразить фактическое содержимое, не устанавливая логику и связь внутри данных.
Не столь важно, что такое и как использовать списки, таблицы и блочные элементы. Достоинства и недостатки HTML - очевидны.
В комбинации с CSS и JavaScript на HTML можно вершить чудеса. С этим постулатом трудно поспорить.