Category: Lists

Definition Lists

A description list is defined by <dl> tag along with the <dt> and <dd> tags. Where <dt> tag defines the definition term, and <dd> tag defines the corresponding definition.

HTML Definition Lists

HTML definition lists define list items having the structure of terms and their corresponding definitions. These types of lists are used to define a listing structure where each list item (data term) contians its corresponding explanation (definition description).

The <dl> tag supports almost all browsers. It also supports the global attributes and event attributes. It consists of open and closing tags like <dl></dl>

Definition List Tags

The following are the HTML tags used for defining definition lists:

<dl>: This tag defines the definition list.
<dt>: This tag defines the description term.
<dd>: This tag defines the corresponding description for the given definition term.

Creating Definition List

To create a definition list, you need to use the <dl> tag along with the <dt> and <dd> tags.

Where,

<dl> is used as a container tag for the definition list.
<dt> is used to define the terms that you want to define.
<dd> is used to place the definitions for the corresponding terms.

Syntax

Below is the syntax (structure) of creating a definition list in HTML:

<dl><dt>Term 1</dt><dd>Definition for Term 1</dd><dt>Term 2</dt><dd>Definition for Term 2</dd><dt>Term 3</dt><dd>Definition for Term 3</dd></dl>

Example of Definition List

In the following example, we are creating a definition list with four terms along with their corresponding descriptions:

<!DOCTYPE html><html><body><h2>Different Types Of Languages</h2><dl><dt>English:</dt><dd>
  English is the first world language. We can 
  use English language for communication in all 
  areas like politics, media, entertainment, 
  art etc.   </dd><dt>Hindi:</dt><dd>
  Hindi is an Indo-Aryan language spoken mostly 
  in India. In India Hindi is spoken as a first 
  language by most of the people.   </dd><dt>Marathi:</dt><dd>
  Marathi is an Indo-Aryan language spoken by 
  Marathi people of Maharashtra in India. It 
  is a official Language of Maharashtrian 
  people   </dd><dt>French:</dt><dd>
  French is the official language in Canada, 
  Central, African, Burkina, Faso, Burundi etc.
   </dd></dl></body></html>

Styling Definition Lists

You can also customize the default appearance of the definition lists using the CSS properties. You can apply the CSS styles on all three definition list tags to style them as per your requirement to match with the website theme.

Example

In the following example, we are applying CSS properties to customize the appearance of the definition list:

<!DOCTYPE html><html><head><style>
  body {
     font-family: Arial, sans-serif;
     margin: 20px;
  }
  dl {
     background-color: #f9f9f9;
     border: 1px solid #ddd;
     padding: 20px;
     border-radius: 5px;
     max-width: 400px;
     margin: 0 auto;
  }
  dt {
     font-weight: bold;
     color: #333;
     margin-top: 10px;
  }
  dd {
     margin: 0 0 10px 20px;
     color: #555;
  }
   </style></head><body><dl><dt>Tutorialspoint</dt><dd>
  Tutorialspoint provides access to a library 
  of video courses on various prominent 
  technologies, aimed at helping individuals 
  master those technologies and become 
  certified professionals.   </dd><dt>Tutorix</dt><dd>
  Tutorix is child company of tutorialspoint 
  that covers NCERT-based syllabus for maths 
  and science. Also give a great foundation 
  for IIT/JEE and NEET aspirants.
   </dd></dl></body></html>

Default CSS for Definition Lists

There are default CSS settings for almost all browsers that display the<dl> elements.

Example

The following code constains the default CSS properties for the definition list. If you remove them, nothing will change in output:

<!DOCTYPE html><html><head>
   &lt!-- This is default style of Definition Lists -->
   <style>
  dl {
     display: block;
     margin-top: 1em;
     margin-bottom: 1em;
     margin-left: 0;
     margin-right: 0;
  }   </style></head><body><dl><dt>Definition List</dt><dd>
     A list of terms and their definitions.
  &lt;/dd&gt;&lt;dt&gt;Android&lt;/dt&gt;&lt;dd&gt;Android tutorial.&lt;/dd&gt;&lt;dt&gt;Ruby&lt;/dt&gt;&lt;dd&gt;Ruby tutorial.&lt;/dd&gt;&lt;/dl&gt;&lt;p&gt;
  We added default style to Description List
   </p></body></html>

