1. Home
  2. Html
  3. Template

Template tag lets you create a HTML partial. By default it doesn't get rendered into the page. Instead, you can use Javascript to manipulate it and inject dynamic content.

    .arial{ font-family: Arial }
    .arial-black{ font-family: Arial Black }
    .comic-sans{ font-family: Comic Sans MS }
    .impact{ font-family: Impact }
    .lucida-sans{ font-family: Lucida Sans Unicode }

    .font{ margin-bottom: 24px; }  
        padding: 6px 12px;
        text-transform: capitalize;

<!-- Simple template that serves as a base for our dynamic component -->
<template id="font-template">
    <div class="font">
        <div class="font__title">Title</div>
<div class="container">
    <div id="font-gallery"><!-- Component will be injected here using Javascript --></div>

    // Get template element
    const fragment = document.getElementById('font-template');
    // This array contains the data we will loop through
    const fonts = [
        { family: 'arial' },
        { family: 'arial-black' },
        { family: 'comic-sans' },
        { family: 'impact' },
        { family: 'lucida-sans' }

    fonts.forEach(font => {
        // Create an instance of the template content
        const instance = document.importNode(fragment.content, true);
        // Add relevant content to the template
        instance.querySelector('.font__title').innerHTML = font.family + " font family";
        // Append the instance to the DOM
Full Html cheatsheet