Home
HTML

Learn Basic HTML Complete Course part 12

2 min read

HTML Lists


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. Ordered List or Numbered List (ol)
  2. Unordered List or Bulleted List (ul)
  3. Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML 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.


HTML Unordered List or Bulleted List

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.


HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. 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.

The HTML definition list contains following three tags:

  1. <dl> tag defines the start of the list.
  2. <dt> tag defines a term.
  3. <dd> tag defines the term definition (description).

Example of all HTML List

<!DOCTYPE>
<html> 
    <body> 
        <h4>Ordered List : </h4>
           <ol> 
<li>Aries</li> 
<li>Bingo</li> 
<li>Leo</li> 
<li>Oracle</li> 
          </ol> 

<h4>Unordered List</h4>
           <ul> 
<li>Aries</li> 
<li>Bingo</li> 
<li>Leo</li> 
<li>Oracle</li> 
           </ul> 

<h4>Description List</h4>
<dl> 
  <dt>Aries</dt> 
  <dd>-One of the 12 horoscope sign.</dd> 
  <dt>Bingo</dt> 
  <dd>-One of my evening snacks</dd> 
  <dt>Leo</dt> 
  <dd>-It is also an one of the 12 horoscope sign.</dd> 
  <dt>Oracle</dt> 
  <dd>-It is a multinational technology corporation.</dd>  
</dl> 
    </body>
</html>  


Output:

Ordered List :

  1. Aries
  2. Bingo
  3. Leo
  4. Oracle

Unordered List

  • Aries
  • Bingo
  • Leo
  • Oracle

Description List

Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.



You may like these posts

  • Learn Basic HTML Complete Course part 6
    HTML Formatting TagsHTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatt…
  • Learn Basic HTML Complete Course part 5
    HTML ElementsAn HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a sta…
  • Learn Basic HTML Complete Course part 26
    HTML CharsetHTML Charset is also called HTML Character Sets or HTML Encoding. It is used to display an HTML page properly and correctly because for displaying anything correctly, a…
  • Learn Basic HTML Complete Course part 23
    HTML LayoutsHTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in responsive form or we can say that HTML layout specifies a way in which the we…
  • Learn Basic HTML Complete Course part 25
     HTML EntitiesHTML character entities are used as a replacement of reserved characters in HTML. You can also replace characters that are not present on your keyboard by entiti…
  • Learn Basic HTML Complete Course part 16
    HTML ClassesClass Attribute in HTMLThe HTML class attribute is used to specify a single or multiple class names for an HTML element. The class name can be used by CSS and JavaScrip…

Post a Comment