great article 👍. I would like to add to this with the template tag. This is used to hold content that would not be rendered immediately when the webpage is loaded but is displayed with the use of javascript.

For Example:

<!-- code above -->
<div>
  <button id="show-btn">Show hidden </button>    
  <template>
     <h1> Here there i am a template </h1>
     <p> You can only display me with javascript </p>
  </template>
</div>
<script>
const showBtn = document.querySelector("#show-btn")

const showHiddenContent = (event) => {
     const template = document.querySelector("template")
     const templateClone = template.content.cloneNode(true)
     event.currentTarget.parentNode.append(templateClone)
}

showBtn.addEventListener("click", showHiddenContent)
</script>

You can test this out and see what happens .I recently discovered this one from this video by web dev simplified you can check out his youtube channel he makes great content like this and subcribe to his channel if you found the video helpful (I watch youtube a lot 😅). There is also documentation on this on MDN web docs.