li value attribute
The value attribute on the li element:
- allows you to set the ordinal value of the item in an ordered list
- value is a specific attribute → can be applied ONLY on the next HTML5 elements: button, data, input, li, meter, option, param, progress
Warning: value attribute can be added only on li elements children of an ol element.
Examples
| <li | attribute | = | "value(s)" | > | ... | <⁄li> | example |
|---|---|---|---|---|---|---|---|
| 1. | value | = | integer | < value="4"> |
Video demonstration li value attribute
HTML5 value attribute on li element tutorial
| min | video details |
|---|---|
| 00:09 | video tutorial: value attribute applied on li element objective: understanding the value attribute and its values |
| 00:19 | value attribute cannot be applied on an li element: - child of an ul element, OR - child of a menu element |
| 00:36 | value attribute can be applied only on an li element: - child of an oi element |
| 00:41 | Example 1 |
| 00:41 | removing player A from the list; player A has the rank 1 |
| 00:45 | once removed player A, player B has now rank 1 instead of 2 |
| 00:51 | we can change the ordinal value of the player B by: 1. either using start attribute on ol element 2. either using value attribute straight on li element |
| 01:21 | Example 2 |
| 01:21 | let's add player D in replace of C, whose rank is 4 and not 3 |
| 01:27 | to change the ordinal value of the 2nd item of the list (= player D), we will use again the value attribute |
| 01:37 | value attribute allows you to set the ordinal value of an item (li) inside an ordered list (ol) ONLY |