Skip to main content

HTML - Lists

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain −
  • <ul> − An unordered list. This will list items using plain bullets.
  • <ol> − An ordered list. This will use different schemes of numbers to list your items.
  • <dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Example

<!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>
This will produce the following result −

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. Following are the possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">

Example

Following is an example where we used <ul type = "square">
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>
This will produce the following result −

Example

Following is an example where we used <ul type = "disc"> −
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
 
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>
This will produce the following result −

Example

Following is an example where we used <ul type = "circle"> −
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
 
</html>
This will produce the following result −

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

Example

<!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>
This will produce the following result −

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Following 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.

Example

Following is an example where we used <ol type = "1">
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>
This will produce the following result −

Example

Following is an example where we used <ol type = "I">
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
 
   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
 
</html>
This will produce the following result −

Example

Following is an example where we used <ol type = "i">
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
 
   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
 
</html>
This will produce the following result −

Example

Following is an example where we used <ol type = "A" >
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
 
   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
 
</html>
This will produce the following result −

Example

Following is an example where we used <ol type = "a">
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
 
   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
 
</html>
This will produce the following result −

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options −
<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>
This will produce the following result −

HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a 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
  • </dl> − Defines the end of the list

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 will produce the following result −
Labels:

Comments

Post a Comment

Popular posts from this blog

HTML - Phrase Tags

The phrase tags have been desicolgned for specific purposes, though they are displayed in a similar way as other basic tags like  <b>, <i>, <pre> , and  <tt> , you have seen in previous chapter. This chapter will take you through all the important phrase tags, so let's start seeing them one by one. Emphasized Text Anything that appears within  <em>...</em>  element is displayed as emphasized text. Example <!DOCTYPE html> <html> <head> <title>Emphasized Text Example</title> </head> <body> <p>The following word uses an <em>emphasized</em> typeface.</p> </body> </html> This will produce the following result − Marked Text Anything that appears with-in  <mark>...</mark>  element, is displayed as marked with yellow ink. Example <!DOCTYPE html> <html> <head> <tit...
Post a Comment
Read more

Xiaomi Redmi Note 7 Pro price and processor details leaked online

Xiaomi recently launched the Redmi Note 7 in China and will launch its Redmi Note 7 Pro next month. Now, the pricing details and processor specifications have been leaked online. A tipster by the name Dream Dust (according to Google Translate) on Weibo claims that the upcoming device from Redmi by Xiaomi will be powered by the Qualcomm Snapdragon 675 processor. He also stated that the device will be priced at 1,499 Yuan, which roughly translates to Rs 16,000. Qualcomm launched its 11nm based Snapdragon 675 processor back in October. The processor comes with an octa-core Kryo 675 CPU paired with an Adreno 612 GPU.
Post a Comment
Read more

Instagram caught selling ads to follower-buying services it banned

EZ-Grow’s co-founder Elon refused to give his last name on the record, but told me “[Clients]  always need something new. At first it was follows and likes. Now we even watch Stories for them. Every new feature that Instagram has we take advantage of it to make more visibility for our clients.” He says EZ-Grow spends $500 per day on Instagram ads, which are its core strategy for finding new customers. SocialFuse founder Alexander Heit says his company spends a couple hundred dollars per day on Instagram and Facebook ads, and was worried when Instagram reiterated its ban on his kind of service in November, but says “ We thought that we were definitely going to get shut down but nothing has changed on our end.” Instagram   has been earning money from businesses flooding its social network with spam notifications. Instagram hypocritically continues to sell ad space to services that charge clients for fake followers or that automatically follow/unfollow other people t...
Post a Comment
Read more