ERB template syntax in Ruby on Rails - Step-by-Step Execution

Concept Flow - ERB template syntax

Start ERB Template

↓

Read line

↓

Check for ERB tags

↓

Run Ruby

↓

No Output

↓

Next line or End

The ERB template reads each line, detects Ruby code tags, executes code, and inserts output if needed.

Execution Sample

Ruby on Rails

<h1>Welcome</h1>
<% name = "Alice" %>
<p>Hello, <%= name %>!</p>

This template sets a Ruby variable and inserts its value into HTML.

Execution Table

Step	Line Read	ERB Tag	Action	Output Produced
1	<h1>Welcome</h1>	None	Output HTML as is	<h1>Welcome</h1>
2	<% name = "Alice" %>	<% %>	Run Ruby code, no output
3	<p>Hello, <%= name %>!</p>	<%= %>	Run Ruby, insert output	<p>Hello, Alice!</p>
4	End of template	None	Stop processing

💡 Reached end of template, all lines processed

Variable Tracker

Variable	Start	After Step 2	Final
name	undefined	"Alice"	"Alice"

Key Moments - 2 Insights

Why does <% %> not produce visible output but <%= %> does?

Because <% %> runs Ruby code without inserting anything into HTML, while <%= %> runs Ruby and inserts the result into the output, as shown in steps 2 and 3 of the execution_table.

What happens if you put Ruby code outside ERB tags?

Ruby code outside ERB tags is treated as plain text and output as is, not executed. ERB only runs code inside <% %> or <%= %> tags.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output after step 2?

A "" (empty string)

B "Alice"

C <p>Hello, Alice!</p>

D <h1>Welcome</h1>

💡 Hint

Check the Output Produced column for step 2 in execution_table

At which step does the variable 'name' get assigned a value?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the Action column in execution_table where Ruby code runs

If you change <%= name %> to <% name %> in line 3, what changes in the output?

A The name 'Alice' will still appear in the output

B Nothing will be output for that part

C An error will occur

D The whole line will be removed

💡 Hint

Compare the difference between <%= %> and <% %> tags in execution_table

Concept Snapshot

ERB template syntax:
- <% code %> runs Ruby code, no output
- <%= code %> runs Ruby and inserts output
- Lines without tags output as HTML
- Used to mix Ruby logic with HTML
- Output builds line by line as template processes

Full Transcript

ERB templates mix Ruby code with HTML. The template reads each line. If it finds <% %> tags, it runs Ruby code without output. If it finds <%= %> tags, it runs Ruby and inserts the result into the HTML output. Lines without tags are output as plain HTML. Variables set inside <% %> can be used later in <%= %> to show values. This process continues line by line until the template ends.

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)