3 unusual but useful HTML elements

1.<abbr>

Abbreviations or abbreviations used to indicate. If the title attribute is included, the text will be displayed as a tooltip on hover

<p>
  The <abbr title="Product Detail Page">PDP</abbr> provides
  information on a specific product.
</p>

2.<progress>

Display a progress bar indicator, which can be easily controlled using its value attribute. The JavaScript in this example will fill our progress bar every 100 millisecond increments

<label for="progress">Progress:</label>
<progress id="progress" max="100" value="0"></progress>

<script>
  const progress = document.querySelector('#progress');
  let val = 0;

  setProgress();
  function setProgress() {
    if (val> 100) val = 0;
    progress.value = ++val;
    setTimeout(setProgress, 100);
  }
</script>

3.<wbr>

Allows you to specify exactly where the text line should be interrupted when it overflows. For example, if we have a very long line of text like this URL, we can tell the browser where it should break if the text does not fit on a line

<p>
http://is.this.just.real.life.com/is<wbr>/this/just/fantasy/caught/in/a/landslide/no/espace/from/reality
</p>