Bulleted list HTML

Nội dung chính Show

Types of HTML Lists
HTML List Tags Examples
Ordered List /Numbered List (ol)
Different list styles in ordered list
Example of different list types in ordered list
Unordered List /Bulleted List (ul)
Different bullets styles in unordered list
Example of different bullets in unordered list
Description List /Definition List (dl)
Interview Questions & Answer
Video liên quan

(ol)- Ordered List
(ul)- Unordered List(Bulleted list)
(dl)- Description List

Ordered List /Numbered List (ol)

The

tag starts the list of items. It is also called as a numbered list because list items are marked with numbers.

Example

January

February

March

April

May

June

July

August

September

October

November

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

type=1 To start the ordered list like 1,2,3 etc.
start=4 It will create an ordered list starting from 4. Example 4, 5, 6 etc
type=a ordered list will start from a in alphabetical order like a, b, c etc
type=A ordered list will start from A in alphabetical order like A, B, C etc
type=I This will create ordered list in Roman alphabet in capitals.
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

<ol type="1"> <li>Mondayli> <li>Tuesdayli> <li>Wednesdayli> ol> <ol type="a"> <li>Januaryli> <li>Februaryli> <li>Marchli> ol> <ol type="A"> <li>Aprilli> <li>Mayli> <li>Juneli> ol> <ol type="I"> <li>Julyli> <li>Augustli> <li>Septemberli> ol> <ol type="i"> <li>Octoberli> <li>Novemberli> <li>Decemberli> ol> <ol start="4"> <li>HTMLli> <li>CSSli> <li>JavaScriptli> ol>

Run the Code

Unordered List /Bulleted List (ul)

In HTML Lists,

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

style="list-style-type:square">

January

February

March

style="list-style-type:circle">

April

May

June

style="list-style-type:disc">

July

August

September

style="list-style-type:none">

October

November

December

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

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

Description List /Definition List (dl)

HTML and XHTML supports 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

Explain list elements in HTML?

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

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

Definition list It displays elements in definition form like in dictionary. The

and

tags are used to define description list.

This tag defines term in description list.

Describes Term description in definition list.

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> <html> <head> <body> <ol> <li>Appleli> <li type="i" >Mangoli> <li>Bananali> ol> body> html>

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

How can you make a bulleted list in HTML?

Here is code to make a bulleted list in HTML.

DOCTYPE html> <html> <head> <body> <ul> <li>Appleli> <li>Mangoli> <li>Bananali> <li>Coconutli> ul> body> html>

Write an HTML code that outputs the following:-

Output

Fruits

1. Apple
2. Mango
3. Banana

Flowers

- Rose
- Lilly
- marigold

DOCTYPE html> <html> <head> <body> <dl> <ol> <dt><b>Fruitsb>dt> <dd><li>Appleli>dd> <dd><li>Mangoli>dt> <dd><li>Bananali><dt> ol> <dl> <ul> <dt><b>Flowersb>dt> <dd><li>Roseli>dd> <dd><li>Lillyli>dd> <dd><li>marigoldli>dd> ul> dl> body> html>

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> <html> <head> <style> 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; } style> head> <body> <ul> <li>Appleli> <li>Mangoli> <li>Bananali> <li>Coconutli> ul> body> html>

Facebook Twitter Google-plus

Top List List

Bulleted list HTML

Types of HTML Lists

HTML List Tags Examples

Ordered List /Numbered List (ol)​

Example

Different list styles in ordered list

Example of different list types in ordered list

Unordered List /Bulleted List (ul)

Example

Different bullets styles in unordered list

Example of different bullets in unordered list

Description List /Definition List (dl)

Example

Interview Questions & Answer

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Ordered List /Numbered List (ol)