HTML Template Definition

Introduction

The <template> tag in HTML allows you to create reusable content that is not rendered on a page when it is loaded. This is useful when you have content that is not needed at the start of the page loading but can be accessed later using JavaScript. This lab will guide you through the steps to create an HTML template.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

Add <template> Tag

Firstly, create an HTML file named index.html.

Add the <template> tag to your HTML file. This tag requires a start and end tag and should contain the content that you want to reuse later.

<template id="myTemplate">
  <h2>This is a template</h2>
  <p>This is some text that can be reused.</p>
</template>

Note: The id attribute can help you to reference the template later in JavaScript.

Create a Placeholder Area

Create an empty area where you will insert the content of the template. To do this, use the <div> tag and give it an id attribute.

<div id="placeholder"></div>

Use JavaScript to Render the Template

Add a JavaScript code block to your HTML file to render the contents of the template into the placeholder area.

<script>
  const template = document.getElementById('myTemplate'); const placeholder =
  document.getElementById('placeholder'); const clone =
  template.content.cloneNode(true); placeholder.appendChild(clone);
</script>

This code will first retrieve the template from the HTML using the getElementById method and then create a clone of its contents. The contents are then appended to the placeholder area.

Save the index.html file and open it in a web browser. You should see the content from the template appears in the placeholder area.

Summary

Using the HTML <template> tag is a simple and useful way to create reusable content in your web pages. With the help of JavaScript, you can dynamically render the content when it is needed. This can help to reduce redundancy in your code and make it easier to maintain.