Nested Definition Lists

Nested definition lists allow you to add detailed sub-definitions within a main definition term.

Example

The following example demonstrates the nested definition lists in HTML:

<!DOCTYPE html><html lang="en"><head><title>Nested Definition Lists Example</title></head><body><h2>Nested Definition Lists Example</h2><dl><dt>Programming Languages</dt><dd><dl><dt>Python</dt><dd>A high-level, interpreted programming language.</dd><dt>JavaScript</dt><dd>A language used for web development.</dd></dl></dd><dt>Web Technologies</dt><dd><dl><dt>HTML</dt><dd>The standard markup language for creating web pages.</dd><dt>CSS</dt><dd>Used for styling web pages.</dd></dl></dd></dl></body></html>

August 16, 2025

Ordered Lists

An ordered list is defined by <ol> tag where all list items are marked an ordered list.

Ordered HTML Lists

An ordered list is a collection of items that have a specific order or sequence. HTML ordered list is created by <ol> tag where each list item is defined by the <li> tag.

This type of ordered list is used to show the list items, where they are marked with an ordered numbered list, such as the steps of a recipe, the ranking of a leaderboard, or the chronological order of events as shown in the below figure:

Creating Ordered Lists

To create an ordered list in HTML, we use the <ol> tag and nest <li> tags inside it. Each <li> element represents one item in the list. The numbering starts with 1 and is incremented by one for each successive ordered list element tagged with <li>. Like an unordered list, it also allows us to change the numbering style using the type attribute of the <ol> element.

Example

The following example demonstrates creating ordered lists in HTML:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><ol><li>Beetroot</li><li>Ginger</li><li>Potato</li><li>Radish</li></ol></body></html>

If you click on Edit & Run the above example displays an ordered list.

HTML Ordered List – The type Attribute

Thetype attribute for the<ol> tag is used to specify the type of marker for the ordered list in HTML. By default, the type of list numbering is numbers starting with 1, 2, 3, and so on. You can change the type of numbers by using any of the values given below:

S.No	Value & Description
1	1It is the default type of marker.
2	IList items will be displayed with roman number marker.
3	AIt will set the marker to upper case alphabets.
4	aIt sets the marker to lower case alphabets.

Ordered List With Numbers

The following example demonstrates the ordered lists with numbers type marker:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with counting numbers:</p><ol type="1"><li>Beetroot</li><li>Ginger</li><li>Potato</li><li>Radish</li></ol></body></html>

Ordered List With Uppercase Roman

The following example demonstrates the ordered lists with uppercase roman numbers type marker:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with uppercase roman numbers:</p><ol type="I"><li>Aman</li><li>Vivek</li><li>Shrey</li><li>Ansh</li></ol></body></html>

Ordered List With Lowercase Roman

The following example demonstrates the ordered lists with lowercase roman numbers type marker:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with lowercase roman numbers:</p><ol type="i"><li>Aman</li><li>Vivek</li><li>Shrey</li><li>Ansh</li></ol></body></html>

Ordered List With Uppercase Alphabets

The following example demonstrates the ordered lists with uppercase alphabets type marker:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with uppercase alphabets:</p><ol type="A"><li>Bus</li><li>Train</li><li>Plane</li><li>Boat</li></ol></body></html>

Ordered List With Lowercase Alphabets

The following example demonstrates the ordered lists with lowercase alphabets type marker:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with lowercase alphabets:</p><ol type="a"><li>Bus</li><li>Train</li><li>Plane</li><li>Boat</li></ol></body></html>

The above examples display ordered lists with counting numbers, roman numbers, and alphabets.

HTML Ordered List – The start Attribute

By default, the numbering starts with 1, but you can change it by using the start attribute with the <ol> tag. The style attribute defines the starting numbers of the ordered list.

Syntax

The following are the different syntaxes (use cases) to define number types and the initial (starting) number for the ordered list:

<ol type="1" start="4"> - Numerals starts with 4.
<ol type="I" start="4"> - Numerals starts with IV.
<ol type="i" start="4"> - Numerals starts with iv.
<ol type="a" start="4"> - Letters starts with d.
<ol type="A" start="4"> - Letters starts with D.

