Lists In HTML

-

LISTS IN HTML

LISTS:

HTML supports several types of list elements that are included with in the BODY tag of the Document.
These elements may be Nested, one set of  elements may be embedded within another set of elements.


LIST ITEM <LI> TAG:

A List Item tag <LI> is used to define a each item of list. This tag is an empty tag, it has an ON tag  but does not require an OFF tag. Once the Items are defined using the <LI> tag, the list (by DEFAULT) appears as bullets form in the web browser.



<!DOCTYPE html>
<html>
<body>

<h2>An HTML list</h2>


  <li>Coffee
  <li>Tea
  <li>Milk


</body>
</html>



Output:

An HTML list



  • Coffee
  • Tea
  • Milk



    • Different types of lists can be created in an HTML document. They are:

    1. Unordered List
    2. Ordered List
    3.Definition List


    UNORDERED LIST <UL> TAG:

    an unordered list is used for items in which the ordering is not specific. The list items are defined using the <UL> and </UL> tags.

    Each item in the list is defined using the <LI> tag. The bullet style can be added to the list items by
    <UL TYPE = 'CIRCLE'/ 'DISC' / 'SQUARE'>

    Where, circle specifies a hollow bullet
    disc specifies a solid round bullet
    square specifies a square bullet.
    An unordered list is also called bulleted list.  



    <!DOCTYPE html>
    <html>
    <body>

    <h2>An unordered HTML list</h2>

    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>  

    </body>
    </html>


    Output:

    An unordered HTML list

    • Coffee
    • Tea
    • Milk

    Square unordered LIST:

    <!DOCTYPE html>
    <html>
    <body>

    <h2>Unordered List with Square Bullets</h2>

    <ul style="list-style-type:square">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

    </body>
    </html>


    Output:

    An unordered HTML list

    • Coffee
    • Tea
    • Milk


    Circle unordered LIST:


    <!DOCTYPE html>
    <html>
    <body>

    <h2>Unordered List with Circle Bullets</h2>

    <ul style="list-style-type:circle">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>  

    </body>
    </html>

    Output:

    Unordered List with Circle Bullets

    • Coffee
    • Tea
    • Milk


    Disc unordered LIST:



    <!DOCTYPE html>
    <html>
    <body>

    <h2>Unordered List with Disc Bullets</h2>

    <ul style="list-style-type:disc">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>  

    </body>
    </html>

    Output:

    Unordered List with Disc Bullets

    • Coffee
    • Tea
    • Milk

     unordered LIST as NONE:


    <!DOCTYPE html>
    <html>
    <body>

    <h2>Unordered List without Bullets</h2>

    <ul style="list-style-type:none">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>  

    </body>
    </html>



    Unordered List without Bullets

    • Coffee
    • Tea
    • Milk

    Comments

    Post a Comment

    Popular posts from this blog

    Headings In HTML

    -
    Image
    HEADINGS IN HTML <!DOCTYPE html> <html> <body> <h1> Heading 1</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> <h4> Heading 4</h4> <h5> Heading 5</h5> <h6> Heading 6</h6> </body> </html> Output: Paragraph tag in HTML HTML paragraphs are defined with the   <p>   tag. EXAMPLE:  <p> This is a Paragraph </p> <!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> Output: This is a paragraph. This is another paragraph.
    Read more

    Introduction and Format of HTML

    -
    Image
    What is HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page. Format of HTML < !DOCTYPE  html > < html > < head > < title > Page Title < /title > < /head > < body > < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > < /body > < /html > The  <!DOCTYPE html>  declaration defines this document to be HTML5 The  <html>  element is the root element of an HTML page The  <head>  element contains meta information about the document The...
    Read more

    Font Tag

    -
    FONT TAG IN HTML The FONT tag in HTML is used to specify the size, color, and font of text it encloses. The FONT tag is a Container element, it has both an ON tag and OFF tag. <!DOCTYPE html> <html> <body> <p><font size="3" color="red">This is some text!</font></p> <p><font size="2" color="blue">This is some text!</font></p> <p><font face="verdana" color="green">This is some text!</font></p> </body> </html> Output: This is some text! This is some text! This is some text! Note:  The font element is not supported in HTML5. Use CSS instead.
    Read more