HTML List

Create Your Own HTML List

You can use this HTML editor to create your own ordered or unordered list. Simply add your list items, then click one of the buttons. To view the source code, click the "Source" button.

This editor only creates basic HTML lists. See below for more on what you can do with HTML lists.

<ol><br /> <li></li><br /> <li></li><br /> <li></li><br /> </ol><br /> <ul><br /> <li></li><br /> <li></li><br /> <li></li><br /> </ul><br /> (Add as many list items as you need, remove what you don't need)<br /> <p style="font-size:10px;"><a href="http://www.quackit.com/html/codes/list/">HTML List</a></p><br /> Rich Text Editor

Toolbar Insert/Remove Numbered List Insert/Remove Bulleted List Source ▲

Elements path

Unordered List

An unordered list is an unnumbered list. Unordered lists simply have a plain (or not so plain) bullet point for each item in the list. As the name suggests, unordered lists are not ordered - whether by number, letter, or any other ordering system.
Unordered lists are created using the <ul> tag (to define the list) combined with the <li> tag (to define each item in the list).
Here's an example of an unordered list:

Source Code	Result
<!-- Codes by Quackit.com --><br /> <ul><br /> <li>Apples</li><br /> <li>Oranges</li><br /> <li>Bananas</li><br /> </ul><br /> <p><a style="font-size:11px;color:#999;" href="http://www.quackit.com/html/codes/list/">HTML List</a></p>	Apples Oranges Bananas

Ordered List

Ordered lists are ordered by an ordering system (eg, numbers, letters, etc).
Ordered lists are created using the <ol> tag (to define the list) combined with the <li> tag (to define each item in the list).

Source Code	Result
<!-- Codes by Quackit.com --><br /> <ol><br /> <li>Apples</li><br /> <li>Oranges</li><br /> <li>Bananas</li><br /> </ol><br /> <p><a style="font-size:11px;color:#999;" href="http://www.quackit.com/html/codes/list/">HTML List</a></p>	Apples Oranges Bananas

Definition List

Definition lists are similar to other lists but in a definition list, each list item contains two or more entries; a term and at least one description.
Definition lists are created using the HTML <dl> tag (to define the list) combined with the <dt> tag (to define each term in the list) and the <dd> (to define the description, definition, or value of the term).

Here are two examples of <dl> usage.

• Example 1: Contains a list of terms and their definitions.
• Example 2: Here, a term is linked to three values.

Source Code

Result

<!-- Codes by Quackit.com --><br /> <h4>Example 1</h4><br /> <dl><br /> <dt>Definition List</dt><br /> <dd>A list of terms and their definitions/descriptions.</dd><br /> <dt>Ordered List</dt><br /> <dd>A numbered list.</dd><br /> <dt>Unordered List</dt><br /> <dd>An unnumbered list.</dd><br /> </dl><br /> <br /> <h4>Example 2</h4><br /> <dl><br /> <dt>Vocals</dt><br /> <dd>Bruce Dickinson</dd><br /> <dt>Guitar</dt><br /> <dd>Adrian Smith</dd><br /> <dd>Dave Murray</dd><br /> <dd>Janick Gers</dd><br /> <dt>Bass</dt><br /> <dd>Steve Harris</dd><br /> <dt>Drums</dt><br /> <dd>Nicko McBrain</dd><br /> </dl><br /> <p><a style="font-size:11px;color:#999;" href="http://www.quackit.com/html/codes/list/">HTML List</a></p>

Example 1 Definition List A list of terms and their definitions/descriptions. Ordered List A numbered list. Unordered List An unnumbered list. Example 2 Vocals Bruce Dickinson Guitar Adrian Smith Dave Murray Janick Gers Bass Steve Harris Drums Nicko McBrain

Menu List

HTML5 has introduced a <menu> for defining a menu list. Menu lists are intended to specify a list of commands.
Menu lists are created using the <menu> tag (to define the list) combined with the <li> tag (to define each item in the list).

Source Code	Result
<!-- Codes by Quackit.com --><br /> <menu><br /> <li>Command 1</li><br /> <li>Command 2</li><br /> <li>Command 3</li><br /> </menu><br /> <p><a style="font-size:11px;color:#999;" href="http://www.quackit.com/html/codes/list/">HTML List</a></p>	Command 1 Command 2 Command 3