Example

Following is an example where we used <ol type="i" start="4" >:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><ol type="i" start="4"><li>Beetroot</li><li>Ginger</li><li>Potato</li><li>Radish</li></ol></body></html>

Styling HTML Ordered List

Styling ordered lists with CSS allows customization of the appearance to match the design preferences of a website. The CSS styles can target both the list itself (<ol>) and the list items (<li>).

Example

Below is the program example that includes all the CSS styling for ordered list:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Styled Ordered List</title><style>
  /* Basic Styling */
  ol {
     color: navy;
     font-family: 'Arial', sans-serif;
     margin-left: 20px;
  }
  li {
     font-size: 16px;
     margin-bottom: 8px;
  }
  /* Changing Numbering Style */
  ol.roman {
     list-style-type: upper-roman;
  }
  ol.letters {
     list-style-type: upper-alpha;
  }
  /* Adding Counters */
  ol.counter-list {
     counter-reset: my-counter;
  }
  ol.counter-list li {
     counter-increment: my-counter;
  }
  ol.counter-list li::before {
     content: counter(my-counter) '. ';
  }
  /* Changing Text Color on Hover */
  li.hover-effect:hover {
     color: #e44d26;
  }
   </style></head><body><h1>Styled Ordered List Example</h1><h2>Basic Styling</h2><ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol><h2>Changing Numbering Style</h2><ol class="roman"><li>Roman I</li><li>Roman II</li><li>Roman III</li></ol><ol class="letters"><li>Letter A</li><li>Letter B</li><li>Letter C</li></ol><h2>Adding Counters</h2><ol class="counter-list"><li>Item</li><li>Item</li><li>Item</li></ol><h2>Changing Text Color on Hover</h2><ol><li class="hover-effect">Hover Effect 1</li><li class="hover-effect">Hover Effect 2</li><li class="hover-effect">Hover Effect 3</li></ol></body></html>

The program creates a styled HTML document with ordered lists. It includes basic styling, changes numbering styles to Roman and letters, adds counters to items, and changes text color on hover.

Nested Ordered Lists

HTML allows nesting of lists; you can create nested ordered lists to display a list of items inside an item of the outer list element.

Note: You can also change the type of outer or inner lists. In the below example, the main list has decimal numbers, the list of the second list item has lowercase roman numbers, and the list of the third list item has uppercase roman numbers. You can also define the starting number as per your requirement.

Example

The following example deonstartes the use of nested ordered lists:

<!DOCTYPE html><html><head><title>Nested Ordered Lists</title></head><body><h2>Example of Nested Ordered Lists</h2><ol><li>Fruits
&lt;ol&gt;&lt;li&gt;Apple&lt;/li&gt;&lt;li&gt;Banana&lt;/li&gt;&lt;li&gt;Orange&lt;/li&gt;&lt;/ol&gt;&lt;/li&gt;&lt;li&gt;Vegetables
&lt;ol type="i"&gt;&lt;li&gt;Carrot&lt;/li&gt;&lt;li&gt;Broccoli&lt;/li&gt;&lt;li&gt;Spinach&lt;/li&gt;&lt;/ol&gt;&lt;/li&gt;&lt;li&gt;Dairy
&lt;ol type="I"&gt;&lt;li&gt;Milk&lt;/li&gt;&lt;li&gt;Cheese&lt;/li&gt;&lt;li&gt;Yogurt&lt;/li&gt;&lt;/ol&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 16, 2025

Unordered Lists

An HTML unordered list is defined by <ul> tag where all list items are marked with bullets.

Unordered HTML Lists

An unordered list is a collection of list items that do not have a specific order or sequence and are marked with the bullets. An HTML unordered list is created by <ul> the tag, where each list item is defined by the <li> tag.

This type of list is used for describing a particular service or product, as it does not require any order to be followed.

The below figure shows an ordered list of groceries: Unordered Lists

Creating Unordered Lists

To create an unordered list in HTML, we use the <ul> tag and nest <li> tags inside it. Each <li> element represents one item in the list. By default, the browser will automatically display disc bullet points for each item. However, we can change this bullet style using the type attribute on the <ul> element.

Example

