YouTip LogoYouTip

Att Li Value

## HTML `
  • ` `value` Attribute The `value` attribute of the `
  • ` (list item) element is used to explicitly set the numerical value of a specific list item within an ordered list (`
      `). Subsequent list items will automatically increment from this specified value. --- ## Browser Support The `value` attribute is universally supported across all modern and legacy web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer * Apple Safari * Opera --- ## Definition and Usage The `value` attribute defines the ordinal value of the current list item. When you set this attribute, it overrides the default sequential numbering of the ordered list. Any list items that follow will continue counting upwards from the newly defined number. ### Key Rules: * The value **must** be an integer (positive, negative, or zero). * It is only valid and functional when used inside an ordered list (`
        `). * It has no visual effect when used inside an unordered list (`
          `). --- ## HTML 4.01 vs. HTML5 * **HTML 4.01:** The `value` attribute was deprecated because presentational markup was discouraged in favor of CSS. * **HTML5:** The `value` attribute was **re-introduced and is fully standardized**. It is no longer deprecated because it carries semantic meaning (e.g., representing a specific rank, step number, or score in a list) rather than purely stylistic formatting. --- ## Syntax ```html
        • ``` ### Attribute Values | Value | Description | | :--- | :--- | | *number* | An integer specifying the numeric value for the list item. | --- ## Code Examples ### Example 1: Basic Usage in an Ordered List In this example, the list starts at 1 by default, but we explicitly change the value of the second item to `100`. Notice how the subsequent items automatically increment from `101` onwards. ```html
          1. Coffee
          2. Tea
          3. Milk
          4. Water
          5. Juice
          6. Beer
          ``` #### Rendered Output Preview: 1. Coffee 100. Tea 101. Milk 102. Water 103. Juice 104. Beer --- ### Example 2: Counting Backwards or Using Negative Numbers You can also use negative numbers or create descending sequences by combining the `value` attribute with the `
            ` element's `reversed` attribute. ```html
            1. Ten
            2. Nine
            3. Five
            4. Four
            ``` --- ## Best Practices and Considerations 1. **Semantic Meaning:** Only use the `value` attribute when the specific number of a list item carries semantic importance (for example, step-by-step instructions where steps are skipped, or a top-10 ranking where items share a rank). 2. **Styling vs. Structure:** Do not use the `value` attribute solely for visual styling. If you want to change the numbering style (e.g., Roman numerals or letters), use the CSS `list-style-type` property or the HTML `type` attribute instead.
  • ← Att Link CharsetAtt Li Type β†’