The list in HTML
Coding (Html5)May 11, 2017
There are three different kind of list you can implement in html.
How to create a list in an html document
The lists play a very important role in the texts, but also in the definition of structural elements of HTML pages.
From the point of view of the organization of the text are useful, for example when you need to synthesize concepts for points, indicating in sequence the steps in a process, or compile a list of definitions or a glossary.
Typically they break typographic rhythm and make the text look and more readable.
Let's see what are the three html list types available:
- Ordered List
- Unordered List
- Description List
All three types of lists work in the same way:
- Open the tag,
- List the various elements of the list (each with its own tag),
- Closes the list tag.
UL, Unordered List
The unordered list is perhaps the most used and is described using the <ul>.
Inside we can put items on the list (list item) by using the <li> tag.
Here is a simple example
Although the graphics style depends on the browser, the result is usually what we get when we use bullets in word processors: we get the elements under each other with the left margin and the classic "filled circle" for each point .
We can choose other characters or symbols, but we will see later how to do it using CSS, for now it is enough to say that the "type" attribute that was provided for this purpose has been deprecated by HTML 5.
Nest unordered lists
In general we can put different levels within the lists, creating the structures "tree", useful to define objects such as menu.
To do this simply insert a new list within an element:
Interestingly, the basic rendering typically show different symbols for points depending on the element level.
OL, ordered list
The ordered are characterized by a list of the elements that make up the list.
The tag to be used to open an ordered list is <ol> and also in this case the elements are identified by the <li> tag:
So we will have an orderly and progressive series identified by letters or numbers.
To continue the parallel with word processing software, it would be the so-called numbered lists.
the Type attribute, to describe the type of list
The type attribute applied to "ol" tag is used to specify the type of enumeration which we want to apply. The enumeration style displayed by the browser is the default number, but we can indicate whether the list items following points are defined as numbers, letters or roman numerals.
the type value Description
type = "1": integers "Arabs" (default)
type = "a": numbers lower case alphabet
type = "A": numbers uppercase alphabet
type = "i": lower roman numerals
type = "I": numbers uppercase Roman numerals
Start and value
It may happen that for different needs we want to start numbering from a certain value, in this case we make use of two attributes:
>: It indicates the initial value from which to start the numbering of the list.
<li value="30">: It indicates the value applied to the numbering of a certain element and also change the numbering of subsequent items on the list.
The description lists are the perfect tool for lists in which must be associated each item with a descriptive text.
We define the list with the <dl> tag, while items in the list, unlike the other lists, are made up of two parts:
<dt>: indicate the definition term. Unlike the <li> it is not represented with the left indentation
<dd>: it is the definition itself of the term. Typically this element is rendered with an indentation