The list in HTML

Coding (Html5)

May 11, 2017

There are three different kind of list you can implement in html.
 
/img/blog/the-list-in-html.jpeg

 

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.


  7.  

 

 

 

 

 

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

 

 

<ul>

  <li>Ketchup</li>

  <li>Mayo</li>

  <li>Mustard</li>

</ul>

 

 

 

 

 

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:

 

 

<ul>

 

 

    <li>first </li>

 

 

    <li>second

 

 

        <ul>

 

 

            <li>first of the second</li>

 

 

            <li>second of the second

 

 

                <ul>

 

 

                    <li>first of the third</li>

 

 

                </ul>

 

 

            </li>

 

 

            <li>third of the second</li>

 

 

        </ul>

 

 

    </li>

 

 

</ul>

 

 

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:

 

 

<ol>

  <li>Ketchup</li>

  <li>Mayo</li>

  <li>Mustard</li>

</ol>

 

 

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.

 

 

<ol start="10">

 

 

   <li>element</li>

 

 

   <li>element</li>

 

 

   <li value="30">element</li>

 

 

   <li>element</li>

 

 

</ol>

 

 

 

 

 

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

 

 

<dl>

   <dt> p </dt>

   <dd> identifies the opening of a new paragraph </dd>

 

   <dt> div </dt>

   <dd> identifies the opening of a new block of text </dd>

 

   <dt> span </dt>

   <dd> identifies the opening of an inline element, which attribute a formatting through the styles </ dd>

</dl>

 

 

 


 

 

 
 
If you like this content and you are hungry for some more join the Facebook's community in which we share info and news just like this one!
 

Other posts that might interest you

Coding (Html5) Jan 14, 2018

The table

See details
Coding (Html5) Jan 14, 2018

Hyperlinks tags

See details
Coding (Html5) Jan 14, 2018

Insert images in your document

See details
Get my free books' review to improve your skill now!
I don't want to improve