Both elements have the same structure as UL , just different rendering.
Unless CSS rules are created to change the appearance of the list, the default presentation of an unordered list is to add a disc-style bullet point on the left-hand side of each list item and to indent the entire list.
Ordered lists are used for lists of items for which the order of the items does matter. The syntax for an ordered list is exactly the same as for an unordered list. However, to create an ordered list, the ol tag is used rather than the ul tag. By making this one change, we can convert the unordered list in our previous example into an ordered list. We're also going to change the text of the list items to make it clear that these are items that need to appear in a specific sequential order.
There are times when you want to control the numbering of ordered lists. For example, your list may be broken up by a paragraph that appears mid-list to expand on a certain concept, or you may create a countdown list that begins at a high number and counts down. Lastly, maybe you'd rather use roman numerals. To reverse the number of a list, simply add the reversed attributed to the opening ol tag.
It should be noted that Microsoft browsers do not support the reversed attribute. If you use this attribute, bear in mind that visitors using Internet Explorer or Edge will see standard numbering.
The start attribute is used to to specify the number on which an ordered list starts. For example, imagine you have a list of 5 items, and after the second and fourth items you want to add a sentence or two with additional details. You could use the following HTML to do this without restarting the list numbering after each paragraph. A few short sentences about Item 2 that we don't want to appear appended to the list item. A second sentence of additional details.
We'll use the same technique to properly number Step 5 below. You can use CSS to change they marker style of an ordered list. In addition to standard numbering referred to as decimal in CSS , you can also use:. We cover the list-style-type CSS property used to implement these numbering styles below. Description lists are created with the dl tag. Used far less frequently than their ordered and unordered peers, description lists are used to contain name-value groups.
Each name-value group consists of one name, or term, placed between dt tags, followed by one or more values with each value, or description, placed between dd tags. For example, if we wanted to use a description list to explain the relationship between members of a family, we might use the following code:. When that list is rendered, it will be displayed in such a way that the relationships between the terms dt and values dd are clear. A nested list is a list within a list.
If you've ever created a bulleted outline in a word processing document you probably used a variety of indentations and bullet point types to denote items that were subpoints of another item in the outline. This is the effect we're going for when we create nested lists. These values are case-insensitive. How each value is presented depends on the user agent. User agents should attempt to present a "disc" as a small filled-in circle, a "circle" as a small circle outline, and a "square" as a small square outline.
For the OL element, possible values for the type attribute are summarized in the table below they are case-sensitive:. Note that the type attribute is deprecated and list styles should be handled through style sheets.
For example, using CSS, one may specify that the style of numbers for list elements in a numbered list should be lowercase roman numerals. In the excerpt below, every OL element belonging to the class "withroman" will have roman numerals in front of its list items.
The DIR element was designed to be used for creating multicolumn directory lists. The MENU element was designed to be used for single column menu lists. Both elements have the same structure as UL , just different rendering. We strongly recommend using UL instead of these elements. This attribute sets the style of a list item. Currently available values are intended for visual user agents. Possible values are described below along with case information. This attribute specifies the starting number of the first item in an ordered list.
The default starting number is "1". Note that while the value of this attribute is an integer, the corresponding label may be non-numeric. Thus, when the list item style is uppercase latin letters A, B, C, This attribute sets the number of the current list item.
Note that while the value of this attribute is an integer, the corresponding label may be non-numeric see the start attribute. When set, this boolean attribute gives a hint to visual user agents to render the list in a more compact way. The interpretation of this attribute depends on the user agent. Attributes defined elsewhere id , class document-wide identifiers lang language information , dir text direction title element title style inline style information onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup intrinsic events.
This example illustrates the basic structure of a list. Level one, number one Level two, number one Level two, number two Level three, number one
Unordered HTML List - Choose List Item Marker. The CSS list-style-type property is used to define the style of the list item marker. A quick list of all HTML tags, attributes, and enumerated values. A short reference companion to the Idocs Guide to HTML. Lists may also be nested and different list types may be used together, as in the following example, which is a definition list that contains an unordered list (the ingredients) and an ordered list .