HTML Java

HTML Tutorial

HTML Introduction HTML Editors HTML Basics HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframe HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Lists

HTML Lists

A list is a record of short pieces of information, such as people’s names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find.

Example

<html>
<body>
  <h2>An Unordered HTML List</h2>
  <ul>
     <li>CPU</li>
     <li>Monitor</li>
     <li>Mouse</li>
  </ul>
</body>
</html>
Try it »

Unordered HTML List

  • An unordered list starts with the <ul> tag.
  • Each list item starts with the <li> tag.
  • The list items will be marked with bullets (small black circles) by default.

Example

<html>
<body>
  <h2>An unordered HTML list</h2>
  <ul>
     <li>CPU</li>
     <li>Monitor</li>
     <li>Mouse</li>
  </ul>
</body>
</html>
Try it »

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

Example

<html>
<body>
  <h2>Unordered List with Disc Bullets</h2>
  <ul style="list-style-type:disc;">
     <li>CPU</li>
     <li>Monitor</li>
     <li>Mouse</li>
  </ul>
</body>
</html>
Try it »

Ordered HTML List

  • An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
  • The list items will be marked with numbers by default.

Example

<html>
<body>
  <h2>An ordered HTML list</h2>
  <ol>
     <li>CPU</li>
     <li>Monitor</li>
     <li>Mouse</li>
  </ol>
</body>
</html>
Try it »

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Example

<html>
<body>
  <h2>Ordered List with Numbers</h2>
  <ol type="1">
     <li>CPU</li>
     <li>Monitor</li>
     <li>Mouse</li>
  </ol>
</body>
</html>
Try it »

HTML Description Lists

  • HTML also supports description lists.
  • A description list is a list of terms, with a description of each term.
  • The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

Example

<html>
<body>
  <h2>A Description List</h2>
  <dl>
     <dt>CPU</dt>
     <dd>Central Processing Unit</dd>
     <li>Monitor</li>
     <dd>Display divice</dd>
  </dl>
</body>
</html>
Try it »

Nested HTML Lists

List can be nested (lists inside lists).

Example

<html>
<body>
  <h2>A Nested List</h2>
  <p>List can be nested (lists inside lists):</p>
</body>
</html>
Try it »

Note:- List items can contain new list, and other HTML elements, like images and links, etc.


Control List Counting

  • By default, an ordered list will start counting from 1.
  • If you want to start counting from a specified number, you can use the start attribute.

Example

<html>
<body>
  <h2>The start attribute</h2>
  <ol start="20">
     <li>CPU</li>
     <li>Monitor</li>
     <li>Mouse</li>
  </ol>
</body>
</html>
Try it »