New Syntax for HTML Tag helpers in Rails 5.1

Prathamesh Sonpatki

By Prathamesh Sonpatki

on August 23, 2017

Rails is great at generating HTML using helpers such as content_tag and tag.

1content_tag(:div, , class: "home")
2
3<div class="home">
4</div>

Rails 5.1 has introduced new syntax for this in the form of enhanced tag helper.

Now that same HTML div tag can be generated as follows.

1tag.div class: 'home'
2
3<div class="home">
4</div>

Earlier, the tag type was decided by the positional argument to the content_tag and tag methods but now we can just call the required tag type on the tag method itself.

We can pass the tag body and attributes in the block format as well.

1<%= tag.div class: 'home' do %>
2  Welcome to Home!
3<% end %>
4
5
6<div class="home">
7  Welcome to Home!
8</div>

HTML5 compliant by default

The new tag helper is also HTML 5 compliant by default, such that it respects HTML5 features such as void elements.

Backward compatibility

The old syntax of content_tag and tag methods is still supported but might be deprecated and removed in future versions of Rails.

Stay up to date with our blogs. Sign up for our newsletter.

We write about Ruby on Rails, ReactJS, React Native, remote work,open source, engineering & design.