Bulleted list HTML

Types of HTML Lists

• [ol]- Ordered List
• [ul]- Unordered List[Bulleted list]
• [dl]- Description List

HTML List Tags Examples

Ordered List /Numbered List [ol]​

The

tag is used to create an ordered list and
1. tag starts the list of items. It is also called as a numbered list because list items are marked with numbers.

Example

1. January
2. February
3. March
4. April
5. May
6. June
7. July
8. August
9. September
10. October
11. November
12. December

Run the Code

Different list styles in ordered list

Apart from the normal list style, there are other styles as well. The default list will always start from 1.

Suppose, you want to create an ordered list which should not start from 1, then you have to exclusively set the particular ordered list type.

The Syntax of different list types:
type=value
where, value can be a number or alphabet

The important ordered list types are

1. type=1 To start the ordered list like 1,2,3 etc.
2. start=4 It will create an ordered list starting from 4. Example 4, 5, 6 etc
3. type=a ordered list will start from a in alphabetical order like a, b, c etc
4. type=A ordered list will start from A in alphabetical order like A, B, C etc
5. type=I This will create ordered list in Roman alphabet in capitals.
6. type=i This will create ordered list in Roman alphabet in small letters.

Note/Warning/Info/Success To start ordered list from 4, the syntax is start:4. Similarly, to start from 6, the syntax will be start:6.

HTML5 does not support the type attribute so it is better to use CSS. × Dismiss alert

Example of different list types in ordered list

Monday Tuesday Wednesday January February March April May June July August September October November December HTML CSS JavaScript

Run the Code

Unordered List /Bulleted List [ul]

In HTML Lists,

tag list starts with unordered list and list item starts with
• tag. It is also called as a bulleted list because list items are marked with bullets.

Example

• January
• February
• March
• April
• May
• June
• July
• August
• September
• October
• November
• December

Run the Code

Follow @tutorial_brain

Different bullets styles in unordered list

Apart from the normal bullet style, there are other styles for unordered list as well like disc, square, circle etc.

Example of different bullets in unordered list

Run the Code

Note/Info:

• The list-style-type:none is mostly used for creating Navigation bars.
• For unordered list, you can use any of the 2 syntaxs like

1. ul style=list-style-type:square> or

Description List /Definition List [dl]

HTML and XHTML supports Description list.
It defines the start of description list.
This tag defines term in description list.
This tag describes Term description in definition list.

Example

AIR All India Radio [Broadcasting] CDMA Code Division Multiple Access DVD Digital Versatile Disk FAO Food and Agriculture Organisation

Run the Code

Interview Questions & Answer

1. Explain list elements in HTML?

Ordered list It displays the elements in numbered format. It is represented by

tag.

Unordered list It displays the elements in bullet format. It is represented by

tag.

Definition list It displays elements in definition form like in dictionary. The , and tags are used to define description list.

It defines the start of description list..

This tag defines term in description list.

Describes Term description in definition list.

1. How do you change the number type in the middle of a list?

The tag includes two attributes type and value. The type attribute can be used to change the numbering type for any list item. The value attribute can change the number index.
For example,

DOCTYPE html> Apple Mango Banana

output:-
1. Apple
ii. Mango
3. Banana

1. How can you make a bulleted list in HTML?

Here is code to make a bulleted list in HTML.

DOCTYPE html> Apple Mango Banana Coconut

1. Write an HTML code that outputs the following:-

Output

Fruits

1. 1. Apple
   2. Mango
   3. Banana

Flowers

• • Rose
  • Lilly
  • marigold

DOCTYPE html> Fruits Apple Mango Banana Flowers Rose Lilly marigold

1. Can we change the color of bullets?

By default, it is not possible to change the color of bullets. But, we can do it with CSS and HTML by using ::before selector.
For Example,

DOCTYPE html> ul { list-style: none; } ul li::before { content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: blue; font-weight: bold; display: inline-block; width: 2em; margin-left: -2em; } Apple Mango Banana Coconut

Facebook Twitter Google-plus