HTML Lists

HTML Lists are basically used to enlist items in a web page. They are also used to enlist navigation items in websites. List items can contain any HTML element inside them. There are three types of lists in HTML namely:

1. Unordered HTML List
2. Ordered HTML List
3. HTML Description List

Unordered HTML List

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

Example

<ul>
  <li>HTML</li>
  <li>CSS </li>
  <li>Javascript</li>
</ul>

• HTML
• CSS
• Javascript

Unordered HTML Lists - type Attribute

You can use type attribute to change the list item marker. CSS property list-style-type or list-style can also be used to style them along with style attribute or using CSS.

Attribute Value	Description
disc	Set bullet as the list item marker
circle	Set circle as the list item marker
square	Set square as the list item marker
none	Hide the list item marker

Example - Disc

<ul type="disc">
  <li>HTML</li>
  <li>CSS </li>
  <li>Javascript</li>
</ul>

• HTML
• CSS
• Javascript

Example - Circle

<ul type="circle">
  <li>HTML</li>
  <li>CSS </li>
  <li>Javascript</li>
</ul>

• HTML
• CSS
• Javascript

Example - Square

<ul type="square">
  <li>HTML</li>
  <li>CSS </li>
  <li>Javascript</li>
</ul>

• HTML
• CSS
• Javascript

Example - None

<ul type="none">
  <li>HTML</li>
  <li>CSS </li>
  <li>Javascript</li>
</ul>

• HTML
• CSS
• Javascript

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

<ol>
  <li>HTML</li>
  <li>CSS </li>
  <li>Javascript</li>
</ol>

1. HTML
2. CSS
3. Javascript

Ordered HTML List - type Attribute

You can use type attribute to change the list item marker. CSS property list-style-type or list-style can also be used to style them along with style attribute or using CSS.

Attribute Value	Description
1	Set The list items will be ordered in sequence with numbers (default)
A	Set The list items will be ordered in sequence with uppercase alphabets
a	Set The list items will be ordered in sequence with lowercase alphabets
I	Set The list items will be ordered in sequence with uppercase roman numbers
i	Set The list items will be ordered in sequence with lowercase roman numbers

Example - Numbers

<ol type="1">
  <li>HTML</li>
  <li>CSS </li>
  <li>Javascript</li>
</ol>

1. HTML
2. CSS
3. Javascript

Example - Uppercase Alphabet

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

1. HTML
2. CSS
3. Javascript

Example - Lowercase Alphabet

<ol type="a">
  <li>HTML</li>
  <li>CSS </li>
  <li>Javascript</li>
</ol>

1. HTML
2. CSS
3. Javascript

Example - Uppercase Roman Numbers

<ol type="I">
  <li>HTML</li>
  <li>CSS </li>
  <li>Javascript</li>
</ol>

1. HTML
2. CSS
3. Javascript

Example - Lowercase Roman Numbers

<ol type="i">
  <li>HTML</li>
  <li>CSS </li>
  <li>Javascript</li>
</ol>

1. HTML
2. CSS
3. Javascript

HTML Description Lists

A description list is a list of terms followed by a description of each term. The <dl> tag defines the description list while the <dt> tag defines the term (name) and the <dd> tag describes each term.

Example

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheet</dd>
</dl>

HTML

Hypertext Markup Language

CSS

Cascading Style Sheet

Nested HTML Lists

HTML lists can be added inside another HTML list which is termed as nested HTML list.

Example

<ul>
    <li>HTML
    	<ul>
    		<li>Headings</li>
    		<li>Paragraphs</li>
    		<li>Text Formatting</li>
    		<li>Links</li>
    		<li>Images</li>
    		<li>Lists</li>
    	</ul>
    </li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

• HTML
  • Headings
  • Paragraphs
  • Text Formatting
  • Links
  • Images
  • Lists
• CSS
• Javascript

Control List Counting

An ordered list starts counting from the initial value on the sequence. You can use start attribute to force the counting from any value in the numerical sequence. Note: This only works for numerically ordered lists.

7. HTML
8. CSS
9. Javascript

---

Try It Yourself »

---

0 Like 0 Dislike 0 Comment Share Tweet