The list 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:

 

 

1.     
2. Open the tag,


3.     
4. List the various elements of the list (each with its own tag),


5.     
6. 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:

 

 

<ol start="10">: 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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Description Lists

 

 

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