HTML List, Types of list

0
289
html list

HTML List

HTML List is the preferred way to display items one after the other, instead of just using <br> tags. Lists are easy to create, with a tag to start and end the list itself, and a tag to start an end each item in the list.

There are three types of lists.

  1. Unordered List
  2. Ordered List
  3. Description Lists.

Unordered Lists

An unordered list <ul> signifies to a web browser that all list items contained inside the </ul> tag should be rendered with a bullet preceding the text.

<!DOCTYPE html> 
<html> 
 <head>
  <title>Unordered List Example</title>
 </head>
 <body> 
   <p>Shopping List</p>
   <ul> 
     <li>HTML</li> 
     <li>CSS</li> 
     <li>JavaScript</li> 
     <li>PHP</li> 
   </ul>
 </body> 
</html>

Unordered Type

The default bullet type for most web browsers is a full disc (black circle), but this can be adjusted using an HTML attribute called type.

Type=”value” Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
<ul type="square">
   -----
</ul>

Ordered List

An ordered list is defined using the <ol> tag, and list items placed inside of an ordered list are preceded with numbers instead of bullets.

<ol>
 <li>HTML</li> 
 <li>CSS</li> 
 <li>JavaScript</li> 
 <li>PHP</li>
</ol>

Ordered Type

type=”value” Description
type=”1″ The list items will be numbered with numbers (default)
type=”A” The list items will be numbered with uppercase letters
type=”a” The list items will be numbered with lowercase letters
type=”I” The list items will be numbered with upper case roman numbers
type=” i” The list items will be numbered with lowercase roman numbers
<ol type="a">

Description Lists

Description List is used to defining and describing terms, much like a dictionary. Typically an entry in the list consists of a term and a definition of that term. A browser will usually bold the term, and indent the definition.

<dl>
 <dt>Term 1</dt>
 <dd>Definition of term 1</dd>
 <dt>Term 2</dt>
 <dd>Definition of term 2</dd> 
</dl>

 

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here