HTML Ul Tag - W3Schools

Trang chủ » Html List Style Tick » HTML Ul Tag - W3Schools

Có thể bạn quan tâm

HTML <ul> Tag ❮ Previous Complete HTML Reference Next ❯

Example

An unordered HTML list:

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The <ul> tag defines an unordered (bulleted) list.

Use the <ul> tag together with the <li> tag to create unordered lists.

Tip: Use CSS to style lists.

Tip: For ordered lists, use the <ol> tag.

Browser Support

Element
<ul> Yes Yes Yes Yes Yes

Global Attributes

The <ul> tag also supports the Global Attributes in HTML.

Event Attributes

The <ul> tag also supports the Event Attributes in HTML.

More Examples

Example

Set the different list style types (with CSS):

<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul><ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul><ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul> Try it Yourself »

Example

Expand and reduce line-height in lists (with CSS):

<ul style="line-height:180%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul><ul style="line-height:80%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul> Try it Yourself »

Example

Create a list inside a list (a nested list):

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul> Try it Yourself »

Example

Create a more complex nested list:

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> Try it Yourself »

Related Pages

HTML tutorial: HTML Lists

HTML DOM reference: Ul Object

CSS Tutorial: Styling Lists

Default CSS Settings

Most browsers will display the <ul> element with the following default values:

Example

ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px;} Try it Yourself » ❮ Previous Complete HTML Reference Next ❯ ★ +1 Track your progress - it's free! Log in Sign Up

Từ khóa » Html List Style Tick