Advanced Java and Web Technologies for JNTUK
Blog providing beginner tutorials on different web technologies like HTML, CSS, Javascript, PHP, MYSQL, XML, Java Beans, Servlets, JSP and AJAX

19/01/2014 Categories: HTML. No Comments on Lists

HTML was primarily created to reproduce academic and research text. For this reason, particular care was taken to ensure that specific elements, such as lists and tables, were implemented and robust enough to handle the tasks for which they serve. Lists HTML are used to display a list of items either in an ordered or unordered fashion.

In the case of lists, HTML defines three different types of lists: ordered lists (numbered), unordered lists (bulleted) and definition lists (term and definition pairs).

All HTML lists whether ordered, unordered or definition, share the same elements. Each HTML list has the following structure:

Each type of list has its own display format:Definitions lists are slightly different from the above syntax as they contain definition term (<dt>) and term definition (<dd>) tags. For each list there will be a list opening tag, corresponding closing tag and individual item tags for each element in the list.

  • An ordered list precedes its items with a number.
  • An unordered list precedes its items with a bullet (small filled black circle).
  • A definition list has two pieces for each item: a term and a term definition.

The ordered and unordered lists have many different display options available:

  • Ordered lists can have their items preceded by the following:
    • Arabic numbers
    • Roman numerals (uppercase or lowercase)
    • Letters (uppercase or lowercase)
    • Numerous other language specific numbers or letters.
  • Unordered lists can have their items preceded by the following:
    • Several styles of bullets (filled circle, open circle, square etc…)
    • Image

Ordered Lists

Ordered lists have elements that are preceded by numbers or letters. They are generally used to display a list of items in which each item must be ordered relative to the other items. For example, a list of steps in an algorithm. Ordered lists use the ordered list tag (<ol>) to delimit the entire list, and the list item tag (<li>) to delimit each individual item.

Consider the following example, which a ordered list of items:

1. Press and hold the reset button until the power light blinks rapidly.
2. Release the reset button.
3. Wait until the power light returns to a steady state.

The default identifier for each item in an ordered list is a decimal number (Arabic number). To specify a different type of identifier for each item, use the list-style-type property inside the style attribute. For example, consider the following HTML code:The above type of lists can be created using ordered lists in HTML. The code is shown below:

 

The above code will result in the following output in a browser:

A. Press and hold the reset button until the power light blinks rapidly.
B. Release the reset button.
C. Wait until the power light returns to a steady state.

The list-style-type property supports the following values:

8-list-style-type

Ordered list also supports another style property, list-style-position. This property controls where the number or character preceding each item appears. This property has two possible values:

  • outside: The number or character appears outside the left margin of the item text.
  • inside: The number or character appears inside the left margin of the item text.

The default value is outside and the difference between these two options is shown below:

9-list-style-position

We can change the starting value of an ordered list by using the start attribute. This attribute has been deprecated in HTML. An alternative is provided by CSS concept called counter. Example usage of the start attribute is shown below:

<ol start=”12″ style=”list-style-type: decimal;”>

The above code creates an ordered list with the starting identifier as 12.

Unordered Lists

Unordered lists are similar to ordered lists except that they use bullets instead of numbers or letters for displaying the items of the list. Unordered lists are used when there is a need to display non-sequential list of items. Unordered lists use the unordered list tag (<ul>) to delimit the entire list and the list item tag (<li>) to delimit each individual item in the list. Consider the following HTML code which demonstrates the use of unordered lists:

 

The above code displays the list as shown below:

  • Action
  • Role Playing
  • Puzzle
  • Adventure

The default element before each item of the unordered list is a small filled black circle. Similar to ordered lists we can change the element before each list item by using the list-style-type property. The values for this property in an unordered list are: disc, circle, square and none. The default bullet type is disc. The list-style-position property can also be used with unordered lists just like ordered lists.

Unordered lists also support one other type of bullet, an image. An image for use in unordered lists must fit the following criteria:

  • Be accessible to the document via HTTP (can be either on the same web server as the document or on another).
  • Be in a suitable format for the Web (JPEG, GIF or PNG).
  • Be sized appropriately for use as a bullet.

To specify an image as a bullet for the list, the list-style-image property is used as shown below:

<ul style=”list-style-image: url(images/bullet.png)”>

Definition Lists

Definition lists are slightly more complex than the other lists as a definition list item contains both definition term and term definition. A definition list is delimited with the <dl> tag. A definition term is delimited with the <dt> tag and a term definition is delimited with the <dd> tag. The appearance of a definition list is similar to the arrangement of words and their meanings in a dictionary. Consider the following HTML which uses a definition list:

The output in the browser will be as shown below:

10-definition-list

 

Nested Lists

Lists of the same type or different types can be nested. Below HTML code demonstrates an ordered list which is nested in an unordered list:

The output for the above HTML code in a browser will be as shown below:

11-nested-lists

Suryateja Pericherla

Suryateja Pericherla

Hello, I am Suryateja Pericherla working as an Asst. Professor in CSE department at Vishnu Institute of Technology. I write articles to share my knowledge and make people knowledgeable regarding certain topics.
Suryateja Pericherla

Latest posts by Suryateja Pericherla (see all)

Note: Do you have a question on this article or have a suggestion to make this article better? You can ask or suggest us by filling in the below form. After commenting, your comment will be held for moderation and will be published in 24-48 hrs.

Leave a Reply

Scroll Up
Thank you for visiting startertutorials.com! If you like this website do share with your friends by clicking on the social icons available on the left hand side.

As the domain name is quite large to remember, use this short domain to visit this site. Short domain: stuts.me