SyntaxShelf

Html template

2 snippets in HTML & CSS

HCHTML & CSS

DOCTYPE Declaration

HC · Document Structure
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).

Frequently asked questions

How does HTML & CSS handle html template?
HTML & CSS covers this with 2 copy-ready snippets on this page. The "DOCTYPE Declaration" snippet in HTML & CSS uses `<!DOCTYPE html>`.
Which code does the HTML & CSS example use?
The "DOCTYPE Declaration" snippet uses `<!DOCTYPE html>`, from the Document Structure section of the HTML & CSS cheat sheet.
What other HTML & CSS snippets are shown for "html template"?
Besides "DOCTYPE Declaration", this page also shows "<template> Reusable Fragment".
Is there anything to watch out for?
Yes. For "DOCTYPE Declaration": Always place this as the very first line. Without it, browsers fall into quirks mode and render inconsistently.

Browse all tasks by intent