HTML List

HTML lists are used to display items in an organized way.

Examples:

• Menu items
• Steps
• Features
• Subjects

Types of HTML Lists

HTML has 3 types of lists:

1. Unordered List (<ul>)
2. Ordered List (<ol>)
3. Description List (<dl>)

1. Unordered List (<ul>)

Used when order doesn't matter

Shows items with bullets

Syntax

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Output

• HTML
• CSS
• JavaScript

<ul> Attributes

type (bullet style)

<ul type="disc">
<ul type="circle">
<ul type="square">

Example:

<ul type="square">
  <li>Apple</li>
  <li>Mango</li>
</ul>

2. Ordered List (<ol>)

Used when order matters

Shows items with numbers

Syntax

<ol>
  <li>Open Browser</li>
  <li>Write Code</li>
  <li>Save File</li>
</ol>

Output

1. Open Browser
2. Write Code
3. Save File

ol> Attributes

1. Type (number style)

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
</ol>

2. start (starting number)

<ol start="5">
  <li>Item</li>
  <li>Item</li>
</ol>

3. reversed (reverse order)

<ol reversed>
  <li>First</li>
  <li>Second</li>
</ol>

3. Description List (<dl>)

Used for terms and definitions

Syntax

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Important Notes

1. type attribute is mostly old-school (CSS preferred now)
2. Attributes are written in opening tag
3. Lists improve readability