× Introduction HTML Editors Web Components Headings Paragraph Attributes Entities Images Comments Formatting Links File Paths Book Marks Image Links Unordered Lists Ordered Lists Tables Forms Other Form Elements Semantic tags Media Div and Span Examples Projects eBooks





☰







HTML Unordered Lists

In this tutorial you will learn specifying lists of information by Unordered Lists.

HTML Lists:

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain −

  • <ul> − An unordered list. This will list items using plain bullets.
  • <ol> − An ordered list. This will use different schemes of numbers to list your items.
  • <dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Example:   Try It

 
<ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
</ul>

Result:

  • Beetroot
  • Ginger
  • Potato
  • Radish


The CSS list-style-type property is used to define the style of the list item marker. It can have one of the following values: disc/circle/sqare/none.

Example:   Try It

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul><

Result:

  • Coffee
  • Tea
  • Milk


Nested HTML Lists:

Example:   Try It

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
   </ul>
  </li>
  <li>Milk</li>
</ul>

Result:

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk


Practice exercise:

1.Write an html code to display the web page as follows. View


Sri Hari Book Store

Mission

"Sriharibookstore.com is committed to bringing the most convenient, easy and secure shopping experience on the web."

Products

  • 10 Million Books across 20+ Languages
  • Audio Books
  • Gadgets & Accessories
  • Toys
  • Electronics
  • Mobiles & Tablets Accessories
  • Health Care Devices

2.Write an html code to display the web page as follows. View


Sri Ramanuja e-Patashala

New Media and Web Design

Sri Ramanuja Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services .

Courses

  • Arduino Programming
  • Scratch Programming
  • Web Dvelopment
    • HTML
    • CSS
    • Javascript
  • Python Programming