HTML: OL, UL, DL Tags

Author: Ronald S. Holland
at
Total Application Works




To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2013 All Rights Reserved Total Application Works


    Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
    <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/HTML/lists.html">
    Lists and their Tags </a>
    </table>
    </body>
    </html>




How to write a HTML Page with OL, UL, and DL Tags

The purpose of this tutorial is to show you how to write a HTML page with OL, UL, and DL tags. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. In the following example, we will show you the code for our page using OL, UL, and DL tags. There are three types of lists. They are:

  1. OL - creates an ordered or numbered list
  2. UL - creates an unordered or bulleted list
  3. DL - creates an definition or glossary list
We will consider these lists in more detail in the following sections.

How to write a HTML Page with OL type= Tags

Consider the following OL tag example

<html>
<body>
<h3>The types of lists are: </h3>
<ol>
<li> An ordered or numbered list using type=A
<ol type=A>
<li><b>OL</b> - creates an ordered or numbered list
<li><b>UL</b> - creates an unordered or bulleted list
<li><b>DL</b> - creates an definition or glossary list

</ol>
<li> An ordered or numbered list using type=a
<ol type=a>
<li><b>OL</b> - creates an ordered or numbered list
<li><b>UL</b> - creates an unordered or bulleted list
<li><b>DL</b> - creates an definition or glossary list

</ol>
<li> An ordered or numbered list using type=I
<ol type=I>
<li><b>OL</b> - creates an ordered or numbered list
<li><b>UL</b> - creates an unordered or bulleted list
<li><b>DL</b> - creates an definition or glossary list

</ol>
</ol>
</body>
</html>
Figure 1: HTML Example of a page with ordered list tag


The example in Figure 1 will be displayed by your browser and look like the following:

The types of lists are:

   1. An ordered or numbered list using type=A
         A. OL - creates an ordered or numbered list
         B. UL - creates an unordered or bulleted list
         C. DL - creates an definition or glossary list 
   2. An ordered or numbered list using type=a
         a. OL - creates an ordered or numbered list
         b. UL - creates an unordered or bulleted list
         c. DL - creates an definition or glossary list 
   3. An ordered or numbered list using type=I
         I. OL - creates an ordered or numbered list
        II. UL - creates an unordered or bulleted list
       III. DL - creates an definition or glossary list 


Figure 2: HTML Example of a page with displayed ordered lists


How to write a HTML Page with UL type= Tags

Consider the following OL tag example

<html>
<body>
<h3>The types of lists are: </h3>
<ol>
<li> An unordered or bulleted list using type=disc
<ul type=disc>
<li><b>OL</b> - creates an ordered or numbered list
<li><b>UL</b> - creates an unordered or bulleted list
<li><b>DL</b> - creates an definition or glossary list

</ul>
<li> An unordered or bulleted list using type=square
<ul type=square>
<li><b>OL</b> - creates an ordered or numbered list
<li><b>UL</b> - creates an unordered or bulleted list
<li><b>DL</b> - creates an definition or glossary list

</ul>
<li> An unordered or bulleted list using type=circle
<ul type=circle>
<li><b>OL</b> - creates an ordered or numbered list
<li><b>UL</b> - creates an unordered or bulleted list
<li><b>DL</b> - creates an definition or glossary list

</ul>
</ol>
</body>
</html>
Figure 3: HTML Example of a page with unordered lists


Figure 3 when displayed in your browser will look like:

The types of lists are:
  1. An unordered or bulleted list using type=disc
    • OL - creates an ordered or numbered list
    • UL - creates an unordered or bulleted list
    • DL - creates an definition or glossary list
  2. An unordered or bulleted list using type=square
    • OL - creates an ordered or numbered list
    • UL - creates an unordered or bulleted list
    • DL - creates an definition or glossary list
  3. An unordered or bulleted list using type=circle
    • OL - creates an ordered or numbered list
    • UL - creates an unordered or bulleted list
    • DL - creates an definition or glossary list
Figure 4: HTML Example of unordered lists displayed in a browser


How to write a HTML Page with DL Tag

Consider the following DL tag example

<html>
<body>
<h3>The types of lists are: </h3>
<dl>
<dt> An unordered or bulleted list using type=disc
<dd>
<ul type=disc>
<li><b>OL</b> - creates an ordered or numbered list
<li><b>UL</b> - creates an unordered or bulleted list
<li><b>DL</b> - creates an definition or glossary list

</ul>
<dt> An unordered or bulleted list using type=square
<dd>
<ul type=square>
<li><b>OL</b> - creates an ordered or numbered list
<li><b>UL</b> - creates an unordered or bulleted list
<li><b>DL</b> - creates an definition or glossary list

</ul>
<dt> An unordered or bulleted list using type=circle
<dd>
<ul type=circle>
<li><b>OL</b> - creates an ordered or numbered list
<li><b>UL</b> - creates an unordered or bulleted list
<li><b>DL</b> - creates an definition or glossary list

</ul>
</dl>
</ol>
</body>
</html>
Figure 5: HTML Example of a page with unordered lists


Figure 5 when displayed in your browser will look like:

The types of lists are:

An unordered or bulleted list using type=disc
  • OL - creates an ordered or numbered list
  • UL - creates an unordered or bulleted list
  • DL - creates an definition or glossary list
An unordered or bulleted list using type=square
  • OL - creates an ordered or numbered list
  • UL - creates an unordered or bulleted list
  • DL - creates an definition or glossary list
An unordered or bulleted list using type=circle
  • OL - creates an ordered or numbered list
  • UL - creates an unordered or bulleted list
  • DL - creates an definition or glossary list
Figure 6: HTML Example of a definition list displayed in a browser




Feel free to copy and paste the code in the above Figures into a source file.










HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

© 2002 - 2013 All Rights Reserved Total Application Works