Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

JavaScriptPlayground/html-template-tag

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

40 Commits

Repository files navigation

HTML <template> tag script

Create an HTML template and include it everywhere on your website using the <template> tag.

Info

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>
<html lang="en">
 <!-- Everything enclosed within the <head> tag is inserted into the <head> tag,
 in the document where the <template> tag is used. -->
 <head>
 <link rel="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.

<!-- index.html (before template replace) -->
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>HTML-template</title>
 <!-- include template.js script -->
 <script src="https://raw.githubusercontent.com/JavaScriptPlayground/html-template-tag/main/template.js" type="module" defer></script>
 </head>
 <body>
 <template src="./template.html"></template>
 </body>
</html>

Index (after replace)

This is the final version of the HTML page after the templates have been replaced.

<!-- index.html (after template replace) -->
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>HTML-template</title>
 <!-- include script -->
 <script src="https://raw.githubusercontent.com/JavaScriptPlayground/html-template-tag/main/template.js" type="module" defer></script>
 <link rel="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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

AltStyle によって変換されたページ (->オリジナル) /