1. Lists in HTML5
Html5 supports three kinds of lists. They are: Ordered List, UnOrdered List, Definition List. Ordered List contains sequence numbers. So, when you want to provide a list item in which order is important, you can use the ordered list. In the Unordered List, the sequence of items is not needed, and browser renders these items as bulleted points. In Html5, Definition Lists are to provide terms & its definitions.
2. Unordered List
Html5 uses two tags to denote an unordered list. The tag <UL> denoted Unordered List, which surrounds one or more List Item <Li> tags. Now, have a look at the below example:
You can see the Opening <UL> tag at line number 9 and ending tag </UL> at line number 15. Lines 10-14, we defined 5 list items, and each one is between the pair of the <li>, </li> tags. Running this example will produce the below result:
The output shows that the Chrome browser is displaying the List Items with a preceding bullet. Each item will have a bullet in front of it and each bullet will display after some space preceeding it and it is called Margin. In the above output, we marked this margin.
3. Ordered List
In an Ordered List, the sequence of the List items is important. Say, for example, if you are writing some sequence of steps to resize an image, the Ordered List suits well than the unordered List. Have a look at the below example:
The example is like the previous one. Here, we changed the <ul> tag to
<ol> tag. Now, pair of <ol>, </ol> tag enclose the same List Items <li> from the past example. OL stands for Ordered List. Now when we run this in the browser, it looks as shown in the below picture. Here, you can see the same list is presented with sequence numbers.
4. Definition List
The <dl> tag denotes the Definition List. This tag shows data in Key-Value pairs. Here, Key tells the definition and Value denotes the description. The other tags that accompanies the Definition List are:
- <dt> – Definition Term
- <dd> – Definition Description
Now look at the below example:
Here, we have two definition terms and descriptions packed in the definition list. You can see how <dt> and <dd> is sitting next to each other. This helps the browser to render the definition term & definition list. Below screen shows running the sample in chrome browser:
5. Nested List
Now we know how to create three types of lists in Html5. Let us see an example of nesting the two lists. Now, look at the below example:
Here, you can see how the outer list which an Ordered List is nesting the two Unordered Lists. When we execute the example above in a browser, it produces the below result:
6. Code Listings
002_UnOrderedList.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Unordered List Example</title> </head> <body> <h1>Unordered List Example</h1> <ul> <li>Mango</li> <li>Orange</li> <li>Banana</li> <li>Grapes</li> <li>Water Melon</li> </ul> </body> </html> |
003_OrderedList.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Ordered List Example</title> </head> <body> <h1>Ordered List Example</h1> <ol> <li>Mango</li> <li>Orange</li> <li>Banana</li> <li>Grapes</li> <li>Water Melon</li> </ol> </body> </html> |
004_DefinitionList.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Definition List Example</title> </head> <body> <h1>Definition List Example</h1> <dl> <dt>HTML</dt> <dd>Hyper Text Mark-up Language</dd> <dt>ASCII</dt> <dd>American Standard Code for Information Interchange</dd> </dl> </body> </html> |
005_NestedLists.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Ordered List Example</title> </head> <body> <h1>Nested List Example</h1> <ol> <li>Item 1 <ul> <li>Num 1</li> <li>Num 2</li> <li>Num 3</li> </ul> </li> <li>Item 2 <ul> <li>Num 1</li> <li>Num 2</li> <li>Num 3</li> </ul> </li> </ol> </body> </html> |
Categories: HTML5
Tags: <dd>, <dl>, <dt>, <li>, <ol>, <ul>
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.