HTML Lists

HTML Lists

In HTML you can create three different types of lists: unordered (UL), ordered (OL) and definition (DL) lists.
These HTML lists are block-level elements.

Unordered Lists


An unordered list (also called "bulleted list") starts with a <ul> tag and ends with a </ul> tag.
Within the list, each item starts with an <li> tag and ends with an </li> tag.
The list items are marked with bullets. You can set three different types of bullets: disc, circle, and square. They are added with the typeattribute within <ul> tag.
- "disc" is the default bullet type, so you don't need to specify it.

Example:


<html>

<head>




>Document Title</title>



</head



 <titl
e>
<body>

<ul>
 <li>HTML course</li>




/li>



</ul><br />



i

W

 <li>CSS Course</li>
 <li>PHP - MySQL
<th "circle" type:
<ul type="circle">




/li>



 <li>PHP - MySQL



 <li>HTML course</li>
 <li>CSS Course
<</li>
</ul><br />

With "square" type:
<ul type="square">




</li>

</ul>






</bo


dy>



 <li>HTML course</li>
 <li>CSS Course</li>
 <li>PHP - MySQ

L</html>
This code will display:
  • HTML course
  • CSS Course
  • PHP - MySQL

With "circle" type:
  • HTML course
  • CSS Course
  • PHP - MySQL

With "square" type:
  • HTML course
  • CSS Course
  • PHP - MySQL

Ordered Lists


An ordered list (also called "numbered list") is a block element that begins with an <ol> tag and ends with an </ol>.
Within the list, each item starts with an <li> tag and ends with an </li>.
The default type of numbered list uses standard numbers.
You can specify different types of numbering by adding the "type" attribute to the <ol> tag, as described in the following list:

  • type="1"   - style:   1, 2, 3, ...
  • type="i"   - style:   i, ii, iii, iv, ...
  • type="I"   - style:   I, II, III, IV, ...
  • type="a"   - style:   a, b, c, ...
  • type="A"   - style:   A, B, C, ...


- By default, HTML starts each numbered list with 1 or the equivalent in the numbering scheme used (i, I , a , A).
To change the starting number, add the start attribute to the <ol> tag, and specify the appropriate number.
            Ex.:     <ol start="4">

In the next example there are three ordered lists, with different types:


<html>

<head>




>Document Title</title>



</head



<titl
e>
<body>

<ol>




s</li>



 <li>Ajax tutor



<li>HTML lesso
nials</li>
 <li>JavaScript course</li>




">



 <li>HTM



</ol><br />

With "I" type:
<ol type="
IL lessons</li>
 <li>Ajax tutorials</li>


With "a" type and start="3"

<li>JavaScript course</li>
</ol><br />

:
<ol type="a" start="3">




rse</li>

</ol>





</body

<li>HTML lessons</li>
 <li>Ajax tutorials</li>
 <li>JavaScript co
u>


tml>


</
h
This code will display:
  1. HTML lessons
  2. Ajax tutorials
  3. JavaScript course

With "I" type:
  1. HTML lessons
  2. Ajax tutorials
  3. JavaScript course

With "a" type and start="3":
  1. HTML lessons
  2. Ajax tutorials
  3. JavaScript course


• The <li> tag is a block-level element, you can add within it <p>, <div>, <ul>, or other block-level elements.
Example: <li> with paragraph, and nested list:


<html>

<head>




>Document Title</title>



</head



<titl
e>
<body>

<ol>




a paragraph<br />



 A new line in 



<li><p>Here is
 the paragraph.</p></li>
 <li>HTML lessons:




i>



   <li>DIV and SP



<ul type="square">
   <li>Adding images</
lAN</li>
  </ul>
 </li>
 <li>Another list item</li>
</ol>





</body>




</html>
This code will display:

  1. Here is a paragraph
    A new line in the paragraph.
  2. HTML lessons:
    • Adding images
    • DIV and SPAN
  3. Another list item

Definition Lists


A definition list is a list of items, with a description of each item. It begins with a <dl> tag and ends with a </dl>.
The <dl> tag is used in conjunction with <dt> and <dd>.
Within the <dl>, each of the terms defined begins with a <dt> tag and ends with a </dt>.
Within the <dl>, each of the definitions for those terms begins with a <dd> tag and ends with a </dd>.

Example:


<html>

<head>




>Document Title</title>



</head



<titl
e>
<body>

<dl>
 <dt>HTML</dt>




uage</dd>



  <dd> - Language for web page



<dd> - Hyper Text Markup Lan
gs</dd>
 <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>




body>



</html>



<dd>style sheet language used with HTML</dd>
</dl>

<


/
This code will display:
HTML
- Hyper Text Markup Language
- Language for web pages
CSS
Cascading Style Sheets
style sheet language used with HTML

Leave a Reply

Post navigation