The following example demonstrates how to create an unordered list in HTML:

<!DOCTYPE html><html><head><title>HTML Unordered List</title></head><body><ul><li>Beetroot</li><li>Ginger</li><li>Potato</li><li>Radish</li></ul></body></html>

The above example displays an unordered list with default disc bullets.

HTML Unordered List – Specifying List Marker

The type attribute for the <ul> tag is used to specify the type of bullet for the unordered list in HTML. By default, disc bullet type is used. But we can change this with the help of the following options:

S.No	Value & Description
1	discIt is the default type of marker.
2	squareList items will be displayed with a square marker.
3	circleIt will set the marker to a hollow circle.

Disc Marker

The following example illustrates disc marker with an unordered list in HTML:

<!DOCTYPE html><html><head><title>HTML Unordered List</title></head><body><p>An unordered list with default disc marker:</p><ul type="disc"><li>Apple</li><li>Guava</li><li>Carrot</li><li>Orange</li></ul></body></html>

Square Marker

The following example illustrates square marker with an unordered list in HTML:

<!DOCTYPE html><html><head><title>HTML Unordered List</title></head><body><p>An unordered list with square marker:</p><ul type="square"><li>Nuts</li><li>Oats</li><li>Eggs</li><li>Dates</li></ul></body></html>

Circle Marker

The following example illustrates circle marker with an unordered list in HTML:

<!DOCTYPE html><html><head><title>HTML Unordered List</title></head><body><p>An unordered list with hollow circle marker:</p><ul type="circle"><li>Rice</li><li>Pulses</li><li>Flour</li><li>Beans</li></ul></body></html>

The above examples display three unordered lists with default disc bullets, square and hollow circular bullets.

HTML Unordered List Without Bullets

You can also display the list items of an unordered list without showing the bullets. To display an unordered list without bullets, define the “none” to the list-style-type property.

Syntax

Following is the syntax to create an unordered list without bullets in HTML:

<ul style="list-style-type: none"><li>Item in list...</li><li>Item in list...</li><li>Item in list...</li></ul>

Example

Given below is an example of creating an unordered list without bullets in HTML:

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><ul style="list-style-type: none"><li>Abdul</li><li>Jason</li><li>Yadav</li></ul></body></html>

The above program creates an unordered list that contains elements Abdul, Jason, and Yadav without bullets.

Styling Unordered HTML Lists

Styling an unordered list (<ul>) using CSS allows for customization of the list’s appearance, including modifying bullet points, spacing, and overall design.

Example

Below is the program example:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Styled Unordered List</title><style>
  ul {
     list-style-type: square;
     /* Custom bullet type */
     padding: 0;
     /* Removes default padding */
  }
  li {
     margin-bottom: 8px;
     /* Adds spacing between list items */
     background-color: #f0f0f0;
     /* Background color */
     border: 1px solid #ccc;
     /* Border */
     padding: 8px;
     /* Padding inside each list item */
     transition: background-color 0.3s;
     /* Smooth transition effect */
  }
  li:hover {
     background-color: #e0e0e0;
     /* Change background on hover */
  }
   </style></head><body><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></body></html>

The above program styles an unordered list with a square bullet. Each list item has a background color, border, and padding, creating a distinct card-like appearance. The items are separated by a margin, and hovering over an item triggers a smooth background color transition.

Nested Unordered Lists

HTML allows nesting of lists; you can create nested unordered lists to display a list of items inside an item of the outer list element.

Example

The following example deonstartes the use of nested unordered lists:

<!DOCTYPE html><html><head><title>Nested Unordered Lists</title></head><body><h2>Example of Nested Unordered Lists</h2><ul><li>Fruits
&lt;ul&gt;&lt;li&gt;Apple&lt;/li&gt;&lt;li&gt;Banana&lt;/li&gt;&lt;li&gt;Orange&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;Vegetables
&lt;ul&gt;&lt;li&gt;Carrot&lt;/li&gt;&lt;li&gt;Broccoli&lt;/li&gt;&lt;li&gt;Spinach&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;Dairy
&lt;ul&gt;&lt;li&gt;Milk&lt;/li&gt;&lt;li&gt;Cheese&lt;/li&gt;&lt;li&gt;Yogurt&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 16, 2025

