HTML – Lists

Share

With HTML lists, web developers can group a set of related items into lists. In HTML there are three types of lists as specified via the following elements:

  • <ul> − An unordered list. This list will display items using plain bullets.
  • <ol> − An ordered list. This list will use various schemes of numbers to list the items.
  • <dl> − A definition list. This list arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered Lists

An unordered list is contained with the <ul> tag. Each list item starts with the <li> tag. By default, the list items will be marked with small black circle bullets (disc type attribute).

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

This is what an HTML unordered list looks like:

  • Python
  • HTML
  • CSS
  • JavaScript

You can use the type attribute for the <ul> tag to specify the type of bullet you like. The default is disc. These are the possible options:

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

HTML Ordered List

An ordered list is contained with the <ol> tag. Each list item starts with the <li> tag. The list items are displayed with numbers by default:

<ol>
   <li>Breakfast</li>
   <li>Lunch</li>
   <li>Dinenr</li>
</ol>

This is what an HTML ordered list looks like:

  1. Breakfast
  2. Lunch
  3. Dinner

The type Attribute

You can use the type attribute for the <ol> tag to specify the type of numbering you like. These are the possible options:

<ol type="1"> – Default-Case Numerals.
<ol type="I"> – Upper-Case Numerals.
<ol type="I"> – Lower-Case Numerals.
<ol type="A"> – Upper-Case Letters.
<ol type="a"> – Lower-Case Letters.

The start Attribute

You can use the start attribute for the <ol> tag to specify the initial numbering index you need.

<ol type="1" start="6"> – Numerals starts with 6.
<ol type="I" start="6"> – Numerals starts with VI.
<ol type="i" start="6"> – Numerals starts with vi.
<ol type="a" start="6"> – Letters starts with f.
<ol type="A" start="6"> – Letters starts with F.

HTML Definition Lists

HTML definition lists can be used to create name/value pair lists such as those you would find in a dictionary of terms and definitions, a glossary, etc.

Definition lists achieve this using the following three tags.

<dl> − Defines the start of the definition list
<dt> − A term within the definition list
<dd> − The term definition

<dl>
   <dt><b>HTML</b></dt>
   <dd>This stands for Hyper Text Markup Language</dd>
   <dt><b>CSS</b></dt>
   <dd>This stands for Cascadig Style Sheets</dd>
</dl>

This is what an HTML definition list looks like:

  • HTML
    This stands for Hyper Text Markup Language
  • CSS
    This stands for Cascading Style Sheets

Share