The HTML <template> Element: Inert, Reusable Markup
Think of <template> as a blueprint for HTML. It holds markup that's invisible and inactive until you need it, perfect for creating reusable chunks like list items that you can stamp out with JavaScript.
Why it exists
Before <template>, developers stored reusable HTML in messy JavaScript strings or hidden elements. This was inefficient, hard to maintain, and could cause unexpected rendering bugs or security holes. The <template> element provides a standard, safe, and performant way to store inert HTML fragments directly in the document.
The mental model
Think of the <template> element like a rubber stamp for HTML. The element itself is the stamp, and its .content property is the design carved into the rubber. The browser parses this content but keeps it inert—it's not rendered, scripts don't run, and images don't load. You use JavaScript to "ink" the stamp with data, then press it onto the page by cloning its content to create a new, live element.
How it works
The browser parses the HTML inside a <template> tag but does not add it to the main document's DOM tree. This content is stored in a DocumentFragment accessible via the template element's .content property. To use it, you select the template, access its .content, and then use cloneNode(true) to create a deep copy. This copy is a live DOM fragment that you can then modify and append to the visible page.
When to use it
Use <template> whenever you have a repeating HTML structure that you need to generate dynamically with JavaScript. It's ideal for list items, table rows, modal dialogs, or any component in a client-side rendered application. It's a foundational part of building scalable Web Components.
When not to use it
Avoid <template> for content that should be visible on page load without JavaScript. It's not a replacement for server-side rendering if SEO and initial load performance for static content are critical. For extremely simple, single-use structures, a JavaScript template literal might be less verbose, though often less maintainable.
One canonical example
Imagine a to-do list where you add items dynamically. You can define the structure for a single list item inside a template: <template id="todo-template"><li><input type="checkbox"> </li></template>. In your JavaScript, you would find this template by its ID, clone its .content, update the with the to-do text, and then append the new <li> to your main list. This keeps your HTML structure clean and separate from your application logic.
Interview question
What is the primary characteristic of HTML content placed inside a <template> element?
- a.It serves as a fallback for browsers that do not support modern JavaScript frameworks.
- b.It is immediately rendered on the page, but its scripts are deferred until the page is fully loaded.
- c.It is automatically optimized for SEO and pre-rendered by the browser for faster initial display.
- d.It is parsed by the browser but remains inert, not rendered or active, until explicitly used by JavaScript.Correct
Why? this is the answer
The card explicitly states that the browser parses the HTML inside a <template> tag but keeps it inert—it's not rendered, scripts don't run, and images don't load—until JavaScript clones and appends it. Option B is incorrect because the content is not rendered at all initially, and its scripts do not run.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #html
- #dom
- #javascript
- #web components
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on html — each one lists the topics its interview covers.
See open roles