HtmlCssMonk

Lists in HTML | Learn Basic HTML

smartphone, to do list, to do

DESCRIPTION

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:

  1. Unordered List or Bulleted List (ul)
  2. Ordered List or Numbered List (ol)
  3. Description List or Definition List (dl)

Note: We can create a list inside another list, which will be termed as nested List.

Unordered or Bulleted list <ul>

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

Example –

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul>
         <li>Inception</li>
         <li>Interstellar</li>
         <li>Tenet</li>
         <li>Predestination</li>
      </ul>
   </body>
   
</html>

This Code will produce the following result on your webpage –

  • Inception
  • Interstellar
  • Tenet
  • Predestination

The Type Attribute

We can use type attribute for <ul> tag to see the particular type of bullet in our list. By default, it is a disc. There are 3 possible options to choose from –

<ul type = "disc"> - It shows circular disc as bullets.
<ul type = "square"> - It shows square as bullets.
<ul type = "circle"> - It shows circle (hollow disc) as bullets.

Ordered or Numbered list <ol>

In the HTML ordered lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

Example –

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol>
         <li>Inception</li>
         <li>Interstellar</li>
         <li>Tenet</li>
         <li>Predestination</li>
      </ol>
   </body>
   
</html>

This Code will produce the following result on your webpage –

  1. Inception
  2. Interstellar
  3. Tenet
  4. Predestination

The Type Attribute

We can use type attribute for <ol> tag to see the particular type of numbering in our list. By default, it is a number. There are 5 possible options to choose from –

<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.

Description or Definition list <dl>

HTML Description list is also a list style which is supported by HTML . It is also known as definition list where entries are listed like a dictionary or encyclopedia. The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.

Definition List makes use of following three tags –

  • <dl> − Defines the start of the list
  • <dt> − A term
  • <dd> − Term definition

Example –

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>

This Code will produce the following result on your webpage –


Next topic – Forms in HTML

Previous topic – Tables in HTML


1 thought on “Lists in HTML | Learn Basic HTML”

Leave a Comment

Your email address will not be published. Required fields are marked *