How to use List in XHTML

[Gyan Guru]

The lists are almost always present with the new sites coded in XHTML strict. Indeed, they are often used to create menus. You do not perhaps aware, but the menu you see on the left of this site is a list, decorated with CSS. Do not be put off if you also talk about menus in this chapter, you will see that it is better to create menus with lists that using <br /> to skip lines. The lists can be better understood by those who use special browsers, and the record is identical to the graphical browsers. You have nothing to be afraid to use them. We will now see what are the three types of lists available:

The bulleted lists unordered: these lists are the smart base.
The bulleted lists ordered the chips have a number and are ordered.
The list of definitions: they do not have fleas, but will allow you to classify information more easily. We will see why a little lower.


The bulleted lists Unordered

The bulleted lists are not ordered primarily used in websites. Here is an example of a bulleted list (not formatting):

• Element 1
• Element 2
• Element 3

<Ul> 
<Li> Element 1 </ li> 
<Li> Element 2 </ li> 
<Li> Element 3 </ li> 
</ Ul>

The number of items you can make is unlimited. Here is the XHTML code for the example above:

As you can see, we start the list by tag <ul> each element is surrounded by tags <li>, and then closes the list with </ ul>. Note that you can not save as text or tags outside <li> tags. I do not want to see this:

<Ul> 
<Strong> <li> Element 1 </ li> </ strong> 
<Li> Element 2 </ li> 
<Li> Element 3 </ li> 
</ Ul>

Neither this:

<Ul> 
Title of my list 
<Li> Element 1 </ li> </ strong> 
<Li> Element 2 </ li> 
<Li> Element 3 </ li> 
</ Ul>

[Gyan Guru]

It differs from the previous by the fact that adds numbers to the bullets. So there is a notion of order, not necessarily binding in the facts that you listed, but useful when you describe the steps. This list differs from the previous one only by the fact that this time you use the <ol> and no <ul> to begin the list. The elements will always be realized by tags <li>.

Here's an example:

<P> Remove the cap from the end of the USB Stick. </ p> 
<Ol> 
<Li> Pull out the SIM card holder from its slot and insert the SIM </ li> 
<Li> Re- insert the SIM card holder into the USB Stick.  </ li> 
<Li> TPlug the USB Stick into your computer's USB port - make sure the USB Stick is fully inserted </ li> 
<Li> Now connect to laptop and access internet </ li> 
</ Ol>

And here's what happens:

1. Remove the cap from the end of the USB Stick.
2. Pull out the SIM card holder from its slot and insert the SIM
3. Re- insert the SIM card holder into the USB Stick.
4. TPlug the USB Stick into your computer's USB port - make sure the USB Stick is fully inserted
5. Now connect to laptop and access internet

You see, this is not complicated, at least not yet.

[Gyan Guru]

Definition lists

As their name suggests, lists of definitions are mainly used to list words and their associated definitions. They may have other uses thanks to CSS, and it is possible to use in menus. There are some elements that change from the two other lists that we have just seen:

First, to start a list of definitions, we use the tag <dl>. Then, to say that we will define a word, use the tag <dt>. Finally making the definitions of the word, use the tag <dd>. Here is an example that will help you better understand:

<Dl>
<Dt> Body </ dt>
<Dd> Definition 1 </ dd>
<Dd> Definition 2 </ dd>
<Dt> computer information </ dt>
<Dd> computer Motherboard </ dd>
</ Dl>

And here's what happens:

Definition 1
Definition 2
computer information
computer Motherboard