HTML Lists

Unordered, Ordered, & Definition Lists

Lists are an everyday part of life. To-do lists determine what to get done. Navigational routes provide a turn by turn list of directions. Recipes provide both a list of ingredients and a list of instructions. With a list for nearly everything, it’s easy to see how they have become popular online.

HTML provides three different types of lists to choose from when building a page, including unordered, ordered, and definition lists. Unordered lists are for lists of items where order isn’t of important. While ordered lists place strong importance on the order of items. In the case where there is a list of terms and descriptions, perhaps for a glossary, definition lists are available. Choosing what type of list to use, or to use a list at all, comes down to the content at hand and what is the most semantic choice for displaying the content in HTML.

Unordered List

Unordered lists are purely a list of related items, in which their order does not matter nor do they have a numbered or alphabetical list element. Creating an unordered list in HTML is accomplished using the unordered list, ul, block level element. Each list item within an unordered list is individually marked up using the list item, li, block level element.

By default most browsers represent each list item with a solid dot. This solid dot is referred to as the list item element and can be changed using CSS.

<ul>

  <li>iPad</li>

  <li>iPhone</li>

  <li>MacBook Air</li>

</ul>

Ordered List

The ordered list element, ol, works just like the unordered list element, including how each individual list item is created. The main difference between an ordered list and an unordered list is that with an ordered list the order of which items are represented is important. Instead of showing a dot as the default list item element, an ordered list uses numbers. Using CSS, these numbers can then be changed to letters, Roman numerals, and so on.

<ol>

  <li>iPad</li>

  <li>iPhone</li>

  <li>MacBook Air</li>

</ol>

Unordered & Ordered List Demo

 

Type Attribute of OL and UL lists :-

This attribute is used to change the default value of the ordered and unordered list used in HTML documents.

Type Attribute of UL List

Attribute=Value	Description
Type=Square	A filled square
Type=Circle	An unfilled circle
Type=Disc	Default. A filled circle

<h2> Type Attributes of Unordered List tag :-

By Default UL

<ul>

  <li>iPad</li>

  <li>iPhone</li>

  <li>MacBook Air</li>

</ul>

Using Type Attribute of UL tag:-

<ul Type=square>

  <li>iPad</li>

  <li>iPhone</li>

  <li>MacBook Air</li>

</ul>

Ordered List With Type Attribute :- We can change the style of numbering using Type attribute of OL tag. There is a list of value for Type attribute of OL tag. Like:

Type=value	description
Type=A	List markers would be set to uppercase letters
Type=a	List markers would be set to uppercase letters
Type=I	List markers would be set to uppercase Roman Numerals
Type=i	List markers would be set to lowercase Roman Numerals
Start=n	Would set beginning value item marker to n in the current list

By Default OL tag

<ol>

  <li>iPad</li>

  <li>iPhone</li>

  <li>MacBook Air</li>

</ol>

Using Type Attribute with OL tag:-

<ol type="A">

  <li>iPad</li>

  <li>iPhone</li>

  <li>MacBook Air</li>

</ol>

</h2>

 

The start attribute determines from where an ordered lists should start. By default, ordered list start at 1. However, there may be a case where a list should start at 5. To do so simply set a start attribute value of 5. Even though a list might not be ordered using numbers, the start attribute only accepts integer values.

<ol start="30">

  <li>iPad</li>

  <li>iPhone</li>

  <li>MacBook Air</li>

</ol>

Start Attribute Demo

<h2> Type Attributes of Unordered List tag :-

By Default UL

<ul>

  <li>iPad</li>

  <li>iPhone</li>

  <li>MacBook Air</li>

</ul>

Ordered List With :-

• Start Attribute :- By default start attribute starts with '1' or 'a' or 'A' or  'i' or 'I'<br> But We can change the default numbering using start attribute Like :-

• Reversed attribute also which allows a list to appear in a reversed order. A list of 5 items ordered 1 to 5 may be reversed and ordered from 5 to 1. The reversed attribute is a Boolean attribute so it doesn’t accept any values.

By Default OL tag

<ol>

  <li>iPad</li>

  <li>iPhone</li>

  <li>MacBook Air</li>

</ol>

Using start Attribute with OL tag in which we had started numbering from 30:-

<ol start="30">

  <li>iPad</li>

  <li>iPhone</li>

  <li>MacBook Air</li>

</ol>

<ol start="30" reversed>

  <li>iPad</li>

  <li>iPhone</li>

  <li>MacBook Air</li>

</ol>

</h2>

•      Value attribute may be used on an individual list item within an ordered list to change its value within the list. Any list item appearing below an item with an updated value attribute will then be recalculated accordingly. As an example, if the second item in a list has a value attribute of 9, the number of that list item will appear as the ninth item. All other items below this one will be calculated as necessary, starting at ten.
  <ol>
    <li>iPad</li>
    <li value="9">iPhone</li>
    <li>MacBook Air</li>
  </ol>

Definition List :-

These lists also termed as termed as glossary lists. These are used to outline multiple terms and descriptions as in the case of a glossary. Creating a definition list in HTML is accomplished using the DL element instead of using the li element to mark up list items. <DL>,<DD> and <DT> tags are used to define definition lists. <DL> tag provides beginning as well as ending line breaks. <DT> tag marks the term and <DD> tag defines the paragraph. For example: - A definition list may contain numerous terms and descriptions, one after the other. Additionally, a definition list may have multiple terms per description as well as multiple descriptions per term. A single term may have multiple meanings and warrant multiple definitions. In comparison, a single description may be suitable for multiple terms.

Definition lists do not have any list item elements, however the default styling of a definition list does indent any descriptions.

<dl> <dt>Study</dt>

  <dd>The devotion of time and attention to acquiring knowledge on an academic subject, esp. by

means of books</dd>

  <dt>Design</dt>

  <dd> a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made

</dd>

  <dd>purpose, planning, or intention that exists or is thought to exist behind an action, fact,

or material object</dd>

  <dt>Business work</dt>

  <dd>a person’s regular occupation, profession, or trade</dd>

</dl>

 

Nested Lists : -

All types of the list which I  had already discussed above, we can nest them one inside another. Unordered lists can live within ordered or definition lists, definition lists can live within unordered and ordered lists, and vice versa. Every list has the ability to be placed within another list, nesting them continually. Building a nested list is fairly simple. Determine where a nested list should appear, and rather than closing a list item, begin a new list. Once the nested list is complete, close the wrapping list item and continue on with the original list.

<ol>

  <li>Walk the dog</li>

  <li>Fold laundry</li>

  <li>Go to the grocery and buy:

    <ul>

      <li>Milk</li>

      <li>Bread</li>

      <li>Cheese</li>

    </ul>

  </li>

  <li>Mow the lawn</li>

  <li>Make dinner</li>

</ol>

 

Some more examples for nested list to be practice