Skip to main content

<legend>

  • Date:
    04/03/2025
  • Modified:
    04/03/2025
  • Category:

Diagrams or maps regularly include legends. These legends have a dedicated container: <legend>.

You can format the legend content as a <list>. The individual color blocks or markings in the legend are ignored unless specified differently.

Examples

Legend with color blocks 
<figure>
  <img alt="" role="informative" src="/img/000000_p000-1.jpg">
  <legend>
    <title>Klimaat</title>
    <list type="unordered" bullet="none">
      <li>tropisch regenwoudklimaat</li>
      <li>savanneklimaat</li>
      <li>steppeklimaat</li>
      <li>zeeklimaat</li>
      <li>mediterraan klimaat met droge zomer</li>
      <li>zeeklimaat met droge winter</li>
      <li>woestijnklimaat</li>
    </list>
  </legend>
  <caption>Figuur 1.21 Mozaïekaart.</caption>
</figure>
Legend with icons 
<figure>
  <title><number>BRON 25</number></title>
  <caption>Het centrum-periferiemodel</caption>
  <img alt="" role="informative" src="/img/000000_p000-0.jpg"/>
  <legend>
    <list type="unordered" bullet="none">
      <li>periferie</li>
      <li>centrum</li>
      <li>uitwisseling van arbeid en kennis</li>
      <li>uitwisseling van kapitaal</li>
      <li>uitwisseling van goederen</li>
    </list>
  </legend>
</figure>
Multiple legends 
<figure>
  <img alt="" role="informative" src="/img/000000_p000-0.jpg"/>
  <legend>
    <list type="unordered" bullet="none">
      <li>1980</li>
      <li>2014</li>
      <li>2020</li>
    </list>
  </legend>
  <legend>
    <list type="unordered" bullet="none">
      <li>>65</li>
      <li>20-65</li>
      <li>0-20</li>
    </list>
  </legend>
  <source>Bron: CIA factbook, 2015</source>
</figure>
  • Date:
    04/03/2025
  • Modified:
    04/03/2025
  • Category: