Creating Lists in HTML5

Creating Lists
HTML provides three different types to choose from: unordered, ordered, and description lists. Choosing which type of list to use—or whether to use a list at all—comes down to the content and the most semantically appropriate option for displaying that content.

  1. Unordered Lists

An unordered list is simply a list of related items whose order does not matter. Creating an unordered list in HTML is accomplished using the unordered list block-level element,Each item within an unordered list is individually marked up using the list item element,By default, most browsers add a vertical margin and left padding to the element and precede each element with a solid dot. This solid dot is called the list item marker, and it can be changed using CSS.

  • Orange
  • Green
  • Blue
  1. Ordered Lists

The ordered list element, works very much like the unordered list element; individual list items are created in the same manner. The main difference between an ordered list and an unordered list is that with an ordered list, the order in which items are presented is important.
Because the order matters, instead of using a dot as the default list item marker, an ordered list uses numbers.

  1. Head north on N Halsted St
  2. Turn right on W Diversey Pkwy
  3. Turn left on N Orchard St

Ordered lists also have unique attributes available to them including start and reversed.
Start Attribute
The start attribute defines the number from which an ordered list should start. By default, ordered lists start at 1. However, there may be cases where a list should start at 30 or another number. When we use the start attribute on the element, we can identify exactly which number an ordered list should begin counting from.
The start attribute accepts only integer values, even though ordered lists may use different numbering systems, such as roman numerals.

  1. Head north on N Halsted St
  2. Turn right on W Diversey Pkwy
  3. Turn left on N Orchard St

Reversed Attribute
The reversed attribute, when used on the element, allows a list to appear in reverse order. An ordered list of five items numbered 1 to 5 may be reversed and ordered from 5 to 1.The reversed attribute is a Boolean attribute, and as such it doesn’t accept any value. It is either true or false. False is the default value; the value becomes true when the attribute name reversed appears on the element.

  1. Head north on N Halsted St
  2. Turn right on W Diversey Pkwy
  3. Turn left on N Orchard St

Value Attribute
The value attribute may be used on an individual element within an ordered list to change its value within the list. The number of any list item appearing below a list item with a value attribute will be recalculated accordingly.
As an example, if the second list item has a value attribute value of 9, the number on that list item marker will appear as if it is the ninth item. All subsequent list items will be numbered upwards from 9.

  1. Head north on N Halsted St
  2. Turn right on W Diversey Pkwy
  3. Turn left on N Orchard St

Description Lists
Description lists are used to outline multiple terms and their descriptions, as in a glossary, for example.
Creating a description list in HTML is accomplished using the description list block-level element. Instead of using a element to mark up list items, the description list requires two block-level elements: the description term element, and the description element.By default, the element will include vertical margins, just like the and elements. Additionally, the element includes a left margin by default

study
The devotion of time and attention to acquiring knowledge on an academic subject, especially by means of books
design
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
Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object
business work
A person’s regular occupation, profession, or trade

Nesting Lists
Lists can be nested, meaning one list can be placed inside of another. A nested list, for example, can be used to create an outline. One trick with nesting lists is to know where to begin and end each list and list item. Speaking specifically about unordered and ordered lists, as that is where most nesting will occur, the only element that may reside directly within the and elements is the element. To repeat, the only element we can place as a direct child of the and elements is the element.
That said, once inside the element, the standard set of elements may be added, including any or elements.
To nest a list rather than closing a list item, begin a new list. Once the nested list is complete and closed, close the wrapping list item and continue on with the original list.

  1. Walk the dog
  2. Fold laundry
  3. Go to the grocery and buy:

    • Milk
    • Bread
    • Cheese
  4. Mow the lawn
  5. Make dinner
rape porn

Admin has written 171 articles