ERB template syntax in Ruby on Rails

Introduction

ERB lets you mix Ruby code with HTML to create dynamic web pages easily.

When you want to show data from Ruby variables inside an HTML page.

When you need to run simple Ruby code like loops or conditions inside HTML.

When building views in a Ruby on Rails web application.

When you want to insert user input or database content into a webpage.

When you want to keep your HTML and Ruby code together for easier editing.

Syntax

Ruby on Rails

<%= ruby_code %>  # Inserts the result of ruby_code into HTML
<% ruby_code %>    # Runs ruby_code but does not insert output
<%# comment %>      # Comment that does not appear in output

<%= %> outputs the result of the Ruby code inside it.

<% %> runs Ruby code but does not show anything in the HTML.

Examples

Outputs the string "Hello, world!" into the HTML.

Ruby on Rails

<%= "Hello, world!" %>

Runs a condition to show "Welcome back!" only if the user is signed in.

Ruby on Rails

<% if user_signed_in? %>
  <p>Welcome back!</p>
<% end %>

This is a comment inside ERB and is ignored when rendering.

Ruby on Rails

<%# This is a comment and will not appear in the HTML %>

Loops through a list of items and outputs each item's name inside a list.

Ruby on Rails

<ul>
  <% @items.each do |item| %>
    <li><%= item.name %></li>
  <% end %>
</ul>

Sample Program

This ERB template shows a welcome message with the user's name. It then checks if there are any notifications. If yes, it lists them; if not, it shows a message saying there are none.

Ruby on Rails

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ERB Example</title>
</head>
<body>
  <h1>Welcome, <%= @user_name %>!</h1>
  <% if @notifications.any? %>
    <p>You have <%= @notifications.count %> new notifications:</p>
    <ul>
      <% @notifications.each do |note| %>
        <li><%= note %></li>
      <% end %>
    </ul>
  <% else %>
    <p>No new notifications.</p>
  <% end %>
</body>
</html>

Important Notes

Always use <%= %> when you want to show something on the page.

Use <% %> for Ruby code that controls logic but does not print.

Keep your Ruby code simple inside ERB to keep templates easy to read.

Summary

ERB lets you mix Ruby code inside HTML to make pages dynamic.

Use <%= %> to insert Ruby results into HTML.

Use <% %> for Ruby logic without output.

Practice

1. Which ERB tag should you use to display the result of a Ruby expression inside HTML?

easy

A. <% %>

B. <%# %>

C. <%= %>

D. <%== %>

Solution

1. Step 1: Understand ERB tags for output

   The <%= %> tag evaluates Ruby code and inserts the result into the HTML.

2. Step 2: Compare with other tags

   <% %> runs Ruby code without output, <%# %> is a comment, and <%== %> is not standard ERB syntax.

3. Final Answer:

   <%= %> -> Option C

4. Quick Check:

   Output Ruby result = <%= %> [OK]

Hint: Use <%= %> to show Ruby results in HTML [OK]

Common Mistakes:

• Using <% %> which does not output anything
• Confusing comment tag <%# %> with output
• Trying to use <%== %> which is invalid

2. Which of the following is the correct syntax to run Ruby code without showing output in an ERB template?

easy

A. <%== ruby_code %>

B. <%= ruby_code %>

C. <%# ruby_code %>

D. <% ruby_code %>

Solution

1. Step 1: Identify ERB tags for code execution

   The <% %> tag runs Ruby code but does not insert output into HTML.

2. Step 2: Differentiate from output tags

   <%= %> outputs result, <%# %> is a comment, and <%== %> is invalid syntax.

3. Final Answer:

   <% ruby_code %> -> Option D

4. Quick Check:

   Run code without output = <% %> [OK]

Hint: Use <% %> for Ruby logic without output [OK]

Common Mistakes:

• Using <%= %> which outputs result
• Using <%# %> which comments out code
• Trying invalid <%== %> syntax

3. Given this ERB snippet:

<ul>
  <% items.each do |item| %>
    <li><%= item.upcase %></li>
  <% end %>
</ul>

What will be the rendered HTML if items = ['apple', 'banana']?

medium

A. APPLEBANANA

B. item.upcaseitem.upcase

C. applebanana

D.

Solution

1. Step 1: Understand the loop and method call

   The code loops over each item in the array and outputs the uppercase version using item.upcase.

2. Step 2: Predict the HTML output

   Each item is wrapped in <li> tags with uppercase text, so the list shows APPLE and BANANA.

3. Final Answer:

   <ul><li>APPLE</li><li>BANANA</li></ul> -> Option A

4. Quick Check:

   Loop with upcase output = <ul><li>APPLE</li><li>BANANA</li></ul> [OK]

Hint: Remember <%= %> outputs evaluated Ruby code [OK]

Common Mistakes:

• Expecting original lowercase instead of upcase
• Thinking <% %> outputs text
• Confusing string literal with method call

4. Identify the error in this ERB snippet:

<ul>
  <% items.each do |item| %>
    <li><% item.upcase %></li>
  <% end %>
</ul>

medium

A. Syntax error in the loop declaration

B. Missing output tag; item.upcase won't display

C. Extra closing tag <% end %> is invalid

D. Using <%# %> instead of <% %> for code

Solution

1. Step 1: Check the ERB tags around item.upcase

   The code uses <% item.upcase %> which runs Ruby but does not output anything.

2. Step 2: Understand output requirement

   To show the uppercase text, it should use <%= item.upcase %> instead.

3. Final Answer:

   Missing output tag; item.upcase won't display -> Option B

4. Quick Check:

   Use <%= %> to output values [OK]

Hint: Use <%= %> to output, <% %> only runs code [OK]

Common Mistakes:

• Confusing <% %> with output tag
• Thinking loop syntax is wrong
• Believing extra end tag causes error

5. You want to conditionally display a message in ERB only if user.admin? is true. Which snippet correctly does this?

hard

A. <% if user.admin? %>Welcome, admin!<% end %>

B. <%= if user.admin? %>Welcome, admin!<% end %>

C. <% if user.admin? %><% 'Welcome, admin!' %><% end %>

D. <%= user.admin? ? 'Welcome, admin!' %>

Solution

1. Step 1: Understand conditional rendering in ERB

   <% if user.admin? %> starts an if block where literal text like "Welcome, admin!" is rendered only if true, ended by <% end %>.

2. Step 2: Why others fail

   B: Invalid syntax (<%= if %> can't start control flow like that). C: Inner <% %> runs code but outputs nothing. D: Incomplete ternary (missing : '').

3. Final Answer:

   <% if user.admin? %>Welcome, admin!<% end %> -> Option A

4. Quick Check:

   Conditional literal text output = <% if %>...<% end %> [OK]

Hint: Use <% if cond %> text <% end %> for conditional display [OK]

Common Mistakes:

• Using <% %> for text inside conditional (no output)
• Incomplete ternary missing : false_expr (syntax error)
• Using <%= if cond %> (invalid Ruby syntax)