{"id":6687,"date":"2019-02-17T18:44:23","date_gmt":"2019-02-17T17:44:23","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6687"},"modified":"2019-09-08T14:50:10","modified_gmt":"2019-09-08T12:50:10","slug":"html-start-reversed-type-attribute-ol-list-element","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/tutorials\/html-start-reversed-type-attribute-ol-list-element","title":{"rendered":"Did You Know \u2013 HTML start, reversed and type attributes for OL element"},"content":{"rendered":"

When it comes the time to write rich copyrighting, you would love to know more about HTML5 attributes and rules to write accessible and efficient contents. Did you know that Ordered List<\/strong> (ol<\/code> element) allows you to tweak some default values thanks to HTML attributes? Let’s find out how.<\/p>\n

<\/p>\n

All those attributes has been deprecated in HTML4 but reintroduced in HTML5.<\/p>\n

The start<\/code> attribute<\/h2>\n

The start<\/code> attribute allows you to start a list at a different value than 1. The syntax is quite simple since you only need to write an integer value in this attribute.<\/p>\n

<ol start=\"3\">\r\n    <li>Your item<\/li>\r\n    <!-- \u2026 -->\r\n<\/ol><\/code><\/pre>\n
The result is the following:<\/p>\n
    \n
  1. Item 3<\/li>\n
  2. Item 4<\/li>\n
  3. Item 5<\/li>\n<\/ol>\n
    The reversed<\/code> attribute<\/h2>\n
    The reversed<\/code> attribute allows you to reverse the counter. It doesn’t reverse the “physical” order of the items, just the counting.<\/p>\n
    <ol reversed=\"true\">\r\n    <li>Your item<\/li>\r\n    <!-- \u2026 -->\r\n<\/ol><\/code><\/pre>\n
    The result is the following:<\/p>\n
      \n
    1. Julie<\/li>\n
    2. Steven<\/li>\n
    3. Aur\u00e9lien<\/li>\n<\/ol>\n
      The type<\/code> attribute<\/h2>\n
      The type<\/code> attribute is close to the list-style-type<\/code><\/a> property in CSS. The goal of this attribute is to change the numbering type.<\/p>\n