Home » Web » HTML, DHTML » Story Details
Printable Version

List tags in HTML 5

by Monika Arora on Sep 20, 2011

List tags are used for specifying ordered , unordered lists, terms and their definitions.
Comments: 0    Views: 154

                                                                              List tags in HTML 5

  • <li>:- We use this tag to indicate that a list will be used in this tag. List will contain list item. Its contents can be value which will be number from where we want to start like 5. Its not mandatory to give number. We can simply write list item.

          Syntax:
         <
li> Item we want to give in list. </li>

           Code:

           <
!DOCTYPE HTML>
         <html>
         <body>
         <ol>
         <li> list  </li>
         <li> item </li>
         </ol>
         </body>
         </html>

        Output:

          li.gif
 

  • <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 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:
       
        <!DOCTYPE HTML>
        <html>
        <body>
        <ol start="5">
        <li> I m list tag </li>
        <li> I m ol tag </li>
        </ol>
        </body>
        </html> 
       
        Output:

          ol.gif

  • <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:

    <!DOCTYPE HTML>
    <html>
    <body>
    <ul>
    <li> I m <b> ul</b> tag
    <li> I m unordered list </li>
    </ul>
    </body>
    </html>

    Output:

    ul.gif


  • <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:

    <!DOCTYPE HTML>
    <html>
    <body>
    <ul>
    <li> I m <b> ul</b> tag
    <li> I m unordered list </li>
    </ul>
    <dl>
    <dt> HTML </dt>
    <dd> Hypertext Markup Language </dd>
    </dl>
    </body>
    </html>

    Output:

    dl.gif
     

  • <dt>:- This tag is used to specify a term that has some identity in real world.

    Syntax:
    <
    dt> Term you want to give </dt>

    Code:

    <!DOCTYPE HTML >
    <html>
    <body>
    <dl>
    <dt> ASP </dt>
    <dd><b>Active Server Pages</b></dd>
    </dl>
    </body>
    </html>

    Output:

     dt.gif

  • <dd>:- This tag is used to show description of some term which have some identity in real world.

    Syntax:
    <
    dd> Description of term </dd>

    Code:

    <!DOCTYPE HTML >
    <html>
    <body>
    <dl>
    <dt> DS</dt>
    <dd> <b> Data Structure </b> </dd>
    </dl>
    </body>
    </html>

    Output:

    ddr.gif

 




 

 



 

 

 

 

 

 

  •           

     
          

 

 

 

 

List tags in HTML 5

  • <li>:- We use this tag to indicate that a list will be used in this tag. List will contain list item. Its contents can be value which will be number from where we want to start like 5. Its not mandatory to give number. We can simply write list item.

          Syntax:
         <
li> Item we want to give in list. </li>

           Code:

           <
!DOCTYPE HTML>
         <html>
         <body>
         <ol>
         <li> list  </li>
         <li> item </li>
         </ol>
         </body>
         </html>

        Output:

 

  • <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 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:
       
        <!DOCTYPE HTML>
        <html>
        <body>
        <ol start="5">
        <li> I m list tag </li>
        <li> I m ol tag </li>
        </ol>
        </body>
        </html> 
       
        Output:

 

  • <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:

    <!DOCTYPE HTML>
    <html>
    <body>
    <ul>
    <li> I m <b> ul</b> tag
    <li> I m unordered list </li>
    </ul>
    </body>
    </html>

    Output:
     
  • <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:

    <!DOCTYPE HTML>
    <html>
    <body>
    <ul>
    <li> I m <b> ul</b> tag
    <li> I m unordered list </li>
    </ul>
    <dl>
    <dt> HTML </dt>
    <dd> Hypertext Markup Language </dd>
    </dl>
    </body>
    </html>

    Output:
     
  • <dt>:- This tag is used to specify a term that has some identity in real world.

    Syntax:
    <
    dt> Term you want to give </dt>

    Code:

    <!DOCTYPE HTML >
    <html>
    <body>
    <dl>
    <dt> ASP</dt>
    <dd><b>Active Server Pages</b></dd>
    </dl>
    </body>
    </html>

    Output:
     
  • <dd>:- This tag is used to show description of some term which have some identity in real world.

    Syntax:
    <
    dd> Desciption of term </dd>

    Code:

    <!DOCTYPE HTML >
    <html>
    <body>
    <dl>
    <dt> DS</dt>
    <dd> <b> Data Structure </b> </dd>
    </dl>
    </body>
    </html>

    Output:

 




 

 



 

 

 

 

 

 

  •           

     
          

 

 

 

 

 

Post a Comment
*
DevExpress PowerBuilder Web Development Windows Development Languages Software Engineering Databases
iPhone Architecture Secutiry UML & Modeling Operating Systems Networking Testing
Graphics Design Project Management Hardware Open Source Games Development Business Intelligence Visual Studio LightSwitch 2011
MonoDevelop Visual Studio 2010 ASP.NET HTML, DHTML XML PHP JavaScript
Silverlight Web Services WCF Windows Forms WPF Windows Services Dynamic Link Libraries
ActiveX COM, DCOM, ATL C# VB.NET C++ F# Java
Pascal SQL Server Oracle DB2 MS-Access Windows Servers Windows
Linux Unix SAP LINQ .NET Framework ADO.NET Reporting
Crystal Reports SQL Server Reporting Services Igenda Reports Active Reports Adobe Fireworks Arrays & Collections Hosting
Future Trends Android Windows Phone Smart Devices Business M&A Investment & Funding
Web Browsers Internet Explorer Firefox Safari Common Entrepreneurs Students
Consulting Wiki Gadgets MobileMe iCloud iOS Social Media
Facebook Twitter LinkedIn Google+ Microsoft Kinect XBox
Wii Playstation DirectX i OS OS X CIO, CTO, CEO Windows 8
Web Design Expression Blend 4 Photoshop CS5 Creative Suite 5.5 Expression Web 4 Expression Studio 4 Creative Suite® 5.5 Design
Creative Suite 5.5 Web Creative Suite 5.5 Production Startups Funding M&A Laptops Smart Phones
Desktops Cameras & Camcorders Netbooks Tablets Virtualization Microsoft Surface WordPress
Software Products Cloud Computing Current Affairs Technology TV TV
Earnings XAML E-Commerce MonoTouch Mono for Android Deals Electronics
Mobile Phone Laptop Tablet Book Computer Press Releases Reviews
Products Books Companies Windows Azure SQL Azure Interviews Mac
Web Browsers Symbian Windows Forms WPF Windows Services HTML 5 Office 365
SharePoint 2010 Exchange Server Adobe Visual Studio 2012 iPad Flex / Flash Games
Windows 9
X
 Login
Please login to submit a new post, reply and edit exiting posts, see user profiles, and access more features. If you are not a registered member, Register here.
User Id / Email:
Password:  
Forgot Password | Forgot UserName