V2.2: HTML
This helper provides a range of methods for producing HTML.
tag
Returns a tag builder for building any kind of HTML strings. Chain any method onto tag to produce its HTML tag.
tag.div # => <div></div>
tag.img # => <img>
Provide content for the tag either as its first positional argument, or as the string returned from its given block.
tag.div("hello") # => <div>hello</div>
tag.div { "hello" } # => <div>hello</div>
tag.div(tag.p("hello")) # => <div><p>hello</p></div>
tag.div { tag.p("hello") } # => <div><p>hello</p></div>
Provide keyword arguments for the tag’s attributes:
tag.div(class: "a") # => <div class="a"></div>
Provide array or hash values for the tag’s attribute to concatenate those values, or include only the keys whose values are truthy:
tag.div(class: ["a", "b"]) # => <div class="a b"></div>
tag.div(class: {"a": true, "b": false}) # => <div class="a"></div>
You can also build custom tags.
tag.custom_tag("hello") # => <custom-tag>hello</custom-tag>
The tag attributes and contents are automatically HTML escaped, unless marked as HTML safe.
tag.p("<script>alert()</script>")
# => <p><script>alert()</script></p>
tag.p(class: "<script>alert()</script>")
# => <p class="<script>alert()</script>"></p>
tag.p("<em>safe content</em>".html_safe)
# => <p><em>safe content</em></p>
When used inside view templates, all given as a block will be concatenated and used as the tag’s contents.
<%= tag.div(id: "el") do %>
<p>Template content can be mixed in.</p>
<%= tag.p("Also nested tag builders.") %>
<% end %>
token_list
Returns a string of space-separated tokens from a range of given arguments. This is intended for building an HTML tag attribute value, such as a list of class names (it is also aliased as class_names).
token_list("foo", "bar")
# => "foo bar"
token_list("foo", "foo bar")
# => "foo bar"
token_list({ foo: true, bar: false })
# => "foo"
token_list(nil, false, 123, "", "foo", { bar: true })
# => "123 foo bar"
link_to
Returns an a anchor tag for the given contents and URL.
This uses the tag builder to prepare the tag, so all tag builder options are accepted.
link_to("Home", "/")
# => <a href="/">Home</a>
link_to("/") { "Home" }
# => <a href="/">Home</a>
link_to("Home", "/", class: "button")
# => <a href="/" class="button">Home</a>
The tag’s contents are automatically escaped, unless marked as HTML safe.
link_to("<script>alert('xss')</script>", "/")
# => <a href="/"><script>alert('xss')</script></a>
link_to("/") { "<script>alert('xss')</script>" }
# => <a href="/"><script>alert('xss')</script></a>