CODESCRACKER

HTML Lists

This article was created and published to describe how to present content on the web in the form of lists.

HTML provides multiple tags to present the content on the web in the form of organized, unorgranized, and description lists.

So without further delay, let's start the topic. But before I go on to describe any sub-topic, let me first list the topics that we are going to cover in this article for your convenience.

Now let's briefly describe all the above topics regarding the "HTML list" one by one, starting with the "types of lists in HTML."

Types of lists in HTML

There are three types of lists available in HTML, which are as follows:

Ordered list in HTML

The ordered list in HTML can be created using the "OL" tag, where the list items will be numbered. For example:

HTML Code
<!DOCTYPE html>
<html>
<body>
      
   <p>List of famous web developing languages:</p>
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>

</body>
</html>
Output

List of famous web developing languages:

  1. HTML
  2. CSS
  3. JavaScript

The letters "OL" stand for ordered list, while the letters "LI" stand for list items, which are used to create list items.

The default marker for the ordered list items starts with 1. The following table helps you customize the marker of the ordered list in HTML.

Change the marker of the ordered list in HTML

To define the type of the marker, add the "type" attribute to an ordered list. The marker types used in an ordered list are listed and described in the table below.

Type Description
type="1" The list items will be numbered with numbers (default).
type="a" The list items will be numbered with lowercase letters.
type="A" The list items will be numbered with uppercase letters.
type="i" The list items will be numbered with lowercase roman numbers.
type="I" The list items will be numbered with uppercase roman numbers.

Now let me give another example of the ordered list in HTML, along with the modification of the markers provided in the previous table.

HTML Code
<!DOCTYPE html>
<html>
<body>
      
   <ol type="a">
      <li>HTML List</li>
      <li>HTML Ordered List</li>
   </ol>
   
   <ol type="A">
      <li>HTML List</li>
      <li>HTML Ordered List</li>
   </ol>
   
   <ol type="i">
      <li>HTML List</li>
      <li>HTML Ordered List</li>
   </ol>
   
   <ol type="I">
      <li>HTML List</li>
      <li>HTML Ordered List</li>
   </ol>

</body>
</html>
Output
  1. HTML List
  2. HTML Ordered List
  1. HTML List
  2. HTML Ordered List
  1. HTML List
  2. HTML Ordered List
  1. HTML List
  2. HTML Ordered List

Unordered list in HTML

The ordered list in HTML is used when we need to display list items without any type of numbering. The default markers of the unordered list are bullets. For example:

HTML Code
<!DOCTYPE html>
<html>
<body>
      
   <p>List of famous web developing languages:</p>
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ul>

</body>
</html>
Output

List of famous web developing languages:

  • HTML
  • CSS
  • JavaScript

Change the marker of the unordered list in HTML

The style attribute can be added to an unordered list to define the style of the marker. The table given below lists and describes the attributes of the HTML unordered list style type.

Style Description
list-style-type:circle The list items will be marked with circles.
list-style-type:disc The list items will be marked with bullets (default).
list-style-type:square The list items will be marked with squares.
list-style-type:none The list items will not be marked.

Now is the time to implement all the markers except the default one, in the example given below, to achieve the full command on the topic "unordered list in HTML."

HTML Code
<!DOCTYPE html>
<html>
<body>
      
   <ul style="list-style-type: circle;">
      <li>HTML List</li>
      <li>HTML Unordered List</li>
   </ul>
      
   <ul style="list-style-type: square;">
      <li>HTML List</li>
      <li>HTML Unordered List</li>
   </ul>
      
   <ul style="list-style-type: none;">
      <li>HTML List</li>
      <li>HTML Unordered List</li>
   </ul>

</body>
</html>
Output
  • HTML List
  • HTML Unordered List
  • HTML List
  • HTML Unordered List
  • HTML List
  • HTML Unordered List

Description list in HTML

When we need to provide a description of some terms on the web, we use the description list in an HTML document. As an example:

HTML Code
<!DOCTYPE html>
<html>
<body>
      
   <dl>
      <dt>HTML</dt>
      <dd>used to create web pages.</dd>
      
      <dt>PHP</dt>
      <dd>used to generate the content on the web page dynamically.</dd>
   </dl>

</body>
</html>
Output
HTML
used to create web pages.
PHP
used to generate the content on the web page dynamically.

The "DL" tag is used to define the description list. It is similar to "UL" and "OL." Whereas the "DT" and "DD" tags are used to define and describe the term in the description list.

Nested list in HTML

One list can also be nested in another. For example:

HTML Code
<!DOCTYPE html>
<html>
<body>
      
   <ul>
      <li>Web developing languages:
         <ul>
            <li>Famous front-end languages:
               <ul>
                  <li>HTML</li>
                  <li>CSS</li>
                  <li>JavaScript</li>
               </ul>
            </li>
            <li>Famous back-end languages:
               <ul>
                  <li>PHP</li>
                  <li>Java</li>
                  <li>Python</li>
               </ul>
            </li>
         </ul>
      </li>
      <li>Famous software development languages:
         <ol>
            <li>Java</li>
            <li>Python</li>
            <li>C++</li>
         </ol>
      </li>
   </ul>

</body>
</html>
Output
  • Web developing languages:
    • Famous front-end languages:
      • HTML
      • CSS
      • JavaScript
    • Famous back-end languages:
      • PHP
      • Java
      • Python
  • Famous software development languages:
    1. Java
    2. Python
    3. C++

HTML list tag cheat sheet

The descriptions of all the above tags are already described in the above content.

Create a horizontal list in HTML

You can also use CSS to create a horizontal list in HTML. Here's an example of a horizontal list created in HTML:

HTML Code
<!DOCTYPE html>
<html>
   <head>
      <style>
         ul li{display: inline;}
      </style>
   </head>
<body>
   
   <p>List of famous search engines:</p>
   <ul>
      <li>Google</li>
      <li>Bing</li>
      <li>Yahoo</li>
   </ul>

</body>
</html>
Output

List of famous search engines:

  • Google
  • Bing
  • Yahoo

HTML Online Test

Previous Tutorial Next Tutorial

Liked this post? Share it!