HTML - Lists

Lists:

  • HTML List is used for grouping a set of related items in a list on the webpage.
  • In HTML, we have three different methods of specifying list information.
    • Ordered lists <ol>
    • Unordered lists <ul>
    • Description lists <dl>
Ordered Lists:
  • An ordered list is an auto numbering style defined for list items.
  • If a list item is added or removed, then the default numbering will update automatically.
  • Ordered list starts with <ol> tag and its list item starts with <li> tag.

    <!--Ordered List-->
    <ol>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ol>

  • We can change the default numbering style using the attribute type of <ol> tag.
Type Description
type="1" List items numbered with numbers
type="A" List items numbered with uppercase letters
type="a" List items numbered with lowercase letters
type="I" List items numbered with uppercase roman numbers
type="i" List items numbered with lowercase roman numbers
  • We can also control the ordered list item starting number, by specifying a number using the start attribute of <ol> tag.

    <!--Ordered List-->
    <ol start="10">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ol>

  • The Ordered list can also be nested by defining a list item that contains a new list.

    <!--Ordered List-->
    <ol type="a">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript
            <ol>
                <li>jQuery</li>
                <li>Ajax</li>
                <li>React JS</li>            
            </ol>
</li>
    </ol>

Unordered lists:
  • It represents a collection of items that have no specific order or sequence.
  • The unordered list starts with <ul> tag and its list item starts with <li> tag.
    
    <!--Unordered List-->
    <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>

  • By default, the list items will be marked with bullets. We can also change the default marking style using the attribute type of <ul> tag.
Type Description
type="disc" List item marked with a bullet
type="circle" List item marked with a circle
type="square" List item marked with a square
  • The unordered list can also be nested by defining a list item that contains a new list.
    
    <!--Unordered List-->
    <ul type="square">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript
            <ul type="circle">
                <li>jQuery</li>
                <li>Ajax</li>
                <li>React JS</li>            
            </ul>
        </li>
    </ul>


Description Lists:
  • A description list is a list of terms with a description for each term.
Tag Description
<dl> Defines a description list
<dt> Defines a term in the description list
<dd> Describes the term in the description list

    
<!--Description Lists-->
    <dl>
        <dt>HTML</dt>
        <dd>Hyper Text Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
        <dt>JS</dt>
        <dd>JavaScript</dd>
    </dl>

No comments:

Post a Comment