Summary -

In this topic, we described about the below sections -

HTML supports three types of lists.

  1. Unordered lists
  2. Ordered lists
  3. Descriptive lists

<ul> tag

Unordered list in HTML document. Unordered list is a list which do not have any logical sequence. The <ul> tag used to specify an unordered list in an HTML document.

<ul> list item can be listed without numbers ordering mechanism. By default, the <ul> item will be listed with round bullet points.

The tag can be specified like <ul></ul> with the list item elements in between the opening and closing tags. <ul> tag have the <li> tag as a nested tag to specify the item.

Syntax -

<ul>HTML text here </ul>

Optional Attributes -

AttributeDescriptionValues
CompactSpecifies the list should from smaller than normalCompact
TypeSpecifies the marker type used for listdiscsquarecircle

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>unordered list tag example.. </title>
	</head>
	<body>
		<h6> UnOrdered list: </h6>
		<ul>
			<li>Monday</li>
			<li>Tuesday</li>
			<li>Wednesday</li>
			<li>Thursday</li>
			<li>Friday</li>
			<li>Saturday</li>
			<li>Sunday</li>
		</ul>
	</body>
</html>

Output -

UnOrdered list -
  • Monday
  • Tuesday
  • Wednesday
  • Thursday
  • Friday
  • Saturday
  • Sunday

<ol> tag

Ordered list in html documents. The <ol> tag used to represents an ordered list in HTML document. Ordered list is nothing but a list has logical sequence with it.

Ordered list can be numerical or alphabetical sequence. <li> tag used to define the list items in ordered list. The tag can be specified like <ol></ol> with the list item inserted in between the opening and closing tags.

An ordered list can be use below.

  1. decimal numbers (eg, 1. 2. 3. ... etc)
  2. lower case latin alphabet (eg. a. b. c. ... etc)
  3. upper case latin alphabet (eg. A. B. C. ... etc)
  4. lower case roman numerals (eg. i. ii. iii. ... etc)
  5. upper case roman numerals (eg. I. II. III. ... etc)

Syntax -

<ol>….</ol>

Optional Attributes -

AttributeDescriptionValues
CompactSpecifies the size should be smaller than normal.Not supported in HTML5compact
reversedSpecifies the list order should be descending.HTML5 attributereserved
startSpecifies the starting value for the list.Number.
typeSpecifies the type of the list marker.1: Decimal a: Lowercase Latin alphabet A: Uppercase Latin alphabet i: Lowercase Roman numerals I: Uppercase Roman numerals

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>LIST tag example.. </title>
	</head>
	<body>
		<h6> Ordered list: </h6>
		<ol>
			<li>Monday</li>
			<li>Tuesday</li>
			<li>Wednesday</li>
			<li>Thursday</li>
			<li>Friday</li>
			<li>Saturday</li>
			<li>Sunday</li>
		</ol>
	</body>
</html>

Output -

Ordered list:
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
  6. Saturday
  7. Sunday

<dl> tag

Description list. The <dl> tag is used to specify a description list. The description list (<dl>) is a list item contains a term and a description.

Description can be more than one for a description list. The term is represented with <dt> tag and will discuss further. The description is represented with <dd> tag.

The <dl> tag defines a definition list in HTML 4.01. The <dl> tag defines a description list in HTML 5.

Syntax -

<dl>.... HTML text here </dl>

Example -

<!DOCTYPE html>
<html>
<head>
	<title> DD element example.. </title>
</head>
<body>
	<dl>
	   <dt></dt>
	   <dd>TC objective is to deliver the point to point online content
	   on various technologies (including technical and non-technical)
	   to encourage the reader to learn and gain expertise on their
	   desired skills without any conditions and restrictions.</dd>
	</dl>
</body>
</html>

Output -

TC objective is to deliver the point to point online content on various technologies (including technical and non-technical) to encourage the reader to learn and gain expertise on their desired skills without any conditions and restrictions.