{"id":6722,"date":"2019-02-24T21:02:05","date_gmt":"2019-02-24T20:02:05","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6722"},"modified":"2019-09-08T14:53:08","modified_gmt":"2019-09-08T12:53:08","slug":"attributs-html-start-reversed-type-element-ol","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/attributs-html-start-reversed-type-element-ol","title":{"rendered":"Le saviez-vous \u2013 Attributs HTML start, reversed et type pour OL"},"content":{"rendered":"<p>Quand vient le temps d&rsquo;\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&rsquo;\u00e9l\u00e9ment OL vous permet de modifier certaines valeurs par d\u00e9faut gr\u00e2ce \u00e0 certains attributs ? Voyons comment faire.<\/p>\n<p><!--more--><\/p>\n<p>C&rsquo;est attributs HTML ont \u00e9t\u00e9 d\u00e9pr\u00e9ci\u00e9s en HTML4 mais ont \u00e9t\u00e9 r\u00e9-introduits avec HTML5.<\/p>\n<h2 id=\"start\">L&rsquo;attribut <code>start<\/code><\/h2>\n<p>L&rsquo;attribut <code>start<\/code> permet de d\u00e9marrer une liste \u00e0 une valeur diff\u00e9rente de 1, la syntaxe est assez simple puisqu&rsquo;il suffit d&rsquo;\u00e9crire un nombre entier dans cet attribut.<\/p>\n<pre class=\"code\"><code class=\"lang-markup\">&lt;ol start=\"3\"&gt;\r\n    &lt;li&gt;Votre item&lt;\/li&gt;\r\n    &lt;!-- \u2026 --&gt;\r\n&lt;\/ol&gt;<\/code><\/pre>\n<p>Le r\u00e9sultat est le suivant :<\/p>\n<ol start=\"3\">\n<li>Item 3<\/li>\n<li>Item 4<\/li>\n<li>Item 5<\/li>\n<\/ol>\n<h2 id=\"reversed\">L&rsquo;attribut <code>reversed<\/code><\/h2>\n<p>L&rsquo;attribut <code>reversed<\/code> vous permet d&rsquo;inverser le compteur. Il n&rsquo;inverse pas l&rsquo;ordre \u00ab\u00a0physique\u00a0\u00bb des articles, juste le comptage.<\/p>\n<pre class=\"code\"><code class=\"lang-markup\">&lt;ol reversed=\"true\"&gt;\r\n    &lt;li&gt;Votre item&lt;\/li&gt;\r\n    &lt;!-- \u2026 --&gt;\r\n&lt;\/ol&gt;<\/code><\/pre>\n<p>Le r\u00e9sultat est le suivant :<\/p>\n<ol reversed=\"true\">\n<li>Julie<\/li>\n<li>Steven<\/li>\n<li>Aur\u00e9lien<\/li>\n<\/ol>\n<h2 id=\"type\">L&rsquo;attribut <code>type<\/code><\/h2>\n<p>L&rsquo;attribut <code>type<\/code> est proche de la propri\u00e9t\u00e9 <code>list-style-type<\/code> dans CSS. Le but de cet attribut est de changer le type de num\u00e9rotation.<\/p>\n<ul>\n<li><code>'a'<\/code> indique des lettres minuscules,<\/li>\n<li><code>'A'<\/code> indique des lettres majuscules,,<\/li>\n<li><code>'i'<\/code> indique des chiffres romains minuscules,<\/li>\n<li><code>'I'<\/code> indique des chiffres romains majuscules,,<\/li>\n<li><code>'1'<\/code> indique des nombres (d\u00e9fault)<\/li>\n<\/ul>\n<pre class=\"code\"><code class=\"lang-markup\">&lt;ol type=\"I\"&gt;\r\n    &lt;li&gt;Votre item&lt;\/li&gt;\r\n    &lt;!-- \u2026 --&gt;\r\n&lt;\/ol&gt;<\/code><\/pre>\n<p>Le r\u00e9sultat est le suivant :<\/p>\n<ol type=\"I\">\n<li>Premier Item<\/li>\n<li>Second Item<\/li>\n<li>Troisi\u00e8me One<\/li>\n<\/ol>\n<p>Je recommande toujours d&rsquo;utiliser la propri\u00e9t\u00e9 CSS au lieu de l&rsquo;attribut HTML pour des raisons de maintenabilit\u00e9.<\/p>\n<p>Plus d&rsquo;informations que l&rsquo;\u00e9l\u00e9ment <code>ol<\/code> et ses attributs sur le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/ol\">MDN<\/a>.<\/p>\n<h2>Les <code>counter<\/code> en CSS<\/h2>\n<p>Vous pouvez \u00e9galement en faire bien d&rsquo;avantage gr\u00e2ce <a href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css\">aux compteurs en CSS<\/a>.<\/p>\n<p>Bonne lecture !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quand vient le temps d&rsquo;\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&rsquo;\u00e9l\u00e9ment OL vous permet de modifier certaines valeurs par d\u00e9faut gr\u00e2ce \u00e0 certains attributs ? Voyons comment faire.<\/p>\n","protected":false},"author":4,"featured_media":6694,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[9],"tags":[526,789,790,788],"coauthors":[597],"class_list":["post-6722","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriels","tag-counter","tag-le-saviez-vous","tag-list-2","tag-ol"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=6722"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6722\/revisions"}],"predecessor-version":[{"id":6904,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6722\/revisions\/6904"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/6694"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=6722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6722"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}