HTML Tutorial - HTML List

HTML Unordered List

The ul element to denote unordered lists.

The items in the ul element are denoted using the li element.

The element doesn't define any attributes in HTML5 and you control the presentation of the list using CSS.

The type and compact attributes are obsolete in HTML5.

You can see the ul element in use in the following code.

<!DOCTYPE HTML>
<html>
<body>
  I like:<!--from   w w  w  .j av  a2s . c  o m-->
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ul>
</body>
</html>

Click to view the demo

Each list item is displayed with a bullet. You can control which style bullet is used through the list-style-type CSS property.

Example 2

The following code shows how to create a nested list.

<!--from  ww  w  . ja  v  a  2  s  .  c o  m-->
<!DOCTYPE HTML>
<html>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS
            <ul>
                <li>Introdunction</li>
                <li>CSS attributes</li>
            </ul>
        </li>
        <li>Javascript</li>
    </ul>
</body>
</html>

Click to view the demo

HTML Ordered List

The ol element denotes an ordered list. The items in the list are denoted using the li element.

The reversed attribute has been added in HTML5. The compact attribute is now obsolete in HTML5.

The following code shows the ol element being used to create a simple ordered list.

<!DOCTYPE HTML>
<html>
<body>
  I like:<!--   ww  w  .  ja  v  a 2  s  .c  om-->
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>XML</li>
  </ol>
</body>
</html>

Click to view the demo

Attribute

You can control the items in the list using the attributes defined by the ol element.

The start attribute defines the ordinal value of the first item in the list. If this attribute is not defined, the first item is assigned the ordinal value of 1.

You use the type attribute to indicate which marker should be displayed next to each item.

The following table shows the supported values for this attribute.

Value	Description	Example
1	Decimal numbers (default)	1., 2., 3., 4.
a	Lowercase Latin characters	a., b., c., d.
A	Uppercase Latin characters	A., B., C., D.
i	Lowercase Roman characters	i., ii., iii., iv.
I	Uppercase Roman characters	I., II., III., IV.

Example 3

The following code shows how to create nested ordered lists.

<html>
<body>
<p>Here is a nested ordered list:</p>
<!--  w  ww  . j av  a 2  s  .  c  o  m-->
<ol>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
    <li>Item four
        <ol>
            <li>Item 4.1</li>
            <li>Item 4.2</li>
            <li>Item 4.3</li>
        </ol>
    </li>
    <li>Item Five</li>
</ol>

</body>
</html>

Click to view the demo

Example 4

The following code shows how to create an ordered list with capital letters and starting at point 4.

<!-- ww  w  . j  av a2  s  .  c om-->
<html>
<body>

<p>Here is an ordered list using capital letters and starting at point 4, which is a letter D:</p>

<ol type="A" start="4">
    <li>Point number one</li>
    <li>Point number two</li>
    <li>Point number three</li>
</ol>
</body>
</html>

Click to view the demo

HTML Definition List

A description list consists of a set of term/description groupings.

You use three elements to define description lists: the dl, dt, and dd elements.

dl Denotes a description list.
dt Denotes a term within a description list.
dd Denotes a definition within a description list.

Multiple dd elements can be used for a single dt element, which allows you to provide multiple definitions for a single term.

The following code creates Description Lists.

<!DOCTYPE HTML>
<html>
<body>
  I like:<!--from   w w  w.  j ava2s  . co  m-->
  <dl>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dd><i>a style sheet language used for
           describing the look and formatting
           of a document written in a markup language</i></dd>

    <dt>HTML</dt>
    <dd>The mark language</dd>

    <dt>Javascript</dt>
    <dd>The coding logic</dd>
  </dl>
</body>
</html>

Click to view the demo