Html template

DOCTYPE Declaration

syntax

<!DOCTYPE html>

example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>

Note Always place this as the very first line. Without it, browsers fall into quirks mode and render inconsistently.

<template> Reusable Fragment

HC · Semantic Elements

syntax

<template id="tmpl">
  <!-- inert markup -->
</template>

example

<template id="card-template">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

<!-- Clone in JS:
const tmpl = document.getElementById('card-template');
const clone = tmpl.content.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
document.body.appendChild(clone);
-->

Note Content inside template is not rendered, not visible, and not queried by selectors. It serves as a blueprint for JavaScript-generated elements. Clone its content with cloneNode(true).

HCHTML & CSS