Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

HTML5 List – Ordered , Unordered & Definition

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:

UnOrdered List - Code Snippet
UnOrdered List – Code Snippet

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:

Unordered List Example Output
Unordered List Example Output

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:

Html5 Ordered List Example
Html5 Ordered List 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.

Html5 Ordered List Example - Output
Html5 Ordered List Example – Output

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:

  1. <dt> – Definition Term
  2. <dd> – Definition Description

Now look at the below example:

Html5 Definition List Example
Html5 Definition List 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:

Html5 Definition List Example Output
Html5 Definition List Example Output

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:

Html5 Nested List Example
Html5 Nested List 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:

Nested List Example - Output
Nested List Example – Output

6. Code Listings

002_UnOrderedList.html

003_OrderedList.html

004_DefinitionList.html

005_NestedLists.html

Categories: HTML5

Tags: , , , , ,

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.