HTML Lists

HTML Lists

2 Comments / Html, Programming / By / Creating ordered and unordered nested lists, Here is an example of a list nested within a list, Html List, HTML Lists, Html Nested lists, HTML Ordered List (OL), Html ordered list element example, HTML Unordered List (UL), Html Unordered List (UL) with a Nested List (OL) Example, Upper case/lower case/roman number list format example in html webpage

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

Related posts

HTML Lists in HindiHTML Lists in Hindi htmlLearn Html HTML ElementsHTML Elements HTML Semantic ElementsHTML Semantic Elements HTML Document StructureHTML Document Structure html5Learn Html5 HTML Elements In HindiHTML Elements In Hindi HTML Document Structure In HindiHTML Document Structure In Hindi HTML Semantic Elements In HindiHTML Semantic Elements In Hindi bootstrap cssWhat Is Bootstrap Css xmlAbout Xml Images and MultimediaImages and Multimedia in HTML Text Formatting.Html Text Formatting Microsoft office 2016About Microsoft office 2016 Forms and Input ElementsHtml Forms and Input Elements Images and Multimedia In HindiImages and Multimedia HTML in Hindi javascript programmingLearn Java Script Programming HTML TablesHTML Tables About Microsoft Office 2013 Pro Plus. Html Text Formatting In HindiHtml Text Formatting In Hindi बहुपद कक्षा 10 (Polynomial Class 10th) Polynomials Class 10th What is CssAbout Css(cascading style sheet). Introduction to HTML.Introduction to HTML Links and Anchor TagsHTML Links and Anchor Tags Html FramesHtml Frames Everything About Microsoft Windows 10. jsonAbout Json json javascript object notation About Microsoft Office 2013 Pro Plus Hindi. Forms and Input Elements In hindiHtml Forms and Input Elements in Hindi mongodbAbout MongoDb Database About Libre office. view.jsAbout Vue.js microsoft office 2016About Microsoft office 2016 Hindi Trigonometry Class 10th tailwind cssWhat Is Tailwind Css Links and Anchor Tags In HindiLinks and Anchor Tags In Hindi Windows 10 apps DescriptionMicrosoft Windows 10 Operating System Apps. त्रिकोणमिति कक्षा 10 (The Trigonometry Class 10th) bulma cssWhat Is Bulma Css learn c programmingLearn C Programming python numpyAbout Python Numpy HTML Tables In hindiHTML Tables In Hindi pandasAbout Pandas reactjsAbout ReactJs Framework tableauAbout Python Tableau scipy python libraryAbout Scipy Python Library mysqlAbout mysql Css full formAbout Css In Hindi. Everything About Microsoft Windows 10.Everything About Microsoft Windows 10 Hindi. About Raspberry pi board postgresqlAbout Postgresql Coordinate Geometry (Analytical Geometry) Class 10th निर्देशांक ज्यामिति कक्षा 10 (The Coordinate Geometry Class 10th) Apache open officeApache Open Office. Windows 8.1 appsMicrosoft Windows 8 Apps. arduinoAbout Arduino Microcontroller Board Html Frames in hindiHtml Frames in Hindi Libre office 5About Libre office In Hindi. समान्तर श्रेढ़ी कक्षा 10 (Arithmetic Progressions Class 10th) Sets Class 11th search engineWhat Is A Search Engine and Their Type? javaLearn Java Programming scala programmingAbout Scala Programming Probability Class 10th Windows legacy osMicrosoft Windows Legacy Operating system. asp.netAbout Asp.net plsqlAbout Pl/Sql समुच्चय कक्षा 11 (The Sets Class 11th) Arithmetic Progression Class 10th nodejsWhat is Nodejs Windows 7About Microsoft Windows 7. kotlinAbout Kotlin Programming expressjsWhat Is Express.js c# programmingAbout C# Programming Introduction to Euclid’s Geometry Class 9th Quadratic Equation Class 10th द्विघात समीकरण कक्षा 10 (Quadratic Equations Class 10th) type of programmingType of Computer Programming in Hindi. magentoAbout Magento Programming What is linuxLinux, What is Linux, A Complete Overview of Ubuntu Linux. jqueryWhat Is Jquery/javascript query programingType of Computer Programming. Windows 7 hindiAbout Microsoft Windows 7 Hindi. यूक्लिड की ज्यामिति का परिचय कक्षा 9 (Introduction to Euclid’s Geometry Class 9th) objective cAbout Objective C Programming Coordinate Geometry Class 9th निर्देशांक ज्यामिति कक्षा 9 (The Coordinate Geometry Class 9th) Perimeter and Area Class 6th परिमाप और क्षेत्रफल कक्षा 6 (Perimeter and Area for Class 6th) Operations on Real Numbers Class 9th वास्तविक संख्याओं पर संक्रियाएँ कक्षा 9वीं (Operations on Real Numbers Class 9th) Triangle and its Properties Class 10th त्रिभुज और इसके गुण कक्षा 10 (The Triangle and its Properties Class 10th) Heron’s Formula Class 9th हीरोन का सूत्र कक्षा 9 (Heron’s Formula Class 9th) Geometrical (Graphical) Meaning of the Zeroes of a Polynomial Class 10th बहुपद के शून्यकों का ज्यामितीय (आलेखीय) अर्थ कक्षा 10 [Geometrical (Graphical) Meaning of the Zeroes of the Polynomial Class 10th] Windows operating systemMicrosoft Windows Legacy Operating System Hindi. Windows 10 Apps HindiMicrosoft Windows 10 Apps Hindi. angularjsWhat is Angular Js sql dbmsAbout Sql – Structure Query Language go languageAbout Go Programming Language About Microsoft office 365. Sum of First n Terms of an Arithmetic Progression Class 10th समान्तर श्रेढ़ी के पहले n पदों का योग कक्षा 10 (Sum of n Terms of Arithmetic Progression Class 10th) typescript languageAbout Typescript Language perl programmingAbout Perl Programming joomlaAbout Joomla Cms Windows 8 AppsMicrosoft Windows 8 Apps Hindi. assembly languageAbout Assembly Programming Google search engineWhat Is A Search Engine and Their Type In Hindi? Computer hardwarePc assembly and its operation Hindi. An In-Depth Review of imagestotext.io in 2023 LinuxWhat is Linux, A Complete Overview of Ubuntu Linux Hindi. How to Write an Informative College Essay? Relations and Functions Class 12th Variance in Statistics: Definition, Formulas, Properties, and Examples nth Term (General Term) of an Arithmetic Progression Class 10th Section Formula Class 10th समान्तर श्रेढ़ी का n वाँ पद (व्यापक पद) कक्षा 10 (nth Term of Arithmetic Progression Class 10th) विभाजन सूत्र कक्षा 10 (The Section Formula Class 10th) Tangent and Secant of Circle Class 10th वृत्त की स्पर्श रेखा और छेदक रेखा कक्षा 10 (Tangent and Secant of Circles Class 10th) Decimal Numbers Class 7th दशमलव संख्याएँ कक्षा 7 (Decimal Number Class 7th) delphi programmingAbout Delphi Programming Apache open office hindiApache Open Office Hindi. InternetWhat Is The Internet? dart programmingAbout Dart Programming Computer Hardware hindiPc assembly and its operation. microsoft sql serverMicrosoft Sql Server First Program In C Language.First Program In C Language. First Program In C Language. in hindiFirst Program In C Language In Hindi. Linear Equations in Two Variables Class 9th दो चरों वाले रैखिक समीकरण कक्षा 9 (Linear Equations of two Variables Class 9th) Real Numbers Class 8th वास्तविक संख्याएँ कक्षा 8 (Real Number Class 8th) बहुपदों पर संक्रियाएँ कक्षा 10 (Operation on Polynomial Class 10th) Integers Class 6th पूर्णांक संख्याएँ कक्षा 6 (Integer Class 6th) Whole Numbers Class 6th पूर्ण संख्याएँ कक्षा 6 (Whole Number Class 6th) Distance Between Two Points in Cartesian Plane and Distance Formula Class 10th कार्तीय समतल में दो बिन्दुओं के बीच की दूरी और दूरी सूत्र कक्षा 10 (The Distance Formula Class 10th) Angle Subtended by a Chord of Circle Class 10th Operations on Polynomials Class 10th Pair of Linear Equations in Two Variables Class 10th दो चर वाले रैखिक समीकरण युग्म कक्षा 10 (Pair of Linear Equations in Two Variables Class 10th) Polynomials Class 9th

Similar Posts

2 thoughts on “HTML Lists”

  2. flooring

    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

    Reply

Leave a Comment

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

Scroll to Top