The template tag was first introduced in HTML 5.2, and has not received much fame since. It has ninety-five percent global browser support (source), so there’s not much of a reason to avoid it.
But what does the template tag actually do?
- It stores HTML for later, so complex items are easy to replicate.
- It’s invisible to users, screen-readers, and Search Engines, making SEO and accessibility (a11y) simple.
- Since you are writing HTML in the HTML file, your code will read as simply as if it were written for two-year old children. (Disclaimer: I have not tested this).
Let’s give an example of somewhere we would use the template tag.
Consider a static page which pulls news from an API such as Hacker News’. We aren’t using React, nor Express. We can pull data from the Hacker News API, but how do we display them to the user?
- We could set the innerHTML to an HTML string. Except, this exposes a security risk called Cross Site Scripting. Thank you to moomin for pointing this out.
- The best option seems to be the template tag.
Note: This post first appeared on my blog.