You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Create an HTML template and include it everywhere on your website using the <template> tag.
It is not guaranteed that this script works with other frameworks!
Template
This is the HTML template. Everything inside the <head> tag will later be replaced into the <head> tag of the actual page. The same is applied to the <body> tag.
<script> tags are not executed!
<!-- template.html --><!DOCTYPE html><htmllang="en"><!-- Everything enclosed within the <head> tag is inserted into the <head> tag, in the document where the <template> tag is used. --><head><linkrel="stylesheet" href="style.css"></head><!-- Everything enclosed within the <body> tag is inserted at the location, in the document where the <template> tag is used. --><body><p>Hello World!</p><p>This is amazing!</p></body></html>
Index (before replace)
This is the main HTML page where we want to use the <template> tag. Use the src attribute to specify the source path for the HTML template file.
This is the final version of the HTML page after the templates have been replaced.
<!-- index.html (after template replace) --><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>HTML-template</title><!-- include script --><scriptsrc="https://raw.githubusercontent.com/JavaScriptPlayground/html-template-tag/main/template.js" type="module" defer></script><linkrel="stylesheet" href="style.css"><!-- This <link> tag was added from the template <head> tag --></head><body><p>Hello World!</p><!-- These two <p> tags were added from the template <body> tag --><p>This is amazing!</p></body></html>
About
Create an HTML template and include it everywhere on your website.
