davidbgk
/
larlet-fr-david-cache
ウォッチ 1
スター 0
フォーク 0
コード リリース 0 アクティビティ
A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
231 コミット
1 ブランチ
ツリー: a6a91a4afc
ブランチ タグ
${ item.name }
ブランチ ${ searchTerm } を作成
'a6a91a4afc' から
${ noResults }
larlet-fr-david-cache/cache/4b7804d8fe930d95854f25ff01f.../index.html

index.html 29KB
Raw Blame 履歴

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>HTML5 : Éléments &lt;figure&gt; et &lt;figcaption&gt; (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   HTML5 : Éléments &lt;figure&gt; et &lt;figcaption&gt; (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html">Source originale du contenu</a></h3>

  463.     <p>L'élément <code class="html">&lt;figure&gt;</code> ne devrait pas vous être inconnu puisque son rôle est pareil à celui qu'il joue dans les supports papiers tels que les livres ou magazines afin d'illustrer et de légender des photos, des diagrammes, ou encore des schémas.</p>

  464. 

  465. <h3>

  466.     Illustration légendée</h3>

  467. 

  468. <p>

  469.     Inaugurés avec HTML5, les éléments <code class="html">&lt;figure&gt;</code> et <code class="html">&lt;figcaption&gt;</code> fonctionnent de concert pour associer une légende à une illustration ou un autre élément média.</p>

  470. 

  471. <pre class="code">

  472. <code class="html"><strong>&lt;figure&gt;</strong>

  473.   &lt;img src="image.jpg" alt="" /&gt;

  474.   <strong>&lt;figcaption&gt;</strong>Légende associée<strong>&lt;/figcaption&gt;</strong>

  475. <strong>&lt;/figure&gt;</strong></code></pre>

  476. 

  477. <h4>

  478.     Élément <code class="html">&lt;figure&gt;</code></h4>

  479. 

  480. <p>

  481.     <code class="html">&lt;figure&gt;</code> est une unité de contenu, c'est-à-dire que cet élément sert de conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. L'objectif est de lier ce contenu à une légende, définie par l'élément <code class="html">&lt;figcaption&gt;</code> (facultatif).</p>

  482. 

  483. <h4>

  484.     Élément <code class="html">&lt;figcaption&gt;</code></h4>

  485. 

  486. <p>

  487.     Enfant direct de <code class="html">&lt;figure&gt;</code>, son rôle est de légender son parent, sous forme de texte et/ou de liens. Il peut se placer avant ou après le contenu principal de <code class="html">&lt;figure&gt;</code>.</p>

  488. 

  489. <h3>

  490.     Quelques applications dans le monde du livre</h3>

  491. 

  492. <p>

  493.     Ce fonctionnement se retrouve dans de nombreux ouvrages, y compris les premières encyclopédies pour lesquelles on imprimait des planches de figures à part.</p>

  494. 

  495. <figure class="center">

  496.     <figcaption>

  497.     <p>Une planche de gravures sur l'Astronomie, illustrations de l'Encyclopédie de Diderot (1713-1784)</p>

  498.     </figcaption>

  499.     <p>

  500.         <img alt="" src="http://www.alsacreations.com/xmedia/doc/full/planche-encyclopedie.png"/></p>

  501. </figure>

  502. 

  503. <figure class="center">

  504.     <figcaption><p>Un diagramme circulaire de statistiques</p></figcaption>

  505. <p><img alt="" src="http://www.alsacreations.com/xmedia/doc/full/email-client-popularity-2012.png"/></p>

  506. </figure>

  507. 

  508. <h4>

  509.     Compatibilité navigateur des éléments <code>&lt;figure&gt;</code> et <code>&lt;figcaption&gt;</code></h4>

  510. 

  511. <table class="pagetable">

  512.     <tbody>

  513.         <tr>

  514.             <th>

  515.                 Navigateurs</th>

  516.             <th>

  517.                 Versions</th>

  518.         </tr>

  519.         <tr>

  520.             <td>

  521.                 <img alt="Internet Explorer" height="40" src="http://www.alsacreations.com/xmedia/doc/small/IExplorer_Transparent.png" width="40"/></td>

  522.             <td>

  523.                 <strong>Internet Explorer 9.0+</strong></td>

  524.         </tr>

  525.         <tr>

  526.             <td>

  527.                 <img alt="Firefox" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Firefox_Transparent.png" width="40"/></td>

  528.             <td>

  529.                 <strong>Firefox 3.0+</strong></td>

  530.         </tr>

  531.         <tr>

  532.             <td>

  533.                 <img alt="Chrome" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Chrome_Transparent.png" width="40"/></td>

  534.             <td>

  535.                 <strong>Chrome 4.0+</strong></td>

  536.         </tr>

  537.         <tr>

  538.             <td>

  539.                 <img alt="Safari" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Safari_Transparent.png" width="40"/></td>

  540.             <td>

  541.                 <strong>Safari 3.1+</strong><br/>

  542.                 <strong>iOS Safari 3.2+</strong></td>

  543.         </tr>

  544.         <tr>

  545.             <td>

  546.                 <img alt="Opera" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Opera_Transparent.png" width="40"/></td>

  547.             <td>

  548.                 <strong>Opera 9.0+</strong><br/>

  549.                 <strong>Opera Mini 5.0 + et Mobile</strong> <strong>10.0</strong></td>

  550.         </tr>

  551.         <tr>

  552.             <td>

  553.                 <img alt="Android Browser" src="http://www.alsacreations.com/xmedia/doc/small/android-logo.png"/></td>

  554.             <td>

  555.                 <strong>Android Browser 4.0+</strong></td>

  556.         </tr>

  557.     </tbody>

  558. </table>

  559. 

  560. <p class="remarque">

  561.     Un navigateur n'implémentant pas ces éléments affichera le contenu au format brut, sans présentation particulière. Par défaut, le style appliqué est <code>display:block</code> sur les deux éléments, ainsi que des marges sur <code>&lt;figure&gt;</code>. Sous IE&lt;9 il faudra appliquer un <a href="/article/lire/1376-html5-section-article-nav-header-footer-aside.html">shim</a> pour pouvoir leur appliquer un style bloc.</p>

  562. 

  563. <h3>

  564.     Applications sur le web</h3>

  565. 

  566. <h5>

  567.     Utilisation sans légende</h5>

  568. 

  569. <p>

  570.     Il est tout à fait envisageable d'insérer <code class="html">&lt;figcaption&gt;</code> avant l'image voire de ne pas le mettre du tout car il est facultatif.</p>

  571. 

  572. <pre class="code">

  573. <code class="html"><strong>&lt;figure&gt;</strong>

  574.   &lt;img src="un-gout-de-fraise.jpg" alt="Proposition pour le thème : Un goût de fraise" /&gt;

  575. <strong>&lt;/figure&gt;</strong></code></pre>

  576. 

  577. <p>

  578.     <a class="demo" href="/xmedia/tuto/html5/figure-figcaption/demo1.html">Démonstration</a></p>

  579. 

  580. <p class="center">

  581.     <img alt="Demonstration image sans légende" src="http://www.alsacreations.com/xmedia/doc/full/demo23.jpg"/></p>

  582. 

  583. <p>

  584.     Les différents éléments peuvent être stylés en CSS. Dans cet exemple ont été ajoutées à <code class="html">&lt;figure&gt;</code> une bordure et une couleur de fond blanche.</p>

  585. 

  586. <h5>

  587.     Une image avec sa légende</h5>

  588. 

  589. <p>

  590.     Dans son usage le plus courant, l'élément <code class="html">&lt;figure&gt;</code> contient une image puis sa légende <code class="html">&lt;figcaption&gt;</code>. </p>

  591. 

  592. <pre class="code">

  593. <code class="html"><strong>&lt;figure&gt;</strong>

  594.   &lt;img src="un-gout-de-fraise.jpg" alt="" /&gt;

  595.   <strong>&lt;figcaption&gt;</strong>Proposition pour le thème : &lt;br&gt;&lt;em&gt;Un goût de fraise&lt;/em&gt; du jeu &lt;a href="http://www.photogame.fr/"&gt;PhotoGame&lt;/a&gt;<strong>&lt;/figcaption&gt;</strong>

  596. <strong>&lt;/figure&gt;</strong></code></pre>

  597. 

  598. <p>

  599.     <a class="demo" href="/xmedia/tuto/html5/figure-figcaption/demo2.html">Démonstration</a></p>

  600. 

  601. <p class="center">

  602.     <img alt="Visuel de la démonstration 1" src="http://www.alsacreations.com/xmedia/doc/full/demo12.jpg"/></p>

  603. 

  604. <h4 class="center">

  605.     Utilisation avancée</h4>

  606. 

  607. <p class="center">

  608.     Il est prévu de pouvoir regrouper une liste d'images et ainsi les lier à l'aide d'un unique élément <code class="html">&lt;figcaption&gt;</code>.</p>

  609. 

  610. <h5 class="center">

  611.     Une liste d'images</h5>

  612. 

  613. <pre class="code">

  614. <code class="html"><strong>&lt;figure&gt;</strong>

  615.   &lt;img src="porto1.jpg" alt="Graffiti dans le sud de Porto" width="181" height="242"&gt;

  616.   &lt;img src="porto2.jpg" alt="Balcons dans une rue de Porto" width="181" height="242"&gt;

  617.   &lt;img src="porto3.jpg" alt="Chat somnolant au sud de Porto" width="181" height="242"&gt;

  618.   <strong>&lt;figcaption&gt;</strong>Photo d'un voyage à Porto. Ville emplie de graffitis, balcons loufoques et chats profitant des quelques ruines derrière la ville.<strong>&lt;/figcaption&gt;</strong>

  619. <strong>&lt;/figure&gt;</strong></code></pre>

  620. 

  621. <p class="center">

  622.     <a class="demo" href="/xmedia/tuto/html5/figure-figcaption/demo3.html">Démonstration</a></p>

  623. 

  624. <p class="center">

  625.     <img alt="" src="http://www.alsacreations.com/xmedia/doc/full/demo34.jpg"/></p>

  626. 

  627. <h5 class="center">

  628.     Un bloc de code</h5>

  629. 

  630. <p>

  631.     Les illustrations ne sont pas les seuls éléments HTML à pouvoir profiter de <code class="html">&lt;figure&gt;</code> et <code class="html">&lt;figcaption&gt;</code>. On peut également les appliquer à un bloc de code source.</p>

  632. 

  633. <pre class="code">

  634. <code class="html"><strong>&lt;figure&gt;</strong>

  635.    &lt;pre&gt;

  636.       &lt;code&gt;

  637.         &lt;!-- Le code source à exposer --&gt;

  638.       &lt;/code&gt;

  639.    &lt;/pre&gt;

  640.    <strong>&lt;figcaption&gt;</strong>Description du code source présenté<strong>&lt;/figcaption&gt;</strong>

  641. <strong>&lt;/figure&gt;</strong></code></pre>

  642. 

  643. <p>

  644.     <a class="demo" href="/xmedia/tuto/html5/figure-figcaption/demo4.html">Démonstration</a></p>

  645. 

  646. <p class="center">

  647.     <img alt="" src="http://www.alsacreations.com/xmedia/doc/full/demo4.jpg"/></p>

  648. 

  649. <h5 class="center">

  650.     Une vidéo</h5>

  651. 

  652. <p>

  653.     Le même principe est appliqué à la balise <code class="html">&lt;video&gt;</code>. Voir aussi l'article : <a href="/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html">Introduction à la balise &lt;video&gt;</a>.</p>

  654. 

  655. <pre class="code">

  656. <code class="html"><strong>&lt;figure&gt;</strong>

  657.     &lt;video src="video.ogv" width="640" height="480"&gt;&lt;/video&gt;

  658.     <strong>&lt;figcaption&gt;</strong>Description de la vidéo<strong>&lt;/figcaption&gt;</strong>

  659. <strong>&lt;/figure&gt;</strong></code></pre>

  660. 

  661. <h5>

  662.     Les diagrammes et autres graphes dynamiques</h5>

  663. 

  664. <p>

  665.     Du côté de Canvas et <a href="/tuto/lire/1421-svg-initiation-syntaxe-outils.html">SVG</a>, le document peut également en profiter. <span>HTML5 ne compte pas que </span><code class="html">&lt;figure&gt;</code><span> et </span><code class="html">&lt;figcaption&gt;</code><span> dans ses nouveaux éléments mais également </span><code class="html">&lt;canvas&gt;</code><span>, qui vous permettra de créer, en association avec JavaScript, des diagrammes, des graphiques, et tout ce qu'une surface de dessin permet de faire. </span>À ce sujet, consultez l'article de David Rousset : <a href="http://blogs.msdn.com/b/davrous/archive/2011/05/20/introduction-aux-apis-graphiques-d-html5-svg-amp-canvas-2-4.aspx">Introduction aux APIs graphiques d’HTML5: SVG &amp; Canvas</a></p>

  666. 

  667. <h4>

  668.     Choisir <code class="html">&lt;figure&gt;</code> ou <code class="html">&lt;aside&gt;</code> ?</h4>

  669. 

  670. <p>

  671.     Ces deux éléments sont des unités de contenu mais n'ont pas le même rôle sémantique. Tandis qu'<code class="html">&lt;aside&gt;</code> n'est pas essentiel pour la compréhension de la page (il ne doit être qu'un apport tangentiel), <code class="html">&lt;figure&gt;</code> est lié à celle-ci : il transmet un contenu pertinent, lié au contenu principal, comme le serait une image classique.</p>

  672. 

  673. <p>

  674.     Nous pouvons donc résumer la chose comme suit :</p>

  675. 

  676. <ul>

  677.     <li>

  678.         <code class="html">&lt;aside&gt;</code> : son contenu est périphérique à la page, et son absence ne doit pas gêner la compréhension de celle-ci.</li>

  679.     <li>

  680.         <code class="html">&lt;figure&gt;</code> : son contenu contribue à donner du sens et de la compréhension à la page, et son placement n'est pas déterminant.</li>

  681. </ul>

  682. 

  683. <h3>

  684.     Propriétés des éléments</h3>

  685. 

  686. <h4>

  687.     <code class="html">&lt;figure&gt;</code></h4>

  688. 

  689. <table class="pagetable">

  690.     <tbody>

  691.         <tr>

  692.             <th>

  693.                 Propriété</th>

  694.             <th>

  695.                 Détails</th>

  696.         </tr>

  697.         <tr>

  698.             <td>

  699.                 Modèles de contenu autorisés</td>

  700.             <td>

  701.                 Un élément <code class="html">&lt;figcaption&gt;</code> optionnel, suivi par du contenu de flux</td>

  702.         </tr>

  703.         <tr>

  704.             <td>

  705.                 Parents autorisés</td>

  706.             <td>

  707.                 Tout élément pouvant contenir des éléments du flux</td>

  708.         </tr>

  709.         <tr>

  710.             <td>

  711.                 Omission de balise</td>

  712.             <td>

  713.                 Les balises ouvrantes et fermantes sont obligatoires</td>

  714.         </tr>

  715.         <tr>

  716.             <td>

  717.                 Style par défaut</td>

  718.             <td>

  719.                 <code class="css">figcaption { display:block; margin:1em 40px; }</code></td>

  720.         </tr>

  721.     </tbody>

  722. </table>

  723. 

  724. <h4>

  725.     <code class="html">&lt;figcaption&gt;</code></h4>

  726. 

  727. <table class="pagetable">

  728.     <tbody>

  729.         <tr>

  730.             <th>

  731.                 Propriété</th>

  732.             <th>

  733.                 Détails</th>

  734.         </tr>

  735.         <tr>

  736.             <td>

  737.                 Modèles de contenu autorisés</td>

  738.             <td>

  739.                 Contenu de flux</td>

  740.         </tr>

  741.         <tr>

  742.             <td>

  743.                 Parents autorisés</td>

  744.             <td>

  745.                 <code>&lt;figure&gt;</code></td>

  746.         </tr>

  747.         <tr>

  748.             <td>

  749.                 Omission de balise</td>

  750.             <td>

  751.                 Les balises ouvrantes et fermantes sont obligatoires</td>

  752.         </tr>

  753.         <tr>

  754.             <td>

  755.                 Style par défaut</td>

  756.             <td>

  757.                 <code class="css">figcaption { display:block; }</code></td>

  758.         </tr>

  759.     </tbody>

  760. </table>

  761. 

  762. <p>

  763.      </p>

  764. 

  765. </div>

  766.   </article>

  767. </section>

  768. 

  769. 

  770. <nav id="jumpto">

  771.   <p>

  772.     <a href="/david/blog/">Accueil du blog</a> |

  773.     <a href="http://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html">Source originale</a> |

  774.     <a href="/david/stream/2019/">Accueil du flux</a>

  775.   </p>

  776. </nav>

  777. 

  778. <footer>

  779.   <div>

  780.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  781.     <p>

  782.       Bonjour/Hi!

  783.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  784.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  785.     </p>

  786.     <p>

  787.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  788.     </p>

  789.     

  790.     <p>

  791.       Voici quelques articles choisis :

  792.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  793.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  794.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  795.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  796.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  797.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  798.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  799.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  800.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  801.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  802.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  803.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  804.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  805.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  806.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  807.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  808.     </p>

  809.     <p>

  810.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  811.     </p>

  812.     <p>

  813.       Je ne traque pas ta navigation mais mon

  814.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  815.       conserve des logs d’accès.

  816.     </p>

  817.   </div>

  818. </footer>

  819. <script type="text/javascript">

  820.   ;(_ => {

  821.     const jumper = document.getElementById('jumper')

  822.     jumper.addEventListener('click', e => {

  823.       e.preventDefault()

  824.       const anchor = e.target.getAttribute('href')

  825.       const targetEl = document.getElementById(anchor.substring(1))

  826.       targetEl.scrollIntoView({behavior: 'smooth'})

  827.     })

  828.   })()

  829. </script>