Unordered HTML List

The HTML <ul> tag is used to create an unordered list.

The unordered list items will be marked with bullets like disc, circle and square.

The unordered list items by default start with disc.

Program

<!DOCTYPE html>
<html>
<body>
<h1>An unordered HTML list</h1>
<ul>
  <li>Book</li>
  <li>Pen</li>
  <li>Pencil</li>
</ul>  
</body>
</html>

Try in editor

Unordered HTML list with type="disc"

Program

<!DOCTYPE html>
<html>
<body>
<h1>An unordered HTML list with disc</h1>
<ul type="disc">
  <li>Book</li>
  <li>Pen</li>
  <li>Pencil</li>
</ul>  
</body>
</html>

Try in editor

Unordered HTML list with style="list-style-type:disc;"

Program

<!DOCTYPE html>
<html>
<body>
<h1>An unordered HTML list with disc</h1>
<ul style="list-style-type:disc;" >
  <li>Book</li>
  <li>Pen</li>
  <li>Pencil</li>
</ul>  
</body>
</html>

Try in editor

Unordered HTML list with type="circle"

Program

<!DOCTYPE html>
<html>
<body>
<h1>An unordered HTML list with circle</h1>
<ul type="circle" >
  <li>Book</li>
  <li>Pen</li>
  <li>Pencil</li>
</ul>  
</body>
</html>

Try in editor

Unordered HTML list with style="list-style-type:circle;"

Program

<!DOCTYPE html>
<html>
<body>
<h1>An unordered HTML list with circle</h1>
<ul style="list-style-type:circle;" >
  <li>Book</li>
  <li>Pen</li>
  <li>Pencil</li>
</ul>  
</body>
</html>

Try in editor

Unordered HTML list with type="square"

Program

<!DOCTYPE html>
<html>
<body>
<h1>An unordered HTML list with square </h1>
<ul type="square" >
  <li>Book</li>
  <li>Pen</li>
  <li>Pencil</li>
</ul>  
</body>
</html>

Try in editor

Unordered HTML list with style="list-style-type:square;"

Program

<!DOCTYPE html>
<html>
<body>
<h1>An unordered HTML list with square </h1>
<ul style="list-style-type:square;" >
  <li>Book</li>
  <li>Pen</li>
  <li>Pencil</li>
</ul>  
</body>
</html>

Try in editor

Unordered HTML list with type="none"

Program

<!DOCTYPE html>
<html>
<body>
<h1>An unordered HTML list with none </h1>
<ul type="none" >
  <li>Book</li>
  <li>Pen</li>
  <li>Pencil</li>
</ul>  
</body>
</html>

Try in editor

Unordered HTML list with style="list-style-type:none;"

Program

<!DOCTYPE html>
<html>
<body>
<h1>An unordered HTML list with none </h1>
<ul style="list-style-type:none;" >
  <li>Book</li>
  <li>Pen</li>
  <li>Pencil</li>
</ul>  
</body>
</html>

Try in editor

Nested HTML Lists

Program

<!DOCTYPE html>
<html>
<body>
<h1>An Nested HTML list  </h1>
<ul>
  <li>Book
     <ul>
       <li>Math</li>
      <li>Science</li>
</ul>
</li>
  <li>Pen</li>
  <li>Pencil</li>
</ul>  
</body>
</html>

Try in editor

About Us

Comsysapp.com is an educational website. Students and software developers can learn programming language tutorials. Comsysapp is very useful for beginners and professional developers. Comsysapp provides tutorial in easy language. Comsysapp.com has focus on simplicity.

Services

Comsysapp.com provides free tutorials like c, html, css, etc. All tutorials are free for beginner and professionals.

Terms of Use

comsysapp.com is not responsible for any mistake. We are not responsible if information made available on our website is incomplete or invalid. But comsysapp.com always try for zero-zero mistake.

Privacy policy

comsysapp.com does not collect any data from users. We use Google AdSense advertising on our website. We never ask personal or private information.

Sitemap

sitemap