HTML Lists

HTML records: Here, we will find out about the different sorts of the rundowns in the HTML like OL (Ordered Listing), UL (Unordered Listing), and DL (Description Listing).

HTML gives the accommodation to make records on the website page. The rundown could be numbered records or essentially notices.

In HTML records are essential if three sorts, which are as per the following:

  • Requested Lists
  • Unordered Lists
  • Depiction Lists

Right now, will cover every one of the three records as follows,

1) Ordered records

The arranged rundown, as the name determines a request, the rundown things here will be masterminded in a succession of numbers, one after another in order or in roman.

Example of requested posting:

<html>

<body>
    <p>Example of ordered listing</p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>
</body>

</html>

Output:

HTML Lists

type characteristic with <ol> list tag

For making in sequential order or different requests the sort trait is utilized.

The value gives to the sort quality turns into the request for the principal component.

For example type=”A” gives a sequential rundown where the main component request is “An” and “B, etc. Also, for lower case letters we indicate type=”a” and for Romans type=”i”. For capital Romans: “I”.

Example of requested posting with type characteristic:

<html>

<body>
    <p>Example of ordered listing with type attribute</p>

    <p>Ordered list with uppercase alphabets...</p>
    <ol type="A">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

    <p>Ordered list with lowercase alphabets...</p>
    <ol type="a">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

    <p>Ordered list with uppercase roman...</p>
    <ol type="I">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

    <p>Ordered list with lowercase roman...</p>
    <ol type="i">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

</body>

</html>

Output:

HTML Lists

2) Unordered Lists

In an unordered rundown, the rundown is spoken to as a bulleted list, their rundowns are in any request for numbers or letter sets.

Example of unordered posting:

<html>

<body>
    <p>Example of unordered listing</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>
</body>

</html>

Output:

HTML Lists

type quality with <ul> list tag

In an unordered rundown, the announcement could be changed to squares, circles, and man more. For this, we utilize the CSS style trait with the rundown style-type property and here we indicate the image required.

Different images that could be given as:

  • Circle: It gives the plate type announcement to the rundown components
  • Circle: It gives a circle announcement
  • Square: It gives a square announcement
  • None: It gives a rundown with no image

Example of unordered posting with type quality:

<html>

<body>
    <p>Example of unordered listing with type attribute</p>

	<p>Unordered list with type='disc'...</p>
    <ul type="disc">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>

	<p>Unordered list with type='circle'...</p>
    <ul type="circle">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>
	
	<p>Unordered list with type='square'...</p>
    <ul type="square">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>

	<p>Unordered list with type='none'...</p>
    <ul type="none">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>
	
</body>

</html>

Output:

HTML Lists

3) Description Lists

In portrayal records, there are terms recorded and these terms have depictions.

The portrayal records are made by the <dl>, <dt> and <dd> labels.

The <dl> tag characterizes the rundown, the <dt> tag determines the term of the rundown or the name of the rundown component and the <dt> tag indicates the portrayal of each term.

Example:

<html>

<body>
    <p>Example of description lists</p>

      <dl>
         <dt>Programming</dt>
         <dd>C, C++, Java, etc.</dd>
         <dt>Courses</dt>
         <dd>MCA, B.Tech, BCA, etc</dd>
      </dl>
	
</body>

</html>

Output:

HTML Lists

Leave a Comment

error: Alert: Content is protected!!