HTML Lists

HTML Lists

Html List

In an HTML web page, you may basically generate two different types of list items. Any HTML web page may display list elements both in organized and unordered order. You may generate both kinds of list items in any HTML webpage by following these steps.

HTML Lists

HTML Ordered List (OL) – An HTML webpage uses an ordered list element. when you wish to show HTML web objects or elements in ascending order, according to a specified sequence.

Html ordered list element example.

<!DOCTYPE html>

<html>

  <head>

    <title>List Tag</title>

    <link rel=”stylesheet” href=”styles.css” />

  </head>

  <body>

      <h1 class=”title”>Html ordered list example! </h1>

      <p id=”currentTime”></p>

      <ol>

  <li>Ordered List Element 1</li>

  <li>Ordered List Element 2</li>

  <li>Ordered List Element 3</li>

  <li>Ordered List Element 4</li>

  <li>Ordered List Element 5</li>

</ol>

  </body>

</html>

Using the list type properties that are already present in your chosen HTML web page, you may change the format of the list numbering style to suit your needs, such as capital, small characters, roman numeral, etc. For instance, on every HTML webpage, you may find the characters “A” for capital letters, “a” for lowercase letters, “i” for uppercase Roman numerals, “i” for lowercase Roman numerals, and so on. You may use this to generate the list object that you require.

Upper case/lower case/roman number list format example in html webpage.

<!DOCTYPE html>

<html>

  <head>

    <title>Multiple List Attributes</title>

    <link rel=”stylesheet” href=”styles.css” />

  </head>

  <body>

      <h1 class=”title”>Html ordered Attributes list example! </h1>

      <p id=”currentTime”></p>

      <h2>Capital Letter List Attributes</h2>

      <ol>

     <ol type=”A”>

  <li>Land Rover</li>

  <li>Range Rover Velar</li>

  <li>Volvo XC60</li>

  <li>Jaguar F-Type</li>

  <li>Bentley Flying Spur</li>

</ol>

 <h2>Small Letter List Attributes</h2>

      <ol>

     <ol type=”a”>

  <li>Kawasaki</li>

  <li>Ducati</li>

  <li>Royal Enfield</li>

  <li>Suzuki</li>

  <li>Bmw</li>

</ol>

<h2>Roman Letter List Attributes</h2>

      <ol>

     <ol type=”i”>

  <li>Airbus</li>

  <li>Boeing 777</li>

  <li>Antonov</li>

  <li>Miraj</li>

  <li>Tejas</li>

</ol>

  </body>

</html>

HTML Unordered List (UL) – An HTML webpage uses the unordered list element tag. The bullet symbol is a popular unordered list object style when you wish to show a list of list items without a specified ascending or descending list order.

Example of unordered list example.

<!DOCTYPE html>

<html>

  <head>

    <title>Unordered List Attributes</title>

  </head>

  <body>

      <h1 class=”title”>Html unordered Attributes list example! </h1>

      <p id=”currentTime”></p>

      <h2>Html Unordered List Attributes</h2>

<ul>

  <li>Maruti Suzuki</li>

  <li>Tata Nexon</li>

  <li>Mahinda Scorpio</li>

  <li>Toyota Fortuner</li>

  <li>Hyundai i20</li>

</ul>

  </body>

</html>

In an HTML web page, you may add lists to lists to build several nested lists objects based on your particular needs.

Here is an example of a list nested within a list.

<!DOCTYPE html>

<html>

  <head>

    <title>Nested List Attributes</title>

  </head>

  <body>

      <h1 class=”title”>Html Nested Attributes list example! </h1>

      <p id=”currentTime”></p>

      <h2>Html Nested List Attributes</h2>

<ol>

  <li>Html Programming </li>

  <li>Html fundamental

    <ul>

      <li>Explore Web Technology</li>

      <li>Css attributes add to html</li>

      <li>Java script real-time attributes</li>

    </ul>

  </li>

  <li>Explore W3.css </li>

  <ul>

      <li>Core concept of w3.css</li>

      <li>How to implement w3.css in html</li>

    </ul>

