A Deep Dive into the HTML5 Element (with Code Examples)
The element of HTML5 is a lightweight client-side mechanism used to define HTML fragments that are not rendered but can be cloned and inserted into the DOM. It is suitable for dynamic content such as lists, modal boxes, etc.; its content is inertly parsed, has no side effects, and is safer and more efficient than display:none.
The HTML5 element is a lightweight, client-side mechanism for defining reusable HTML fragments that are not rendered when the page loads — but can be cloned and inserted into the DOM later, on demand. It's ideal for dynamic content like lists, modals, cards, or UI components built with vanilla JavaScript.
How Works (and Why It's Better Than Alternatives)
The element acts like a “storage drawer” for markup. Its contents are parsed but not executed: scripts don't run, images don't load, and audio/video doesn't autoplay. This avoids side effects and performance hits during initial render.
Compared to hiding content with display: none or hidden , guarantees zero rendering, no layout impact, and no resource fetching — making it safer and more efficient.
- Contents are inert until explicitly cloned and appended
- Supports full HTML syntax — including nested elements, attributes, and text nodes
- Works seamlessly with
document.importNode()or moderncontent.cloneNode(true)
Basic Syntax and Instantiation
Define a template using the tag (must be self-contained — no parent required, but must live inside or ).
Here's a minimal example:
To use it in JavaScript:
const template = document.getElementById('user-card');const clone = template.content.cloneNode(true);
clone.querySelector('.name').textContent = 'Alex Johnson';
clone.querySelector('.email').textContent = 'alex@example.com';
document.body.appendChild(clone);
Real-World Use Case: Rendering a List Dynamically
Suppose you're fetching user data and want to render cards without string concatenation or innerHTML (which risks XSS).
Then populate it safely:
const template = document.getElementById('user-item');const list = document.getElementById('user-list');
const users = [
{ name: 'Sam Rivera', role: 'Designer', avatar: '/avatars/sam.jpg' },
{ name: 'Taylor Kim', role: 'Engineer', avatar: '/avatars/taylor.jpg' }
];
users.forEach(user => {
const clone = template.content.cloneNode(true);
clone.querySelector('.full-name').textContent = user.name;
clone.querySelector('.role').textContent = user.role;
clone.querySelector('.avatar').src = user.avatar;
list.appendChild(clone);
});
Key Notes and Gotchas
is well-supported in all modern browsers (including IE11 with minor caveats). But keep these in mind:
- The
contentproperty is aDocumentFragment— not a regular element — so you can't call.querySelector()directly on the template itself - Templates can't be placed inside tables (
<table> , <code><tbody> , etc.) unless wrapped in valid context (eg, use </tbody> <tbody> inside the template if needed)<li> No event listeners survive cloning — attach them after insertion, or use event delegation on a static parent</li> <li> You can't style <template> contents directly — styles must target elements *inside* the template, or apply via external CSS classes</template> </li> <p> Basically, <template> gives you clean, safe, native templating — no framework required. It's not flashy, but it solves real problems quietly and effectively.</template></p> </tbody>
The above is the detailed content of A Deep Dive into the HTML5 Element (with Code Examples). For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
How to use AI Speech Enhancement in Premiere? (Audio Cleanup Guide)
1 months ago
By 下次还敢
How to correctly migrate jQuery's drag and drop events to native JavaScript
4 weeks ago
By DDD
The Notepad upgrade, cheaper YouTube TV, and Nova Launcher's new owner: News roundup
3 weeks ago
By DDD
What is 'EVM'? The significance of the Ethereum Virtual Machine
1 months ago
By DDD
How to dynamically set arbitrary depth value of nested array in PHP
1 months ago
By DDD
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Douyin level price list 1-75
20516
7
20516
7
wifi shows no ip assigned
13631
4
13631
4
How to detect if a browser supports HTML5 features? (Modernizr)
Mar 04, 2026 am 03:11 AM
The main reason for the failure of Modernizr detection is that the script is not successfully loaded or executed at an improper time. It is necessary to ensure that it is loaded synchronously, avoids CSP interception, and is executed before DOM construction. As an alternative, it is preferable to use CSS@supports and native API to detect empty scripts.
How to use the template tag for dynamic content in HTML5? (Cloning nodes)
Mar 05, 2026 am 02:15 AM
The template tag itself does not render and must be manually cloned and inserted. Template is a lazy container of HTML5. The browser will parse it but completely skip rendering and script execution. If you write Hello directly, nothing will appear on the page - this is not a bug, it is the design. To make it "alive", you must use JavaScript to extract the content, clone it, and then hang it on the DOM. A common mistake is to directly obtain document.querySelector('template').content and then try to appendChild. The result is an error or no response: because the content is a Docu
How to make a phone number clickable in HTML5? (Tel link)
Mar 05, 2026 am 02:29 AM
The correct way to write it is href="tel: 8613812345678". All non-numeric characters need to be cleared (only and numbers are retained). Mainland China numbers must be prefixed with 86. Extension numbers use;ext= format, and target="_blank" is disabled.
How to disable autocomplete on input fields in HTML5? (Form attributes)
Mar 05, 2026 am 02:31 AM
Autocomplete="off" sometimes does not take effect because modern browsers (such as Chrome ≥ 80) actively ignore it to ensure the password manager experience; to be truly effective, it needs to be combined with strategies such as semantic values (such as new-password), avoiding sensitive names, and dynamically generated attributes.
How to create a progress bar for file uploads in HTML5? (Progress tag)
Mar 06, 2026 am 02:22 AM
Why can't the tag directly display the upload progress? It is a read-only visual component. It does not listen to network requests and is not automatically bound to the upload process of XMLHttpRequest or fetch. If you put it in and don't update the value manually, it will always stop at 0%. What really drives it is the event monitoring in the upload logic you write yourself. A common mistake is to only monitor onload (upload completed) but miss upload.onprogress. XMLHttpRequest (not fetch) must be used to obtain real-time upload progress, because fetch does not expose the max attribute of the event in the upload phase and must be set to the file size (file.size
How to create a tooltip using only HTML5? (Title attribute)
Mar 06, 2026 am 12:23 AM
The title attribute is not a tooltip component, but an accessibility prompt mechanism implemented by the browser. The behavior, style, and interaction are uncontrollable and are only suitable for simple scenarios such as pure information supplement.
How to center an image vertically in HTML5? (Layout techniques)
Mar 07, 2026 am 02:05 AM
Flexbox is the most stable for centered images. The key is to set display:flex and align-items:center in the parent container and specify the height; using place-items:center for Grid is more concise; absolute positioning requires top:50% with transform:translateY(-50%); vertical-align is invalid for block-level centering.
How to insert a copyright symbol in HTML5? (Character entities)
Mar 05, 2026 am 02:57 AM
© and © have the same effect. The former is a named entity and is easy to read, while the latter is a decimal digital entity and has more stable compatibility. It is necessary to avoid the problems of CSS hiding, JS unescapement and missing semantics.
