Att Li Type
π
2026-06-14 | π HTML
# HTML <li> `type` Attribute
The `type` attribute of the `
` (list item) tag specifies the type of bullet point or numbering style used for that specific list item.
---
## Introduction
In HTML, the `` element is used to define items inside both ordered lists (``) and unordered lists (``). The `type` attribute allows you to change the marker style of an individual list item dynamically, overriding the default style of the parent list.
> β οΈ **Deprecation Notice:** The `type` attribute for the `- ` element is **deprecated** in HTML 4.01 and is **not supported** in HTML5. Modern web development standards require using the CSS `list-style-type` property instead.
---
## Syntax
```html
-
```
---
## Attribute Values
The available values for the `type` attribute depend on whether the list item is nested inside an ordered list (`
`) or an unordered list (``).
### For Ordered Lists (``)
| Value | Description | Example Output |
| :--- | :--- | :--- |
| `1` | Default. Decimal numbers | 1, 2, 3, 4 |
| `a` | Lowercase alphabet letters | a, b, c, d |
| `A` | Uppercase alphabet letters | A, B, C, D |
| `i` | Lowercase Roman numerals | i, ii, iii, iv |
| `I` | Uppercase Roman numerals | I, II, III, IV |
### For Unordered Lists (``)
| Value | Description | Example Output |
| :--- | :--- | :--- |
| `disc` | Default. A filled circle | β |
| `circle` | An unfilled circle | β |
| `square` | A filled square | β |
---
## Code Examples
### HTML Implementation (Legacy)
The following example demonstrates how the `type` attribute can be applied directly to `- ` elements within both ordered and unordered lists.
```html
- Coffee (Default: Numbered)
- Tea (Lowercase Alphabet)
- Milk (Continues sequence)
- Coffee (Default: Disc)
- Tea (Square Bullet)
- Milk (Default: Disc)
```
---
## Modern Best Practice: Using CSS
Because the HTML `type` attribute is deprecated, you should use the CSS `list-style-type` property to style list markers. This keeps your markup clean and separates presentation from structure.
### CSS Inline Example
```html
- This item uses a square bullet via inline CSS
- This item uses a circle bullet via inline CSS
```
### CSS Stylesheet Example (Recommended)
Using an external stylesheet or a `
- Square Bullet Item
- Standard Bullet Item
- Roman Numeral Item
- Standard Numbered Item
```
---
## Browser Support
All major desktop and mobile browsers support the `type` attribute on ` - ` elements for backwards compatibility. However, to ensure future-proof and standards-compliant code, always prefer CSS `list-style-type`.