Basic HTML Templating

Think of crafting a personalized letter to a friend. You could write an entirely new letter for each friend, or you could create a template that says “Dear ___,” and a few more placeholders for stories you want to share. You then fill in the blanks for each specific friend. This is the essence of HTML templating: a method to take a single structure of HTML and inject new data (like a username or biography) without rewriting everything.

In this lesson, you’ll learn how to:

Create a basic HTML template
Insert information into a basic HTML template

Creating a Basic HTML Template

In JavaScript, you may have seen ${} used for string interpolation inside backtick (`) strings. For instance:
console.log(`Hello ${name}!`);.

When it comes to basic HTML templating in a plain text file, you might switch to a different syntax to signal placeholders. One straightforward approach is using #{} to identify variable parts you plan to fill dynamically.

Below is an example HTML file named profile-page.html. Notice how #{username} and #{biography} appear at spots where we want to inject data.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>#{username}'s Profile Page</title>
</head>
<body>
  <h1>Welcome to #{username}'s profile page!</h1>
  <p>#{biography}</p>
  <h2>Comment Box</h2>
  <form method="post" action="/comment">
    <p>To send a comment to #{username}, fill out this form</p>
    <textarea name="commentBody"></textarea>
    <button type="submit">Comment</button>
  </form>
</body>
</html>

Think of this file like a greeting card template with blanks for the recipient’s name (#{username}) and a personal message (#{biography}).

Using an HTML Template

To use this profile-page.html template in your Node.js code, you can:

- Read the template from the file system (like opening up your blank greeting card).
- Replace the placeholders (#{username} and #{biography}) with the actual data you want to show (filling in the card with a name and message).

Here’s how you might do it in a simple script using Node’s fs module:

const fs = require('fs');

// Get the file contents of profile-page.html as a string
const htmlTemplate = fs.readFileSync('./profile-page.html', 'utf-8');

const htmlPage = htmlTemplate
  // replace all instances of #{username} in the HTML file with 'DemoUser'
  .replace(/#{username}/g, 'DemoUser')
  // replace all instances of #{biography} in the HTML file with 'Hello World!'
  .replace(/#{biography}/g, 'Hello World!');

By the time the code finishes, htmlPage will be a string that looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DemoUser's Profile Page</title>
</head>
<body>
  <h1>Welcome to DemoUser's profile page!</h1>
  <p>Hello World!</p>
  <h2>Comment Box</h2>
  <form method="post" action="/comment">
    <p>To send a comment to DemoUser, fill out this form</p>
    <textarea name="commentBody"></textarea>
    <button type="submit">Comment</button>
  </form>
</body>
</html>

Notice how every #{username} placeholder was replaced with DemoUser and every #{biography} placeholder was replaced with Hello World!. That means you can now serve htmlPage in a web browser, or store it, or modify it further—depending on your needs.

Real-World Applications

User Profiles: Large social media platforms host millions of user profiles. Rather than storing a separate static HTML page for each user, they keep one template and dynamically insert details for the requested user.
E-commerce Product Listings: Online stores often have thousands of products. You can maintain a single template with placeholders for product name, price, and description. When a user views a product, your server fills in those placeholders on the fly.
Real-Time Data Updates: Whenever your data changes (e.g., new tweets, blog comments, or posted items), you simply merge the updated information into your existing template without rewriting an entire file.

This dynamic approach saves space, reduces maintenance, and allows for quick updates.

What You've Learned

In this lesson, you’ve discovered how to craft a basic HTML template and replace variables within it using JavaScript string manipulation. You learned that:

HTML files can use placeholders like #{username} that get swapped out at runtime with real data.
Using fs.readFileSync returns the HTML file’s content as a string so you can manipulate it in Node.js.
.replace(...) can inject the user’s unique information—like a name or biography—into the template.

This technique is a stepping stone to more sophisticated templating systems, but it already shows the power of not having to maintain thousands of near-identical HTML files. You simply keep your “blank card” and fill in the recipient’s details whenever you need to send it.

As you move forward, you might explore advanced templating libraries (like EJS, Pug, or Handlebars) that automate and streamline this process. But for now, you have a solid foundation in how basic HTML templating works behind the scenes!