15-07-2018 14:12

Вложенные HTML-списки: описание и применение

Представление данных через списки может быть использовано для систематизации информации, формирования критериев, создания меню и навигации по страницам веб-ресурса. Списочное представление данных актуально и практично для любой области применения. Стандарт HTML предлагает простой и удобный механизм описания списков и коллекций данных.

Системы, категории и списки

Категории, последовательности и системы отношений – важные моменты в области обработки данных. Характерная особенность: в информационной сфере все так просто выглядит на естественном языке и все так сложно получается, когда дело доходит до формализации и обработки данных.

Классы в CSS. Имена классовВам будет интересно:Классы в 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 можно вершить чудеса. С этим постулатом трудно поспорить.



Источник