Quand vient le temps d’\u00e9crire des contenus riches, vous appr\u00e9cierez en savoir plus sur les attributs HTML5 et les r\u00e8gles pour \u00e9crire des contenus accessibles et efficaces. Saviez-vous que l’\u00e9l\u00e9ment OL vous permet de modifier certaines valeurs par d\u00e9faut gr\u00e2ce \u00e0 certains attributs ? Voyons comment faire.<\/p>\n
<\/p>\n
C’est attributs HTML ont \u00e9t\u00e9 d\u00e9pr\u00e9ci\u00e9s en HTML4 mais ont \u00e9t\u00e9 r\u00e9-introduits avec HTML5.<\/p>\n
start<\/code><\/h2>\nL’attribut start<\/code> permet de d\u00e9marrer une liste \u00e0 une valeur diff\u00e9rente de 1, la syntaxe est assez simple puisqu’il suffit d’\u00e9crire un nombre entier dans cet attribut.<\/p>\n<ol start=\"3\">\r\n <li>Votre item<\/li>\r\n <!-- \u2026 -->\r\n<\/ol><\/code><\/pre>\nLe r\u00e9sultat est le suivant :<\/p>\n
\n- Item 3<\/li>\n
- Item 4<\/li>\n
- Item 5<\/li>\n<\/ol>\n
L’attribut reversed<\/code><\/h2>\nL’attribut reversed<\/code> vous permet d’inverser le compteur. Il n’inverse pas l’ordre \u00ab\u00a0physique\u00a0\u00bb des articles, juste le comptage.<\/p>\n<ol reversed=\"true\">\r\n <li>Votre item<\/li>\r\n <!-- \u2026 -->\r\n<\/ol><\/code><\/pre>\nLe r\u00e9sultat est le suivant :<\/p>\n
\n- Julie<\/li>\n
- Steven<\/li>\n
- Aur\u00e9lien<\/li>\n<\/ol>\n
L’attribut type<\/code><\/h2>\nL’attribut type<\/code> est proche de la propri\u00e9t\u00e9 list-style-type<\/code> dans CSS. Le but de cet attribut est de changer le type de num\u00e9rotation.<\/p>\n\n'a'<\/code> indique des lettres minuscules,<\/li>\n'A'<\/code> indique des lettres majuscules,,<\/li>\n'i'<\/code> indique des chiffres romains minuscules,<\/li>\n'I'<\/code> indique des chiffres romains majuscules,,<\/li>\n'1'<\/code> indique des nombres (d\u00e9fault)<\/li>\n<\/ul>\n<ol type=\"I\">\r\n <li>Votre item<\/li>\r\n <!-- \u2026 -->\r\n<\/ol><\/code><\/pre>\nLe r\u00e9sultat est le suivant :<\/p>\n
\n- Premier Item<\/li>\n
- Second Item<\/li>\n
- Troisi\u00e8me One<\/li>\n<\/ol>\n
Je recommande toujours d’utiliser la propri\u00e9t\u00e9 CSS au lieu de l’attribut HTML pour des raisons de maintenabilit\u00e9.<\/p>\n
Plus d’informations que l’\u00e9l\u00e9ment ol<\/code> et ses attributs sur le MDN<\/a>.<\/p>\nLes counter<\/code> en CSS<\/h2>\n