HTML LISTS

HTML offers  three ways for specifying lists of information

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.

 

<!DOCTYPE html>

<html>
<head>
      <title>HTML Unordered List</title>
   </head>
<body>
      <ul>
         <li>Car</li>
         <li>Bus</li>
         <li>Auto</li>
         <li>Cycle</li>
      </ul>
   </body>
</html>

 

Output

html list

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.

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

 

<!DOCTYPE html>

<html>
<head>
      <title>HTML Unordered List</title>
   </head>
<body>
      <ul type="square">
         <li>Car</li>
         <li>Bus</li>
         <li>Auto</li>
         <li>Cycle</li>
      </ul>
   </body>
</html>

 

Output

html ulist1

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

 

<!DOCTYPE html>

<html>
<head>
      <title>HTML Unordered List</title>
   </head>
<body>
      <ol>
         <li>Car</li>
         <li>Bus</li>
         <li>Auto</li>
         <li>Cycle</li>
      </ol>
   </body>
</html>

 

Output

orderd list

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.

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.
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Car</li>
         <li>Bus</li>
         <li>Auto</li>
         <li>Cycle</li>
      </ol>
   </body>
	
</html>

Output

orderd list1

HTML Definition Lists

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

 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This is Hyper Text Markup Language</dd>
         <dt><b>CSS</b></dt>
         <dd>This is Cascading Stylesheet
</dd> </dl> </body> </html>

 

Output

html dlist

DOWNLOAD LATEST PROJECTS