ad

Saturday, December 20, 2025

How to create Nested lists in HTML

How to create Nested lists in HTML

This Blog You Will Learn 

ஃ What is a Nested List in HTML

ஃ HTML <ul> tag

ஃ Type  of Bullets

ஃ Syntax of HTML <ul> tag

ஃ Explain Program

ஃ Output

What is a Nested List in HTML

 Nested list is inside another list.

✅Nested list like a main list with subpoints under one or more items.

✅Nested list is relationships  between items and organize content.

✅<ul> tag  bulleted list (unordered list)

✅<ol> tag  Numbered list (ordered list)

✅<li> nested list  inside an<li> of the outer list.

✅Nested list is child of list item.

 HTML <ul> tag

  • HTML <ul> tag use create an unordered list.
  •  list items displayed with bullet points.
  • browser reads the <ul> tag.
  • each <li> is show as bullet point.

 Type  of Bullets

default <ul> use disc-shaped bullets, change this using CSS.

  1) disc(by default) 

 2) circle

 3) square

 4) none

  Syntax of HTML <ul> tag


        <ul>
    <li> Item 1
   
    <ul>
      <li>sub-Item 1</li>
      <li>sub-Item 2</li>
      <li>sub-Item 3</li>
    </ul>
        </li>

       <li>Item 2</li>
       
   </ul>

  • HTML Nested list  means list inside another list.
  •  HTML Nested list  show  information in hierarchical  or sub-category format.
  • HTML Nested list  tag <ul> unordered list or <li>  inside contain list item.

How to create Nested lists in HTML

Example

<!DOCTYPE html>
<html>
  <head>
    <title> HTML nested list </title>
  </head>
  <body>
  <h1>  How to Create Nested lists in HTML </h1>
  <ul>
    <li> Web design
   
    <ul>
      <li>HTML</li>
      <li>CSS
      <li>PHP</li>
      <li>MYSQL</li>
    </UL></LI>

       <li>JAVA</li>
       
</ul>
  </body>
</html>

How to create Nested lists in HTML

Explain Program

Step  1] 

<!DOCTYPE html>

  • This declare the document type.
  • browser that the document is written in html

Step 2 ]

<html>.... . </html>

  • html is the root element of the html page.
  •  Every thing inside it is part of the webpage.

Step 3]

<head>
        <title> HTML nested list </title>
</head>


  •   <head>  section 
  •   head section contains metadata about page. not visible on the page itself.
  •  <title> tag  title section set the title of the page shows the browser tab.

Step 4]

<body>
  <h1>  How to Create Nested lists in HTML </h1>

  • HTML <h1>  heading tag.
  • <h1> displays text  largest heading  webpage.

<ul>
    <li> Web design
   
    <ul>
      <li>HTML</li>
      <li>CSS
      <li>PHP</li>
      <li>MYSQL</li>
    </UL></LI>

       <li>JAVA</li>
       
   </ul>

  </ul>


  <li> Web design
   

  •   HTML <li>  tag  :-  First list item.
  •   <li> tag  inside another <ul> placed.
  •  HTML <ul> tag  :-  create a sub list  under web design

   HTML

  CSS

 PHP

 MYSQL


 
<li>JAVA</li>

  •  HTML <li> tag second  main list  item.

Step 5]



  </body>
</html>

How to create Nested lists in HTML.

Output

How to create Nested lists in HTML






Related Post :-

how to use the address tag in html

how to abbr tag in HTML

how to use anchor tag in html

Labels: , ,