HTML Lists

  • The list is the way to present the data in vertical form.
  • List are different types are present in HTML.

HTML Unordered List

  • The <li> is used to start the plain bullets.

    Note: The tag is used to separate each list item

HTML Unordered Lists type Attribute

  • The type attribute for <ul> tag to specify the type of bullet you like.
  • By default, it is a disc.

<ul type=”square”>

<ul type=”disc”>

<ul type=”circle”>

Example of HTML HTML Unordered Lists
<html>
<head>
<tittle></tittle>
</head>
<body>
<p>HTML Unordered list</p>
<ul>
<li>New delhi</li>
<li>chandigarh</li>
<li>delhi</li>
<li>uttarpradesh</li>
<li>lucknow</li></ul>
</body>
</html>

Output

HTML Unordered list

  • New delhi
  • chandigarh
  • delhi
  • uttarpradesh
  • lucknow

HTML Ordered List

  • The <ol> is used to start different schemes of numbers to list.

HTML ordered Lists type Attribute

  • The type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number.

    <ol type=”1″> – Default-Case Numerals.
    <ol type=”I”> – Upper-Case Numerals.
    <ol type=”i”> – Lower-Case Numerals.
    <ol type=”a”> – Lower-Case Letters.
    <ol type=”A”> – Upper-Case Letters.

Example of HTML ordered Lists
<html>
<head>
<tittle></tittle>
</head>
<body>
<p>HTML Ordered list</p>
<ol>
<li>New delhi</li>
<li>chandigarh</li>
<li>delhi</li>
<li>uttarpradesh</li>
<li>lucknow</li></ol>
</body>
</html>

Output

HTML Ordered list

  1. New delhi
  2. chandigarh
  3. delhi
  4. uttarpradesh
  5. lucknow

Ordered Lists start Attribute

  • The start attribute for <ol> tag is used for the starting point of numbering you need.

<ol type=”1″ start=”4″> – Numerals starts with 4.
<ol type=”I” start=”4″> – Numerals starts with IV
<ol type=”i” start=”4″> – Numerals starts with iv.
<ol type=”a” start=”4″> – Letters starts with d.
<ol type=”A” start=”4″> – Letters starts with D.

    Example of start attribute
    <!DOCTYPE html>
    <html>
    <body>
    <ol type="i" start="5">
    <li>Cell</li>
    <li>Cell</li>
    <li>Cell</li>
    <li>Cell</li>
    </ol>
    </body>
    </html>

    Output

    1. Cell
    2. Cell
    3. Cell
    4. Cell

    A definition list.

    The definition list arranges your items in the same way as they are arranged in a dictionary.

    The HTML Definition List is use three different tags.

    • <dl> Defines the start of the list.
    • <dt> – A term.
    • <dd> – Term definition.
    • </dl> – Defines the end of the list.
    Example of definition list
    <!DOCTYPE html>
    <html>
    <body>
    <dl>
    <dt>HTML</dt>
    <dd>is a markup language.</dd>
    <dt>Java</dt>
    <dd>is a programming language .</dd>
    <dt>JavaScript</dt>
    <dd>is a scripting language.</dd>
    </dl>
    </body>
    </html>

    Output

    HTML
    is a markup language.
    Java
    is a programming language .
    JavaScript
    is a scripting language.
    What is HTML
    • HTML is the standard  for Hypertext Markup Language for Web pages.
    • The HTML elements tell the browser ...
      Click Here
    Previous topic next topic What is an Element in HTML
    • An Hypertext Markup Language(HTML) element ...
      Click Here
    Previous topic next topic HTML Headings
    • The HTML headings are used to define the heading ...
      Click Here
    Previous topic next topic HTML Formatting Elements
    • The <b>  element is use for bold text, without ...
      Click Here
    Previous topic next topic HTML Comments
    • The HTML Comment are describe the extra feature about ...
      Click Here
    Previous topic next topic HTML Attributes
    • Every HTML element can have attributes.
    • The HTML Attribute ...
      Click Here
    Previous topic next topic HTML Images
    • The <img> tag is empty
    Note: The empty ...
    Click Here
    Previous topic next topic HTML Links
    • HTML links are hyperlinks.
    • HTML link default color is ...
      Click Here
    Previous topic next topic HTML Table
    • An HTML table is defined with the <table> tag.
    • ...
      Click Here
    Previous topic next topic Table Backgrounds You can set the table background using one of the ...
    Click Here
    Previous topic next topic Table Header, tbody and Footer
    • Tables are categories into three parts: ...
      Click Here
    Previous topic next topic Basic to Advance table design in HTML Example 1 <!DOCTYPE> <html> <body> ...
    Click Here
    Previous topic next topic HTML div tag
    • The <div>  element is used for style blocks ...
      Click Here
    Previous topic next topic HTML Lists
    • The list is the way to present the data ...
      Click Here
    Previous topic next topic HTML Form
    • The HTML <form> element is used to collect user ...
      Click Here
    Previous topic next topic HTML Iframe Tag
    • <iframe> an inline frame with an HTML tag ...
      Click Here
    English Hindi