What's the actual difference between <% and <%= ?

This is the first thing everyone trips over. It looks like a tiny difference, but it's the difference between your page being blank or actually showing data. Think of it this way: <% ... %> is for logic, and <%= ... %> is for output.

If you're writing an if statement or a each loop, you don't want the Ruby code itself to be printed onto the screen; you just want it to execute. That's where the silent tags come in. But when you want to actually drop a variable's value into the HTML, you add that equals sign.

<% if user_logged_in? %>
  <p>Welcome back, <%= user_name %>!</p>
<% else %>
  <p>Please log in to continue.</p>
<% end %>

I've spent way too many hours debugging a page only to realize I forgot the = on a variable. It happens to the best of us.

How do I handle a list of items without writing repetitive HTML?

You don't want to hardcode ten different <li> tags. Since ERB is just Ruby embedded in text, you can use any Ruby iterator you already know. I usually lean on .each for this. You wrap the HTML you want to repeat inside the loop tags, and ERB will handle the heavy lifting.

Let's say we're building a simple task list. Instead of manual entry, we'll iterate over an array of hashes:

<ul>
  <% @tasks.each do |task| %>
    <li>
      <strong><%= task[:title] %></strong> 
      <span>— <%= task[:priority] %></span>
    </li>
  <% end %>
</ul>

The magic here is that everything inside the .each block—including the HTML tags—gets repeated for every single item in the @tasks array.

How do I actually get the Ruby data into the template?

This is where the "magic" happens behind the scenes. ERB doesn't automatically know about your local variables. To make it work, you have to pass the current binding to the ERB object. The binding is essentially a snapshot of the current scope—the variables, methods, and state available at that exact moment in your code.

Here is a complete, runnable example of how I usually set this up in a small script:

require 'erb'

# Our data
@product_name = "Mechanical Keyboard"
@price = 129.99
@features = ["RGB Lighting", "Brown Switches", "USB-C"]

# The template (usually this would be in a separate .erb file)
template = <% =ERB.new("<h1><%= @product_name %></h1>
<p>Price: $<%= @price %></p>
<ul>
  <% @features.each do |f| %>
    <li><%= f %></li>
  <% end %>
</ul>") %>

# Render the template using the current binding
puts template.result(binding)

Without binding, the template would have no idea what @product_name is and would throw a NameError. I highly recommend keeping your logic in the Ruby class and using the ERB file strictly for presentation. If you find yourself writing complex calculations inside <% %>, it's a sign you should move that logic back into a Ruby method.

📋 Practical Task

Exercise: Building a Dynamic User Profile Page

Your goal is to create a small Ruby script that renders a user profile using ERB. You will need to handle a mix of data types and a conditional display.

• Create a hash named user with the following keys: :name, :email, :is_premium (boolean), and :badges (an array of strings).
• Create an ERB template string (or file) that:
  • Displays the user's name in an <h2> tag.
  • Displays the email in a paragraph.
  • Uses an if statement to display a "⭐ Premium Member" badge only if :is_premium is true.
  • Iterates through the :badges array to create an unordered list of the user's achievements.
• Use ERB.new(...).result(binding) to output the final HTML to the console.