</ol>

  </body>

</html>

Creating ordered and unordered nested lists.

Any HTML web page that has nested lists has new Lists objects inside of already-existing Lists components. In your current HTML webpage, you can create nested list elements for both ordered lists (OL) and unordered lists (UL).

This is the method for adding a nested list item to your live webpage.

So, let’s learn Ordered List (OL) along with Nested List (UL) in HTML web page.

<!DOCTYPE html>

<html>

  <head>

    <title>Nested List Attributes</title>

  </head>

  <body>

      <h1 class=”title”>Html Ordered Nested Attributes list example! </h1>

      <p id=”currentTime”></p>

      <ol>

  <li>Topic 1</li>

  <ul>

      <li>Topic 1.1</li>

      <li>Topic 1.2</li>

    </ul>

  <li>Topic 2</li>

  <li>Topic 3</li>

    <ul>

      <li>Topic 3.1</li>

      <li>Topic 3.2</li>

    </ul>

  </li>

  <li>Topic 4</li>

  <ul>

      <li>Topic 4.1</li>

    </ul>

</ol>

  </body>

</html>

Html Unordered List (UL) with a Nested List (OL) Example.

<!DOCTYPE html>

<html>

  <head>

    <title>Nested List Attributes</title>

  </head>

  <body>

      <h1 class=”title”>Html Unordered Nested Attributes list example! </h1>

      <p id=”currentTime”></p>

      <ul>

  <li>Python Programming</li>

  <li>What is python

    <ol>

      <li>Python fundamental</li>

      <li>Python history</li>

    </ol>

  </li>

  <li>Data type in python

  <ol>

      <li>Int data type

      <ol>

      <li>short int </li>

      <li>Long int</li>

      <li>Double</li>

    </ol>

      <li>Float data type</li>

    </ol>

  <li>Operator in python</li>

  <ol>

      <li>Assignment operator</li>

      <li>Relational operator</li>

    </ol>

</ul>

</body>

</html>

Html Nested lists.

It is occasionally necessary to have both an unordered (UL) and an ordered (OL) list in a nested list on the same HTML webpage. Thus, you may utilize these lists in accordance with the needs of your web page.

In this HTML web page example, you will see ordered and unordered lists.

<!DOCTYPE html>

<html>

  <head>

    <title>Ol And UL Nested List Attributes</title>

  </head>

  <body>

      <h1 class=”title”>Html Ordered and Unordered Nested list Attributes example! </h1>

      <p id=”currentTime”></p>

<h2>Html Nested Ordered List (OL) Example</h2>

<ol>

  <li>Heading 1</li>

  <li>Heading 2

    <ol>

      <li>Nested Heading 1</li>

      <li>Nested Heading 2

        <ol>

          <li>Sub nested Heading 1</li>

          <li>Sub nested Heading 2</li>

        </ol>

      </li>

      <li>Sub Heading 3</li>

    </ol>

  </li>

  <li>Heading 3</li>

  <li>Heading 4

   <ol>

      <li>Nested Heading 4.1</li>

      <li>Nested Heading 4.2</li>

      </ol>

</ol>

 <h2> Html Nested Unordered List (UL) Example </h2>

<ul>

  <li>Topic 1</li>

  <li>Topic 2

    <ul>

      <li>Nested Element Topic 2.1</li>

      <li>Nested Element Topic 2.2

        <ul>

          <li>Sub-nested Element Topic 2.1</li>

          <li>Sub-nested Element Topic 2.2</li>

        </ul>

      </li>

      <li>Nested Topic 3</li>

    </ul>

  </li>

  <li>Topic 3</li>

  <ul>

      <li>Nested Element Topic 3.1</li>

      <li>Nested Element Topic 3.2

        </ul>

    <li>Topic 4</li>

</ul>

</body>

</html>

Rate this post

2 thoughts on “HTML Lists”

  1. helloI really like your writing so a lot share we keep up a correspondence extra approximately your post on AOL I need an expert in this house to unravel my problem May be that is you Taking a look ahead to see you

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top