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>