Lists
The benefits of using lists can never be neglected in a text document. Lists can be created easily in html.
Here we will talk about three types of lists,
1. Ordered lists
An ordered list includes index numbers for list items.
To create an ordered list we use <ol> tag. The process goes like,
1. Start the list by typing <ol> tag.
2. Now create a list item by using <li> tag like this: Type <li> tag, type item content and then type </li> tag. In this way create as many items as you want.
3. When you are done creating items, type </ol> tag to finish the list.
Example
<ol> <li> Apples. </li> <li> Oranges. </li> <li> Mangoes. </li> </ol>
gives you,
- Apples.
- Oranges.
- Mangoes.
Start attribute
Lists start from the index number 1 by default. If you want to start a list from other index number, you can use the start attribute.
Example
<ol start="3" >
This will make the list to start from index number 3.
Value attribute
To change the normal numbering of list items, you can use the value attribute.
Use the value attribute with that <li> tag, for which you want to change the numbering order.
Example
By using the same example above with starting value 2 and index value 6 for oranges,
<ol start="2"> <li> Apples. </li> <li value="6"> Oranges. </li> <li> Mangoes. </li> </ol>
we get,
- Apples.
- Oranges.
- Mangoes.
2. Unorderd lists
Unordered list donot have an index number, instead have bullets before list items.
To create an unordered list we use <ul> tag. The process goes like,
1. Start the list by typing <ul> tag.
2. Now create a list item by using <li> tag. Type <li> tag, type item content and then type </li> tag. Create as many items as you want like this.
3. When you are done creating items, type </ul> tag to finish the list.
Example
<ul> <li> Apples. </li> <li> Oranges. </li> <li> Mangoes. </li> </ul>
Result,
- Apples.
- Oranges.
- Mangoes.
3. Definition lists
To create definition lists,
1. Type <dl> tag to start the list.
2. Type <dt>, the type the term to be defined and then type the </dt> tag.
3. Type <dd>, the type the definition of the term and then type </dd> tag.
4. To define more terms and definitions, repeat steps 2 and 3.
5. When you are done with the list type </dl> to end the list.
Exampe
<dl> <dt> Apple. </dt> <dd> A fruit generally red or green in color. </dd> <dt> Orange. </dt> <dd> A fruit that is orange in color. </dd> </dl>
Result,
- Apple.
- A fruit generally red or green in color.
- Orange.
- A fruit that is orange in color.
Next:
Related:
Link to this page :
Copy and paste the following code in an html document to link to this page,