Nested HTML Lists: Description and Application

Presentation of data through lists can be used to systematize information, form criteria, create menus and navigate pages of a web resource. Listed data presentation is relevant and practical for any application. The HTML standard offers a simple and convenient mechanism for describing lists and data collections.

Systems, Categories, and Lists

Categories, sequences, and relationship systems are important points in data processing. A characteristic feature: in the information sphere, everything looks so simple in a natural language and everything is so complicated when it comes to formalizing and processing data.

Systems, Categories, and Lists




In modern algorithms, the term “information” is the meaning of the term “data”. To say that the algorithm works with information, and the developer created an information system - a statement too loud, causing doubts in the current state of affairs.

Developers like to raise their rating by the power of a beautiful word, and not by a really working system. This is good quality, at least:

  • there is something to strive for;
  • there is a goal;
  • actively formed experience of achieving the desired.

Lists are the result of formalization, a natural phenomenon when creating any, even the simplest information systems. HTML allows you to style lists without restricting the imagination of the developer. There are only three syntax options:





  • simple list (marker);
  • numbered list (index);
  • list of definitions (concept).

The developer is free to understand all three options as his imagination prompts in the process of solving a real problem.

HTML Description of Lists

Success in processing information and creating information systems is undeniable. Lists play a crucial role here. The question of how to make a nested list in HTML often arises. In essence, a list is criteria, concepts, semantic elements and other positions that may have internal components or be part of a higher order system.

Hypertext Standard




The hypertext standard offers three list options for display purposes in a browser window, but how the display will be performed is determined by the developer.

A bulleted list is most in demand. It is simple, no additional restrictions, and can be used anywhere and anywhere on an HTML page. You can use your own picture instead of the marker, and the marker image can be changed within the same list.

Nested HTML lists are no different from a list tag and other tags. The logic of the HTML standard does not change under any circumstances.





Actually there is a single and pair tag. There is a select construct - a selectable list. The nested HTML lists and the select construct are in no way combined according to the HTML standard and logic. By combining the triad of HTML, CSS, and JavaScript, you can get a linked list system in the select variant.

A numbered list starts with the tag "ol", and a list of definitions (concepts) with the tag "dl". The most commonly used is a popular pair: “ul” and “li” - a simple bulleted list.

Nested Lists Example




This example shows nested lists and padding on the left. HTML allows style to be applied directly to the ul and li elements. Although in fact, in the context of nesting, using the CSS option is practically unpromising. CSS can still be applied to the second level of nesting, but the further you go deeper, the less chance there is to show variety in design and construction.

HTML page lists and menus

It is believed that initially the layout was tabular (table), then became “marvelous” (div). It is strange that no one ever said anything about the list (ul) layout. But lists, especially the ul and li tags, are so often used to create menus that emphasis could be made: it doesn’t matter what the layout is based on table, div or ul - it is important that the page is done and it works.

Menu Lists




This is a visual process based on real information on the creation of information systems of the early 90s of the last century. The Internet then, as they say, did not exist, but here the semantics are important, which I would like to reflect.

This is the situation when nested HTML lists show their essence: they do not convey meaning, they simply display information. The way information is displayed is cumbersome, even after optimizing the code.

HTML List Syntax




This is the code that described it, the given example. Here:

  • I would like to convey the logic of the time of certain events, but using HTML means we can’t build a correlation between the “Products” position and the “Company history” position;
  • an extremely trivial task is proposed, but nested HTML lists can only display the actual content without establishing logic and communication within the data.

It is not so important what is and how to use lists, tables and block elements. The strengths and weaknesses of HTML are obvious.

JavaScript for development




Combining CSS and JavaScript with HTML can do wonders. It is difficult to argue with this postulate.




All Articles