Question

I’ve realized that many tags in HTML5, like Canvas and progress tags are multi tags

<canvas></canvas>

<progress></progress>

Couldn’t they work just fine like:

<canvas/>

<progress/>

Are they multi tags just for holding something to display when they don’t work?

Answer 1

For the <canvas> element it is so you can place content that will be shown to browsers that do not support that element yet:

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

For the <progress> element it allows you to control the display of the progress text:

<section>
 <h2>Task Progress</h2>
 <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 </script>
</section>