Post
Ask Question

List tags in HTML 5

List tags in HTML 5

1. <li>:- We use this tag to indicate that a list will be used in this tag. The list will contain a list item. Its contents can be the value which will be number from where we want to start like 5. It is not mandatory to give number. We can simply write a list item.
  
Syntax:
 
<li> Item we want to give in list. </li>

Code:           
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <ol>  
  5.             <li> list  </li>  
  6.             <li> item </li>  
  7.         </ol>  
  8.     </body>  
  9. </html>  
Output:
 
li.gif

2. <ol>:- We use this tag to indicate that we are going to start an ordered list.
  
Attributes:
 
a) start:- We can use start attribute with the tag to specify the
number from where list items will be started.
 
b) reversed: -We can use this attribute to specify the descending  
number from where the list will be started and then continue.
 
Syntax:
 
<ol start ="Number from where you want to start your list items">
<li> Item we want to give in list. </li>
</ol>
       
Code:             
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <ol start="5">  
  5.             <li> I m list tag </li>  
  6.             <li> I m ol tag </li>  
  7.         </ol>  
  8.     </body>  
  9. </html>          
Output:
 
ol.gif
 
3. <ul>:-We can use this attribute to Show a list without any order. So in this tag, we use bulleted lists which has no number.
 
Syntax:
 
<ul>
<li> List item you want to display </li>
</ul>
 
Code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <ul>  
  5.             <li> I m   
  6.                 <b> ul</b> tag  
  7.                 <li> I m unordered list </li>  
  8.             </ul>  
  9.         </body>  
  10.     </html>  
Output:
 
ul.gif

4. <dl>:- We use this tag to show a term and its description with tags <dt> and <dd>.
 
Syntax:
 
<dl>
<dt> Term you want to use </dt>
<dd> Description </dd>
 
Code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <ul>  
  5.             <li> I m   
  6.                 <b> ul</b> tag  
  7.                 <li> I m unordered list </li>  
  8.             </ul>  
  9.             <dl>  
  10.                 <dt> HTML </dt>  
  11.                 <dd> Hypertext Markup Language </dd>  
  12.             </dl>  
  13.         </body>  
  14.     </html>  
Output:
 
dl.gif
 
5. <dt>:- This tag is used to specify a term that has some identity in the real world.
 
Syntax:
 
 <dt> Term you want to give </dt>
 
Code:
  1. <!DOCTYPE HTML >  
  2. <html>  
  3.     <body>  
  4.         <dl>  
  5.             <dt> ASP</dt>  
  6.             <dd>  
  7.                 <b>Active Server Pages</b>  
  8.             </dd>  
  9.         </dl>  
  10.     </body>  
  11. </html>  
Output:
 
dt.gif
 
6. <dd>:- This tag is used to show description of some term that has some identity in the real world.
 
Syntax:
 
 <dd> Description of term </dd>
 
Code:
  1. <!DOCTYPE HTML >  
  2. <html>  
  3.     <body>  
  4.         <dl>  
  5.             <dt> DS</dt>  
  6.             <dd>  
  7.                 <b> Data Structure </b>  
  8.             </dd>  
  9.         </dl>  
  10.     </body>  
  11. </html>  
Output:
 
ddr.gif