Lists

HTML lists are group or collection of items. These items can be both organized and unorganized depending on the requirement. They help in organizing, structuring, and presenting information to make it more user-friendly, readable, and accessible. Sample lists are shown below. −

Using Lists in HTML

To display a list of information in HTML, we use various list tags like <ul>, <ol>, and <ll>. HTML offers web developers three ways for specifying lists of information, namely ordered, unordered, and definition lists. All lists must contain one or more list elements. In addition to the mentioned types of lists, there are some other important list-related elements and concepts that also contribute to effective document structuring.

Unordered lists

Unordered lists display lists of items that are not in a specific order. The unordered lists are marked with bullet points. To create an unordered list, the <ul> tag is used along with the <li> tag. Here, the <li> tag specifies the list items.

Example

The following example demonstrates an unordered listing. Here, we are creating a list of 5 items:

<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Java</li><li>JavaFX</li></ul></body></html>

Ordered Lists

Ordered lists are lists of items that are in a specific order. The ordered lists are marked with numbers by default; you can change the numbers into alphabets, roman numbers, etc. by using the type attribute or the CSS list-style-type property.

To create an ordered list, the <ol> tag is used along with the <li> tag, where <li> specifies the list items.

Example

The following example demonstrates an ordered list having the list of 5 items:

<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><ol><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Java</li><li>JavaFX</li></ol></body></html>

Definition Lists

Definition lists are lists of items with their corresponding descriptions. The definition lists are created by using the <dl>, <dt>, and <dd> tags. Where the <dl> tag specifies the “definition list”, the <dt> tag specifies the “definition term”, and the <dd> tag specifies the “definition description”.

Example

The following example demonstrates the definition list in HTML; here we are creating a definition list with three items:

<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><dl><dt>HTML</dt><dd>HyperText markup languague</dd><dt>CSS</dt><dd>Cascading Style Sheet</dd><dt>JS</dt><dd>JavaScript</dd></dl></body></html>

Nested Lists

A list created within another list is known as a nested list. HTML also allows nesting of lists within one another to generate complex document structures.

Example

In the following example, we are nesting an unordered list within an ordered list:

<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML Nested List</h2><ol><li>Item One</li><li>Item Two
     &lt;ul&gt;&lt;li&gt;Subitem A&lt;/li&gt;&lt;li&gt;Subitem B&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;Item Three&lt;/li&gt;&lt;/ol&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Grouping Lists Inside <div> Tag



To enhance styling and layout, lists are often wrapped inside the <div> elements. This grouping aids in applying consistent styles and creating visually appealing list structures.



Example



In this example, we are grouping unordered lists with a div tag:



<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Grouping of HTML List elements with div tag</h2><div><p>First List</p><ol><li>Item One</li><li>Item Two</li></ol></div><div><p>Second List</p><ol><li>Item Three</li><li>Item Four</li></ol></div></body></html>



Styling Lists



Lists can be styled using CSS to enhance visual presentation. Custom styles can be applied to list items, creating unique and visually appealing designs. For this, we use the <style> tag, which is a way of specifying internal CSS.



Example



The following example demonstrates how to apply CSS to the HTML list using a style tag:



<!DOCTYPE html><html><head><title>HTML List</title><style>
  li {
     font-size: 16px;
  }
  div {
     color: red;
  }
   </style></head><body><h2>HTML List with CSS</h2><div><p>First List</p><ol><li>Item One</li><li>Item Two</li></ol></div><div><p>Second List</p><ol><li>Item Three</li><li>Item Four</li></ol></div></body></html>



HTML Lists Marker Types



CSS allows customization of marker types for list items. To do so, we use the CSS list-style-type property, which can be set to change markers to circles, squares, or other symbols.



Example



In this example, we are using the list-style-type property of CSS to set the markers of list items:



<!DOCTYPE html><html><head><title>HTML List</title><style>
  li {
     font-size: 16px;
     list-style-type: square;
  }
   </style></head><body><h2>HTML list-style-type Property</h2><div><p>First List</p><ol><li>Item One</li><li>Item Two</li></ol></div><div><p>Second List</p><ol><li>Item Three</li><li>Item Four</li></ol></div></body></html>

August 16, 2025