CINXE.COM

<!doctype html> <html dir="ltr" lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Action View Helpers — Ruby on Rails Guides</title> <link rel="stylesheet" type="text/css" href="stylesheets/style-6fc5bf25e695f363fd1dd3d9dbb2f997.css" data-turbo-track="reload"> <link rel="stylesheet" type="text/css" href="stylesheets/print-a87ee66d50ce96bb83ac082f1249fe3e.css" media="print"> <link rel="stylesheet" type="text/css" href="stylesheets/highlight-2794201d063bd2e4dbd0f0874c2a3f6f.css" data-turbo-track="reload"> <link rel="icon" href="images/favicon.ico" sizes="any"> <link rel="apple-touch-icon" href="images/icon.png"> <link rel="canonical" href="https://guides.rubyonrails.org/action_view_helpers.html"> <script src="javascripts/@hotwired--turbo-764f59c7edbeb902a9068c0340dd274e.js" data-turbo-track="reload"></script> <script src="javascripts/clipboard-8b7aed6f069f0cf58eeae353cd2f898b.js" data-turbo-track="reload"></script> <script src="javascripts/guides-751b87e159daf790ddf7e8e88ad8465a.js" data-turbo-track="reload"></script> <meta property="og:title" content="Action View Helpers — Ruby on Rails Guides" /> <meta name="description" content="Action View HelpersAfter reading this guide, you will know: How to format dates, strings, and numbers. How to work with text and tags. How to link to images, videos, stylesheets, etc. How to work with Atom feeds and JavaScript in the views. How to cache, capture, debug and sanitize content." /> <meta property="og:description" content="Action View HelpersAfter reading this guide, you will know: How to format dates, strings, and numbers. How to work with text and tags. How to link to images, videos, stylesheets, etc. How to work with Atom feeds and JavaScript in the views. How to cache, capture, debug and sanitize content." /> <meta property="og:locale" content="en_US" /> <meta property="og:site_name" content="Ruby on Rails Guides" /> <meta property="og:image" content="https://avatars.githubusercontent.com/u/4223" /> <meta property="og:type" content="website" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Noto+Sans+Arabic:wght@100..900&display=swap" rel="stylesheet"> <meta name="theme-color" content="#C81418"> </head> <body dir="ltr" class="guide no-js"> <script> document.body.classList.remove('no-js') </script> <a id="main-skip-link" href="#main" class="skip-link" data-turbo="false"> Skip to main content </a> <div id="mobile-navigation-bar"> <div class="wrapper"> <strong class="more-info-label">More at <a href="https://rubyonrails.org/">rubyonrails.org:</a> </strong> <button type="button" class="js-only red-button more-info-button" id="more-info" aria-controls="more-info-links" aria-expanded="false"> More Ruby on Rails </button> <ul id="more-info-links" class="more-info-links hidden"> <li class="more-info"><a href="https://rubyonrails.org/blog">Blog</a></li> <li class="more-info"><a href="https://guides.rubyonrails.org/">Guides</a></li> <li class="more-info"><a href="https://api.rubyonrails.org/">API</a></li> <li class="more-info"><a href="https://discuss.rubyonrails.org/">Forum</a></li> <li class="more-info"><a href="https://github.com/rails/rails">Contribute on GitHub</a></li> </ul> </div> </div> <header id="page-header"> <div class="wrapper clearfix"> <nav id="feature-nav"> <div class="header-logo"> <a href="index.html" title="Guides home for v8.0.1 Guides">Guides</a> <span id="version-switcher" class="js-only"> <label for="version-switcher-select">Version: <span class="visibly-hidden">pick from the list to go to that Rails version's guides</span></label> <select id="version-switcher-select" class="guides-version"> <option value="https://edgeguides.rubyonrails.org/">Edge</option> <option value="https://guides.rubyonrails.org/v8.0/action_view_helpers.html" selected>8.0</option> <option value="https://guides.rubyonrails.org/v7.2/action_view_helpers.html">7.2</option> <option value="https://guides.rubyonrails.org/v7.1/action_view_helpers.html">7.1</option> <option value="https://guides.rubyonrails.org/v7.0/action_view_helpers.html">7.0</option> <option value="https://guides.rubyonrails.org/v6.1/action_view_helpers.html">6.1</option> <option value="https://guides.rubyonrails.org/v6.0/action_view_helpers.html">6.0</option> <option value="https://guides.rubyonrails.org/v5.2/action_view_helpers.html">5.2</option> <option value="https://guides.rubyonrails.org/v5.1/action_view_helpers.html">5.1</option> <option value="https://guides.rubyonrails.org/v5.0/action_view_helpers.html">5.0</option> <option value="https://guides.rubyonrails.org/v4.2/action_view_helpers.html">4.2</option> <option value="https://guides.rubyonrails.org/v4.1/action_view_helpers.html">4.1</option> <option value="https://guides.rubyonrails.org/v4.0/action_view_helpers.html">4.0</option> <option value="https://guides.rubyonrails.org/v3.2/action_view_helpers.html">3.2</option> <option value="https://guides.rubyonrails.org/v3.1/action_view_helpers.html">3.1</option> <option value="https://guides.rubyonrails.org/v3.0/action_view_helpers.html">3.0</option> <option value="https://guides.rubyonrails.org/v2.3/action_view_helpers.html">2.3</option> </select> </span> </div> <ul class="nav"> <li><a class="nav-item" id="home_nav" href="https://rubyonrails.org/">Home</a></li> <li class="guides-index guides-index-large"> <a href="index.html" id="guides-menu-button" data-aria-controls="guides" data-aria-expanded="false" class="guides-index-item nav-item">Guides Index</a> <div id="guides" class="clearfix" style="display: none;"> <hr /> <dl class="guides-section-container"> <div class="guides-section"> <dt>Start Here</dt> <dd><a href="getting_started.html">Getting Started with Rails</a></dd> <dd><a href="install_ruby_on_rails.html">Install Ruby on Rails</a></dd> </div> <div class="guides-section"> <dt>Models</dt> <dd><a href="active_record_basics.html">Active Record Basics</a></dd> <dd><a href="active_record_migrations.html">Active Record Migrations</a></dd> <dd><a href="active_record_validations.html">Active Record Validations</a></dd> <dd><a href="active_record_callbacks.html">Active Record Callbacks</a></dd> <dd><a href="association_basics.html">Active Record Associations</a></dd> <dd><a href="active_record_querying.html">Active Record Query Interface</a></dd> <dd><a href="active_model_basics.html">Active Model Basics</a></dd> </div> <div class="guides-section"> <dt>Views</dt> <dd><a href="action_view_overview.html">Action View Overview</a></dd> <dd><a href="layouts_and_rendering.html">Layouts and Rendering in Rails</a></dd> <dd><a href="action_view_helpers.html">Action View Helpers</a></dd> <dd><a href="form_helpers.html">Action View Form Helpers</a></dd> </div> <div class="guides-section"> <dt>Controllers</dt> <dd><a href="action_controller_overview.html">Action Controller Overview</a></dd> <dd><a href="action_controller_advanced_topics.html">Action Controller Advanced Topics</a></dd> <dd><a href="routing.html">Rails Routing from the Outside In</a></dd> </div> <div class="guides-section"> <dt>Other Components</dt> <dd><a href="active_support_core_extensions.html">Active Support Core Extensions</a></dd> <dd><a href="action_mailer_basics.html">Action Mailer Basics</a></dd> <dd><a href="action_mailbox_basics.html">Action Mailbox Basics</a></dd> <dd><a href="action_text_overview.html">Action Text Overview</a></dd> <dd><a href="active_job_basics.html">Active Job Basics</a></dd> <dd><a href="active_storage_overview.html">Active Storage Overview</a></dd> <dd><a href="action_cable_overview.html">Action Cable Overview</a></dd> </div> <div class="guides-section"> <dt>Digging Deeper</dt> <dd><a href="i18n.html">Rails Internationalization (I18n) API</a></dd> <dd><a href="testing.html">Testing Rails Applications</a></dd> <dd><a href="debugging_rails_applications.html">Debugging Rails Applications</a></dd> <dd><a href="configuring.html">Configuring Rails Applications</a></dd> <dd><a href="command_line.html">The Rails Command Line</a></dd> <dd><a href="asset_pipeline.html">The Asset Pipeline</a></dd> <dd><a href="working_with_javascript_in_rails.html">Working with JavaScript in Rails</a></dd> <dd><a href="autoloading_and_reloading_constants.html">Autoloading and Reloading</a></dd> <dd><a href="api_app.html">Using Rails for API-only Applications</a></dd> </div> <div class="guides-section"> <dt>Going to Production</dt> <dd><a href="tuning_performance_for_deployment.html">Tuning Performance for Deployment</a></dd> <dd><a href="caching_with_rails.html">Caching with Rails: An Overview</a></dd> <dd><a href="security.html">Securing Rails Applications</a></dd> <dd><a href="error_reporting.html">Error Reporting in Rails Applications</a></dd> </div> <div class="guides-section"> <dt>Advanced Active Record</dt> <dd><a href="active_record_multiple_databases.html">Multiple Databases</a></dd> <dd><a href="active_record_composite_primary_keys.html">Composite Primary Keys</a></dd> </div> <div class="guides-section"> <dt>Extending Rails</dt> <dd><a href="rails_on_rack.html">Rails on Rack</a></dd> <dd><a href="generators.html">Creating and Customizing Rails Generators & Templates</a></dd> </div> <div class="guides-section"> <dt>Contributing</dt> <dd><a href="contributing_to_ruby_on_rails.html">Contributing to Ruby on Rails</a></dd> <dd><a href="api_documentation_guidelines.html">API Documentation Guidelines</a></dd> <dd><a href="ruby_on_rails_guides_guidelines.html">Guides Guidelines</a></dd> <dd><a href="development_dependencies_install.html">Installing Rails Core Development Dependencies</a></dd> </div> <div class="guides-section"> <dt>Policies</dt> <dd><a href="maintenance_policy.html">Maintenance Policy</a></dd> </div> <div class="guides-section"> <dt>Release Notes</dt> <dd><a href="upgrading_ruby_on_rails.html">Upgrading Ruby on Rails</a></dd> <dd><a href="8_0_release_notes.html">Version 8.0 - November 2024</a></dd> <dd><a href="7_2_release_notes.html">Version 7.2 - August 2024</a></dd> <dd><a href="7_1_release_notes.html">Version 7.1 - October 2023</a></dd> <dd><a href="7_0_release_notes.html">Version 7.0 - December 2021</a></dd> <dd><a href="6_1_release_notes.html">Version 6.1 - December 2020</a></dd> <dd><a href="6_0_release_notes.html">Version 6.0 - August 2019</a></dd> <dd><a href="5_2_release_notes.html">Version 5.2 - April 2018</a></dd> <dd><a href="5_1_release_notes.html">Version 5.1 - April 2017</a></dd> <dd><a href="5_0_release_notes.html">Version 5.0 - June 2016</a></dd> <dd><a href="4_2_release_notes.html">Version 4.2 - December 2014</a></dd> <dd><a href="4_1_release_notes.html">Version 4.1 - April 2014</a></dd> <dd><a href="4_0_release_notes.html">Version 4.0 - June 2013</a></dd> <dd><a href="3_2_release_notes.html">Version 3.2 - January 2012</a></dd> <dd><a href="3_1_release_notes.html">Version 3.1 - August 2011</a></dd> <dd><a href="3_0_release_notes.html">Version 3.0 - August 2010</a></dd> <dd><a href="2_3_release_notes.html">Version 2.3 - March 2009</a></dd> <dd><a href="2_2_release_notes.html">Version 2.2 - November 2008</a></dd> </div> </dl> </div> </li> <li><a class="nav-item" href="contributing_to_ruby_on_rails.html">Contribute</a></li> <li class="guides-index guides-index-small js-only"> <label for="guides-selector"> Navigate to a guide: </label> <select id="guides-selector" class="guides-index-item nav-item"> <option value="index.html">Guides Index</option> <optgroup label="Start Here"> <option value="getting_started.html">Getting Started with Rails</option> <option value="install_ruby_on_rails.html">Install Ruby on Rails</option> </optgroup> <optgroup label="Models"> <option value="active_record_basics.html">Active Record Basics</option> <option value="active_record_migrations.html">Active Record Migrations</option> <option value="active_record_validations.html">Active Record Validations</option> <option value="active_record_callbacks.html">Active Record Callbacks</option> <option value="association_basics.html">Active Record Associations</option> <option value="active_record_querying.html">Active Record Query Interface</option> <option value="active_model_basics.html">Active Model Basics</option> </optgroup> <optgroup label="Views"> <option value="action_view_overview.html">Action View Overview</option> <option value="layouts_and_rendering.html">Layouts and Rendering in Rails</option> <option value="action_view_helpers.html">Action View Helpers</option> <option value="form_helpers.html">Action View Form Helpers</option> </optgroup> <optgroup label="Controllers"> <option value="action_controller_overview.html">Action Controller Overview</option> <option value="action_controller_advanced_topics.html">Action Controller Advanced Topics</option> <option value="routing.html">Rails Routing from the Outside In</option> </optgroup> <optgroup label="Other Components"> <option value="active_support_core_extensions.html">Active Support Core Extensions</option> <option value="action_mailer_basics.html">Action Mailer Basics</option> <option value="action_mailbox_basics.html">Action Mailbox Basics</option> <option value="action_text_overview.html">Action Text Overview</option> <option value="active_job_basics.html">Active Job Basics</option> <option value="active_storage_overview.html">Active Storage Overview</option> <option value="action_cable_overview.html">Action Cable Overview</option> </optgroup> <optgroup label="Digging Deeper"> <option value="i18n.html">Rails Internationalization (I18n) API</option> <option value="testing.html">Testing Rails Applications</option> <option value="debugging_rails_applications.html">Debugging Rails Applications</option> <option value="configuring.html">Configuring Rails Applications</option> <option value="command_line.html">The Rails Command Line</option> <option value="asset_pipeline.html">The Asset Pipeline</option> <option value="working_with_javascript_in_rails.html">Working with JavaScript in Rails</option> <option value="autoloading_and_reloading_constants.html">Autoloading and Reloading</option> <option value="api_app.html">Using Rails for API-only Applications</option> </optgroup> <optgroup label="Going to Production"> <option value="tuning_performance_for_deployment.html">Tuning Performance for Deployment</option> <option value="caching_with_rails.html">Caching with Rails: An Overview</option> <option value="security.html">Securing Rails Applications</option> <option value="error_reporting.html">Error Reporting in Rails Applications</option> </optgroup> <optgroup label="Advanced Active Record"> <option value="active_record_multiple_databases.html">Multiple Databases</option> <option value="active_record_composite_primary_keys.html">Composite Primary Keys</option> </optgroup> <optgroup label="Extending Rails"> <option value="rails_on_rack.html">Rails on Rack</option> <option value="generators.html">Creating and Customizing Rails Generators & Templates</option> </optgroup> <optgroup label="Contributing"> <option value="contributing_to_ruby_on_rails.html">Contributing to Ruby on Rails</option> <option value="api_documentation_guidelines.html">API Documentation Guidelines</option> <option value="ruby_on_rails_guides_guidelines.html">Guides Guidelines</option> <option value="development_dependencies_install.html">Installing Rails Core Development Dependencies</option> </optgroup> <optgroup label="Policies"> <option value="maintenance_policy.html">Maintenance Policy</option> </optgroup> <optgroup label="Release Notes"> <option value="upgrading_ruby_on_rails.html">Upgrading Ruby on Rails</option> <option value="8_0_release_notes.html">Version 8.0 - November 2024</option> <option value="7_2_release_notes.html">Version 7.2 - August 2024</option> <option value="7_1_release_notes.html">Version 7.1 - October 2023</option> <option value="7_0_release_notes.html">Version 7.0 - December 2021</option> <option value="6_1_release_notes.html">Version 6.1 - December 2020</option> <option value="6_0_release_notes.html">Version 6.0 - August 2019</option> <option value="5_2_release_notes.html">Version 5.2 - April 2018</option> <option value="5_1_release_notes.html">Version 5.1 - April 2017</option> <option value="5_0_release_notes.html">Version 5.0 - June 2016</option> <option value="4_2_release_notes.html">Version 4.2 - December 2014</option> <option value="4_1_release_notes.html">Version 4.1 - April 2014</option> <option value="4_0_release_notes.html">Version 4.0 - June 2013</option> <option value="3_2_release_notes.html">Version 3.2 - January 2012</option> <option value="3_1_release_notes.html">Version 3.1 - August 2011</option> <option value="3_0_release_notes.html">Version 3.0 - August 2010</option> <option value="2_3_release_notes.html">Version 2.3 - March 2009</option> <option value="2_2_release_notes.html">Version 2.2 - November 2008</option> </optgroup> </select> </li> </ul> </nav> </div> </header> <hr class="hide" /> <main id="main"> <article> <header id="feature"> <div class="wrapper"> <h1>Action View Helpers</h1><p>After reading this guide, you will know:</p> <ul> <li>How to format dates, strings, and numbers.</li> <li>How to work with text and tags.</li> <li>How to link to images, videos, stylesheets, etc.</li> <li>How to work with Atom feeds and JavaScript in the views.</li> <li>How to cache, capture, debug and sanitize content.</li> </ul> <nav id="column-side" aria-label="Chapter" class="guide-index" data-turbo="false"> <a id="chapter-nav-skip-link" href="#article-body" class="skip-link"> Skip to article body </a> <h2 class="chapter"> <picture aria-hidden="true">  <source srcset="images/icon_book-close-bookmark-1-wht.svg" media="(prefers-color-scheme: dark)" /> <img src="images/icon_book-close-bookmark-1.svg" alt="Chapter Icon" /> </picture> Chapters </h2> <ol class="chapters"> <li><a href="#formatting">Formatting</a> <ul> <li><a href="#dates">Dates</a></li> <li><a href="#numbers">Numbers</a></li> <li><a href="#text">Text</a></li> </ul></li> <li><a href="#forms">Forms</a></li> <li><a href="#navigation">Navigation</a> <ul> <li><a href="#button-to">button_to</a></li> <li><a href="#current-page-questionmark">current_page?</a></li> <li><a href="#link-to">link_to</a></li> <li><a href="#mail-to">mail_to</a></li> <li><a href="#url-for">url_for</a></li> </ul></li> <li><a href="#sanitization">Sanitization</a> <ul> <li><a href="#sanitize">sanitize</a></li> <li><a href="#sanitize-css">sanitize_css</a></li> <li><a href="#strip-links">strip_links</a></li> <li><a href="#strip-tags">strip_tags</a></li> </ul></li> <li><a href="#assets">Assets</a> <ul> <li><a href="#audio-tag">audio_tag</a></li> <li><a href="#auto-discovery-link-tag">auto_discovery_link_tag</a></li> <li><a href="#favicon-link-tag">favicon_link_tag</a></li> <li><a href="#image-tag">image_tag</a></li> <li><a href="#javascript-include-tag">javascript_include_tag</a></li> <li><a href="#picture-tag">picture_tag</a></li> <li><a href="#preload-link-tag">preload_link_tag</a></li> <li><a href="#stylesheet-link-tag">stylesheet_link_tag</a></li> <li><a href="#video-tag">video_tag</a></li> </ul></li> <li><a href="#javascript">JavaScript</a> <ul> <li><a href="#escape-javascript">escape_javascript</a></li> <li><a href="#javascript-tag">javascript_tag</a></li> </ul></li> <li><a href="#alternative-tags">Alternative Tags</a> <ul> <li><a href="#tag">tag</a></li> <li><a href="#token-list">token_list</a></li> </ul></li> <li><a href="#capture-blocks">Capture Blocks</a> <ul> <li><a href="#capture">capture</a></li> <li><a href="#content-for">content_for</a></li> </ul></li> <li><a href="#performance">Performance</a> <ul> <li><a href="#benchmark">benchmark</a></li> <li><a href="#cache">cache</a></li> </ul></li> <li><a href="#miscellaneous">Miscellaneous</a> <ul> <li><a href="#atom-feed">atom_feed</a></li> <li><a href="#debug">debug</a></li> </ul></li> </ol> </nav> </div> </header> <div class="wrapper"> <div id="column-main"> <section id="article-body"> <p>The following outlines <strong>some of the most commonly used helpers</strong> available in Action View. It serves as a good starting point, but reviewing the full <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers.html">API Documentation</a> is also recommended, as it covers all of the helpers in more detail.</p><h2 id="formatting"><a class="anchorlink" href="#formatting" data-turbo="false"><span>1</span> Formatting</a></h2><h3 id="dates"><a class="anchorlink" href="#dates" data-turbo="false"><span>1.1</span> Dates</a></h3><p>These helpers facilitate the display of date and/or time elements as contextual human readable forms.</p><h4 id="distance-of-time-in-words"><a class="anchorlink" href="#distance-of-time-in-words" data-turbo="false"><span>1.1.1</span> distance_of_time_in_words</a></h4><p>Reports the approximate distance in time between two <code>Time</code> or <code>Date</code> objects or integers as seconds. Set <code>include_seconds</code> to true if you want more detailed approximations.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">distance_of_time_in_words</span><span class="p">(</span><span class="no">Time</span><span class="p">.</span><span class="nf">current</span><span class="p">,</span> <span class="mi">15</span><span class="p">.</span><span class="nf">seconds</span><span class="p">.</span><span class="nf">from_now</span><span class="p">)</span> <span class="c1"># => less than a minute</span> <span class="n">distance_of_time_in_words</span><span class="p">(</span><span class="no">Time</span><span class="p">.</span><span class="nf">current</span><span class="p">,</span> <span class="mi">15</span><span class="p">.</span><span class="nf">seconds</span><span class="p">.</span><span class="nf">from_now</span><span class="p">,</span> <span class="ss">include_seconds: </span><span class="kp">true</span><span class="p">)</span> <span class="c1"># => less than 20 seconds</span> </code></pre> <button class="clipboard-button" data-clipboard-text="distance_of_time_in_words(Time.current, 15.seconds.from_now) # => less than a minute distance_of_time_in_words(Time.current, 15.seconds.from_now, include_seconds: true) # => less than 20 seconds ">Copy</button> </div> <div class="interstitial note"><p>We use <code>Time.current</code> instead of <code>Time.now</code> because it returns the current time based on the timezone set in Rails, whereas <code>Time.now</code> returns a Time object based on the server's timezone.</p></div><p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/DateHelper.html#method-i-distance_of_time_in_words"><code>distance_of_time_in_words</code> API Documentation</a> for more information.</p><h4 id="time-ago-in-words"><a class="anchorlink" href="#time-ago-in-words" data-turbo="false"><span>1.1.2</span> time_ago_in_words</a></h4><p>Reports the approximate distance in time between a <code>Time</code> or <code>Date</code> object, or integer as seconds, and <code>Time.current</code>.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">time_ago_in_words</span><span class="p">(</span><span class="mi">3</span><span class="p">.</span><span class="nf">minutes</span><span class="p">.</span><span class="nf">from_now</span><span class="p">)</span> <span class="c1"># => 3 minutes</span> </code></pre> <button class="clipboard-button" data-clipboard-text="time_ago_in_words(3.minutes.from_now) # => 3 minutes ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/DateHelper.html#method-i-time_ago_in_words"><code>time_ago_in_words</code> API Documentation</a> for more information.</p><h3 id="numbers"><a class="anchorlink" href="#numbers" data-turbo="false"><span>1.2</span> Numbers</a></h3><p>A set of methods for converting numbers into formatted strings. Methods are provided for phone numbers, currency, percentage, precision, positional notation, and file size.</p><h4 id="number-to-currency"><a class="anchorlink" href="#number-to-currency" data-turbo="false"><span>1.2.1</span> number_to_currency</a></h4><p>Formats a number into a currency string (e.g., $13.65).</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">number_to_currency</span><span class="p">(</span><span class="mf">1234567890.50</span><span class="p">)</span> <span class="c1"># => $1,234,567,890.50</span> </code></pre> <button class="clipboard-button" data-clipboard-text="number_to_currency(1234567890.50) # => $1,234,567,890.50 ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/NumberHelper.html#method-i-number_to_currency"><code>number_to_currency</code> API Documentation</a> for more information.</p><h4 id="number-to-human"><a class="anchorlink" href="#number-to-human" data-turbo="false"><span>1.2.2</span> number_to_human</a></h4><p>Pretty prints (formats and approximates) a number so it is more readable by users; useful for numbers that can get very large.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">number_to_human</span><span class="p">(</span><span class="mi">1234</span><span class="p">)</span> <span class="c1"># => 1.23 Thousand</span> <span class="n">number_to_human</span><span class="p">(</span><span class="mi">1234567</span><span class="p">)</span> <span class="c1"># => 1.23 Million</span> </code></pre> <button class="clipboard-button" data-clipboard-text="number_to_human(1234) # => 1.23 Thousand number_to_human(1234567) # => 1.23 Million ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/NumberHelper.html#method-i-number_to_human"><code>number_to_human</code> API Documentation</a> for more information.</p><h4 id="number-to-human-size"><a class="anchorlink" href="#number-to-human-size" data-turbo="false"><span>1.2.3</span> number_to_human_size</a></h4><p>Formats the bytes in size into a more understandable representation; useful for reporting file sizes to users.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">number_to_human_size</span><span class="p">(</span><span class="mi">1234</span><span class="p">)</span> <span class="c1"># => 1.21 KB</span> <span class="n">number_to_human_size</span><span class="p">(</span><span class="mi">1234567</span><span class="p">)</span> <span class="c1"># => 1.18 MB</span> </code></pre> <button class="clipboard-button" data-clipboard-text="number_to_human_size(1234) # => 1.21 KB number_to_human_size(1234567) # => 1.18 MB ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/NumberHelper.html#method-i-number_to_human_size"><code>number_to_human_size</code> API Documentation</a> for more information.</p><h4 id="number-to-percentage"><a class="anchorlink" href="#number-to-percentage" data-turbo="false"><span>1.2.4</span> number_to_percentage</a></h4><p>Formats a number as a percentage string.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">number_to_percentage</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="ss">precision: </span><span class="mi">0</span><span class="p">)</span> <span class="c1"># => 100%</span> </code></pre> <button class="clipboard-button" data-clipboard-text="number_to_percentage(100, precision: 0) # => 100% ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/NumberHelper.html#method-i-number_to_percentage"><code>number_to_percentage</code> API Documentation</a> for more information.</p><h4 id="number-to-phone"><a class="anchorlink" href="#number-to-phone" data-turbo="false"><span>1.2.5</span> number_to_phone</a></h4><p>Formats a number into a phone number (US by default).</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">number_to_phone</span><span class="p">(</span><span class="mi">1235551234</span><span class="p">)</span> <span class="c1"># => 123-555-1234</span> </code></pre> <button class="clipboard-button" data-clipboard-text="number_to_phone(1235551234) # => 123-555-1234 ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/NumberHelper.html#method-i-number_to_phone"><code>number_to_phone</code> API Documentation</a> for more information.</p><h4 id="number-with-delimiter"><a class="anchorlink" href="#number-with-delimiter" data-turbo="false"><span>1.2.6</span> number_with_delimiter</a></h4><p>Formats a number with grouped thousands using a delimiter.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">number_with_delimiter</span><span class="p">(</span><span class="mi">12345678</span><span class="p">)</span> <span class="c1"># => 12,345,678</span> </code></pre> <button class="clipboard-button" data-clipboard-text="number_with_delimiter(12345678) # => 12,345,678 ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/NumberHelper.html#method-i-number_with_delimiter"><code>number_with_delimiter</code> API Documentation</a> for more information.</p><h4 id="number-with-precision"><a class="anchorlink" href="#number-with-precision" data-turbo="false"><span>1.2.7</span> number_with_precision</a></h4><p>Formats a number with the specified level of <code>precision</code>, which defaults to 3.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">number_with_precision</span><span class="p">(</span><span class="mf">111.2345</span><span class="p">)</span> <span class="c1"># => 111.235</span> <span class="n">number_with_precision</span><span class="p">(</span><span class="mf">111.2345</span><span class="p">,</span> <span class="ss">precision: </span><span class="mi">2</span><span class="p">)</span> <span class="c1"># => 111.23</span> </code></pre> <button class="clipboard-button" data-clipboard-text="number_with_precision(111.2345) # => 111.235 number_with_precision(111.2345, precision: 2) # => 111.23 ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/NumberHelper.html#method-i-number_with_precision"><code>number_with_precision</code> API Documentation</a> for more information.</p><h3 id="text"><a class="anchorlink" href="#text" data-turbo="false"><span>1.3</span> Text</a></h3><p>A set of methods for filtering, formatting and transforming strings.</p><h4 id="excerpt"><a class="anchorlink" href="#excerpt" data-turbo="false"><span>1.3.1</span> excerpt</a></h4><p>Given a <code>text</code> and a <code>phrase</code>, <code>excerpt</code> searches for and extracts the first occurrence of the <code>phrase</code>, plus the requested surrounding text determined by a <code>radius</code>. An omission marker is prepended/appended if the start/end of the result does not coincide with the start/end of the text.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">excerpt</span><span class="p">(</span><span class="s2">"This is a very beautiful morning"</span><span class="p">,</span> <span class="s2">"very"</span><span class="p">,</span> <span class="ss">separator: </span><span class="s2">" "</span><span class="p">,</span> <span class="ss">radius: </span><span class="mi">1</span><span class="p">)</span> <span class="c1"># => ...a very beautiful...</span> <span class="n">excerpt</span><span class="p">(</span><span class="s2">"This is also an example"</span><span class="p">,</span> <span class="s2">"an"</span><span class="p">,</span> <span class="ss">radius: </span><span class="mi">8</span><span class="p">,</span> <span class="ss">omission: </span><span class="s2">"<chop> "</span><span class="p">)</span> <span class="c1">#=> <chop> is also an example</span> </code></pre> <button class="clipboard-button" data-clipboard-text="excerpt("This is a very beautiful morning", "very", separator: " ", radius: 1) # => ...a very beautiful... excerpt("This is also an example", "an", radius: 8, omission: "<chop> ") #=> <chop> is also an example ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/TextHelper.html#method-i-excerpt"><code>excerpt</code> API Documentation</a> for more information.</p><h4 id="pluralize"><a class="anchorlink" href="#pluralize" data-turbo="false"><span>1.3.2</span> pluralize</a></h4><p>Returns the singular or plural form of a word based on the value of a number.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">pluralize</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="s2">"person"</span><span class="p">)</span> <span class="c1"># => 1 person</span> <span class="n">pluralize</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="s2">"person"</span><span class="p">)</span> <span class="c1"># => 2 people</span> <span class="n">pluralize</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="s2">"person"</span><span class="p">,</span> <span class="ss">plural: </span><span class="s2">"users"</span><span class="p">)</span> <span class="c1"># => 3 users</span> </code></pre> <button class="clipboard-button" data-clipboard-text="pluralize(1, "person") # => 1 person pluralize(2, "person") # => 2 people pluralize(3, "person", plural: "users") # => 3 users ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/TextHelper.html#method-i-pluralize"><code>pluralize</code> API Documentation</a> for more information.</p><h4 id="truncate"><a class="anchorlink" href="#truncate" data-turbo="false"><span>1.3.3</span> truncate</a></h4><p>Truncates a given <code>text</code> to a given <code>length</code>. If the text is truncated, an omission marker will be appended to the result for a total length not exceeding <code>length</code>.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">truncate</span><span class="p">(</span><span class="s2">"Once upon a time in a world far far away"</span><span class="p">)</span> <span class="c1"># => "Once upon a time in a world..."</span> <span class="n">truncate</span><span class="p">(</span><span class="s2">"Once upon a time in a world far far away"</span><span class="p">,</span> <span class="ss">length: </span><span class="mi">17</span><span class="p">)</span> <span class="c1"># => "Once upon a ti..."</span> <span class="n">truncate</span><span class="p">(</span><span class="s2">"one-two-three-four-five"</span><span class="p">,</span> <span class="ss">length: </span><span class="mi">20</span><span class="p">,</span> <span class="ss">separator: </span><span class="s2">"-"</span><span class="p">)</span> <span class="c1"># => "one-two-three..."</span> <span class="n">truncate</span><span class="p">(</span><span class="s2">"And they found that many people were sleeping better."</span><span class="p">,</span> <span class="ss">length: </span><span class="mi">25</span><span class="p">,</span> <span class="ss">omission: </span><span class="s2">"... (continued)"</span><span class="p">)</span> <span class="c1"># => "And they f... (continued)"</span> <span class="n">truncate</span><span class="p">(</span><span class="s2">"<p>Once upon a time in a world far far away</p>"</span><span class="p">,</span> <span class="ss">escape: </span><span class="kp">false</span><span class="p">)</span> <span class="c1"># => "<p>Once upon a time in a wo..."</span> </code></pre> <button class="clipboard-button" data-clipboard-text="truncate("Once upon a time in a world far far away") # => "Once upon a time in a world..." truncate("Once upon a time in a world far far away", length: 17) # => "Once upon a ti..." truncate("one-two-three-four-five", length: 20, separator: "-") # => "one-two-three..." truncate("And they found that many people were sleeping better.", length: 25, omission: "... (continued)") # => "And they f... (continued)" truncate("<p>Once upon a time in a world far far away</p>", escape: false) # => "<p>Once upon a time in a wo..." ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/TextHelper.html#method-i-truncate"><code>truncate</code> API Documentation</a> for more information.</p><h4 id="word-wrap"><a class="anchorlink" href="#word-wrap" data-turbo="false"><span>1.3.4</span> word_wrap</a></h4><p>Wraps the text into lines no longer than <code>line_width</code> width.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">word_wrap</span><span class="p">(</span><span class="s2">"Once upon a time"</span><span class="p">,</span> <span class="ss">line_width: </span><span class="mi">8</span><span class="p">)</span> <span class="c1"># => "Once\nupon a\ntime"</span> </code></pre> <button class="clipboard-button" data-clipboard-text="word_wrap("Once upon a time", line_width: 8) # => "Once\nupon a\ntime" ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/TextHelper.html#method-i-word_wrap"><code>word_wrap</code> API Documentation</a> for more information.</p><h2 id="forms"><a class="anchorlink" href="#forms" data-turbo="false"><span>2</span> Forms</a></h2><p>Form helpers simplify working with models compared to using standard HTML elements alone. They offer a range of methods tailored to generating forms based on your models. Some methods correspond to a specific type of input, such as text fields, password fields, select dropdowns, and more. When a form is submitted, the inputs within the form are grouped into the params object and sent back to the controller.</p><p>You can learn more about form helpers in the <a href="form_helpers.html">Action View Form Helpers Guide</a>.</p><h2 id="navigation"><a class="anchorlink" href="#navigation" data-turbo="false"><span>3</span> Navigation</a></h2><p>A set of methods to build links and URLs that depend on the routing subsystem.</p><h3 id="button-to"><a class="anchorlink" href="#button-to" data-turbo="false"><span>3.1</span> button_to</a></h3><p>Generates a form that submits to the passed URL. The form has a submit button with the value of the <code>name</code>.</p><div class="interstitial code"> <pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">button_to</span> <span class="s2">"Sign in"</span><span class="p">,</span> <span class="n">sign_in_path</span> <span class="cp">%></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<%= button_to "Sign in", sign_in_path %> ">Copy</button> </div> <p>would output the following HTML:</p><div class="interstitial code"> <pre><code class="highlight html"><span class="nt"><form</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">action=</span><span class="s">"/sessions"</span> <span class="na">class=</span><span class="s">"button_to"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"Sign in"</span> <span class="nt">/></span> <span class="nt"></form></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<form method="post" action="/sessions" class="button_to"> <input type="submit" value="Sign in" /> </form> ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to"><code>button_to</code> API Documentation</a> for more information.</p><h3 id="current-page-questionmark"><a class="anchorlink" href="#current-page-questionmark" data-turbo="false"><span>3.2</span> current_page?</a></h3><p>Returns true if the current request URL matches the given <code>options</code>.</p><div class="interstitial code"> <pre><code class="highlight erb"><span class="cp"><%</span> <span class="k">if</span> <span class="n">current_page?</span><span class="p">(</span><span class="ss">controller: </span><span class="s1">'profiles'</span><span class="p">,</span> <span class="ss">action: </span><span class="s1">'show'</span><span class="p">)</span> <span class="cp">%></span> <span class="nt"><strong></span>Currently on the profile page<span class="nt"></strong></span> <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<% if current_page?(controller: 'profiles', action: 'show') %> <strong>Currently on the profile page</strong> <% end %> ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/UrlHelper.html#method-i-current_page-3F"><code>current_page?</code> API Documentation</a> for more information.</p><h3 id="link-to"><a class="anchorlink" href="#link-to" data-turbo="false"><span>3.3</span> link_to</a></h3><p>Links to a URL derived from <code>url_for</code> under the hood. It's commonly used to create links for RESTful resources, especially when passing models as arguments to <code>link_to</code>.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">link_to</span> <span class="s2">"Profile"</span><span class="p">,</span> <span class="vi">@profile</span> <span class="c1"># => <a href="/profiles/1">Profile</a></span> <span class="n">link_to</span> <span class="s2">"Book"</span><span class="p">,</span> <span class="vi">@book</span> <span class="c1"># given a composite primary key [:author_id, :id]</span> <span class="c1"># => <a href="/books/2_1">Book</a></span> <span class="n">link_to</span> <span class="s2">"Profiles"</span><span class="p">,</span> <span class="n">profiles_path</span> <span class="c1"># => <a href="/profiles">Profiles</a></span> <span class="n">link_to</span> <span class="kp">nil</span><span class="p">,</span> <span class="s2">"https://example.com"</span> <span class="c1"># => <a href="https://example.com">https://example.com</a></span> <span class="n">link_to</span> <span class="s2">"Articles"</span><span class="p">,</span> <span class="n">articles_path</span><span class="p">,</span> <span class="ss">id: </span><span class="s2">"articles"</span><span class="p">,</span> <span class="ss">class: </span><span class="s2">"article__container"</span> <span class="c1"># => <a href="/articles" class="article__container" id="articles">Articles</a></span> </code></pre> <button class="clipboard-button" data-clipboard-text="link_to "Profile", @profile # => <a href="/profiles/1">Profile</a> link_to "Book", @book # given a composite primary key [:author_id, :id] # => <a href="/books/2_1">Book</a> link_to "Profiles", profiles_path # => <a href="/profiles">Profiles</a> link_to nil, "https://example.com" # => <a href="https://example.com">https://example.com</a> link_to "Articles", articles_path, id: "articles", class: "article__container" # => <a href="/articles" class="article__container" id="articles">Articles</a> ">Copy</button> </div> <p>You can use a block if your link target can't fit in the name parameter.</p><div class="interstitial code"> <pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">link_to</span> <span class="vi">@profile</span> <span class="k">do</span> <span class="cp">%></span> <span class="nt"><strong></span><span class="cp"><%=</span> <span class="vi">@profile</span><span class="p">.</span><span class="nf">name</span> <span class="cp">%></span><span class="nt"></strong></span> -- <span class="nt"><span></span>Check it out!<span class="nt"></span></span> <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<%= link_to @profile do %> <strong><%= @profile.name %></strong> -- <span>Check it out!</span> <% end %> ">Copy</button> </div> <p>It would output the following HTML:</p><div class="interstitial code"> <pre><code class="highlight html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"/profiles/1"</span><span class="nt">></span> <span class="nt"><strong></span>David<span class="nt"></strong></span> -- <span class="nt"><span></span>Check it out!<span class="nt"></span></span> <span class="nt"></a></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<a href="/profiles/1"> <strong>David</strong> -- <span>Check it out!</span> </a> ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to"><code>link_to</code> API Documentation</a> for more information.</p><h3 id="mail-to"><a class="anchorlink" href="#mail-to" data-turbo="false"><span>3.4</span> mail_to</a></h3><p>Generates a <code>mailto</code> link tag to the specified email address. You can also specify the link text, additional HTML options, and whether to encode the email address.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">mail_to</span> <span class="s2">"john_doe@gmail.com"</span> <span class="c1"># => <a href="mailto:john_doe@gmail.com">john_doe@gmail.com</a></span> <span class="n">mail_to</span> <span class="s2">"me@john_doe.com"</span><span class="p">,</span> <span class="ss">cc: </span><span class="s2">"me@jane_doe.com"</span><span class="p">,</span> <span class="ss">subject: </span><span class="s2">"This is an example email"</span> <span class="c1"># => <a href="mailto:"me@john_doe.com?cc=me@jane_doe.com&subject=This%20is%20an%20example%20email">"me@john_doe.com</a></span> </code></pre> <button class="clipboard-button" data-clipboard-text="mail_to "john_doe@gmail.com" # => <a href="mailto:john_doe@gmail.com">john_doe@gmail.com</a> mail_to "me@john_doe.com", cc: "me@jane_doe.com", subject: "This is an example email" # => <a href="mailto:"me@john_doe.com?cc=me@jane_doe.com&subject=This%20is%20an%20example%20email">"me@john_doe.com</a> ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/UrlHelper.html#method-i-mail_to"><code>mail_to</code> API Documentation</a> for more information.</p><h3 id="url-for"><a class="anchorlink" href="#url-for" data-turbo="false"><span>3.5</span> url_for</a></h3><p>Returns the URL for the set of <code>options</code> provided.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">url_for</span> <span class="vi">@profile</span> <span class="c1"># => /profiles/1</span> <span class="n">url_for</span> <span class="p">[</span> <span class="vi">@hotel</span><span class="p">,</span> <span class="vi">@booking</span><span class="p">,</span> <span class="ss">page: </span><span class="mi">2</span><span class="p">,</span> <span class="ss">line: </span><span class="mi">3</span> <span class="p">]</span> <span class="c1"># => /hotels/1/bookings/1?line=3&page=2</span> <span class="n">url_for</span> <span class="vi">@post</span> <span class="c1"># given a composite primary key [:blog_id, :id]</span> <span class="c1"># => /posts/1_2</span> </code></pre> <button class="clipboard-button" data-clipboard-text="url_for @profile # => /profiles/1 url_for [ @hotel, @booking, page: 2, line: 3 ] # => /hotels/1/bookings/1?line=3&page=2 url_for @post # given a composite primary key [:blog_id, :id] # => /posts/1_2 ">Copy</button> </div> <h2 id="sanitization"><a class="anchorlink" href="#sanitization" data-turbo="false"><span>4</span> Sanitization</a></h2><p>A set of methods for scrubbing text of undesired HTML elements. The helpers are particularly useful for helping to ensure that only safe and valid HTML/CSS is rendered. It can also be useful to prevent XSS attacks by escaping or removing potentially malicious content from user input before rendering it in your views.</p><p>This functionality is powered internally by the <a href="https://github.com/rails/rails-html-sanitizer">rails-html-sanitizer</a> gem.</p><h3 id="sanitize"><a class="anchorlink" href="#sanitize" data-turbo="false"><span>4.1</span> sanitize</a></h3><p>The <code>sanitize</code> method will HTML encode all tags and strip all attributes that aren't specifically allowed.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">sanitize</span> <span class="vi">@article</span><span class="p">.</span><span class="nf">body</span> </code></pre> <button class="clipboard-button" data-clipboard-text="sanitize @article.body ">Copy</button> </div> <p>If either the <code>:attributes</code> or <code>:tags</code> options are passed, only the mentioned attributes and tags are allowed and nothing else.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">sanitize</span> <span class="vi">@article</span><span class="p">.</span><span class="nf">body</span><span class="p">,</span> <span class="ss">tags: </span><span class="sx">%w(table tr td)</span><span class="p">,</span> <span class="ss">attributes: </span><span class="sx">%w(id class style)</span> </code></pre> <button class="clipboard-button" data-clipboard-text="sanitize @article.body, tags: %w(table tr td), attributes: %w(id class style) ">Copy</button> </div> <p>To change defaults for multiple uses, for example, adding table tags to the default:</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="c1"># config/application.rb</span> <span class="k">class</span> <span class="nc">Application</span> <span class="o"><</span> <span class="no">Rails</span><span class="o">::</span><span class="no">Application</span> <span class="n">config</span><span class="p">.</span><span class="nf">action_view</span><span class="p">.</span><span class="nf">sanitized_allowed_tags</span> <span class="o">=</span> <span class="sx">%w(table tr td)</span> <span class="k">end</span> </code></pre> <button class="clipboard-button" data-clipboard-text="class Application < Rails::Application config.action_view.sanitized_allowed_tags = %w(table tr td) end ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/SanitizeHelper.html#method-i-sanitize"><code>sanitize</code> API Documentation</a> for more information.</p><h3 id="sanitize-css"><a class="anchorlink" href="#sanitize-css" data-turbo="false"><span>4.2</span> sanitize_css</a></h3><p>Sanitizes a block of CSS code, particularly when it comes across a style attribute in HTML content. <code>sanitize_css</code> is particularly useful when dealing with user-generated content or dynamic content that includes style attributes.</p><p>The <code>sanitize_css</code> method below will remove the styles that are not allowed.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">sanitize_css</span><span class="p">(</span><span class="s2">"background-color: red; color: white; font-size: 16px;"</span><span class="p">)</span> </code></pre> <button class="clipboard-button" data-clipboard-text="sanitize_css("background-color: red; color: white; font-size: 16px;") ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/SanitizeHelper.html#method-i-sanitize_css"><code>sanitize_css</code> API Documentation</a> for more information.</p><h3 id="strip-links"><a class="anchorlink" href="#strip-links" data-turbo="false"><span>4.3</span> strip_links</a></h3><p>Strips all link tags from text leaving just the link text.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">strip_links</span><span class="p">(</span><span class="s2">"<a href='https://rubyonrails.org'>Ruby on Rails</a>"</span><span class="p">)</span> <span class="c1"># => Ruby on Rails</span> <span class="n">strip_links</span><span class="p">(</span><span class="s2">"emails to <a href='mailto:me@email.com'>me@email.com</a>."</span><span class="p">)</span> <span class="c1"># => emails to me@email.com.</span> <span class="n">strip_links</span><span class="p">(</span><span class="s2">"Blog: <a href='http://myblog.com/'>Visit</a>."</span><span class="p">)</span> <span class="c1"># => Blog: Visit.</span> </code></pre> <button class="clipboard-button" data-clipboard-text="strip_links("<a href='https://rubyonrails.org'>Ruby on Rails</a>") # => Ruby on Rails strip_links("emails to <a href='mailto:me@email.com'>me@email.com</a>.") # => emails to me@email.com. strip_links("Blog: <a href='http://myblog.com/'>Visit</a>.") # => Blog: Visit. ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/SanitizeHelper.html#method-i-strip_links"><code>strip_links</code> API Documentation</a> for more information.</p><h3 id="strip-tags"><a class="anchorlink" href="#strip-tags" data-turbo="false"><span>4.4</span> strip_tags</a></h3><p>Strips all HTML tags from the HTML, including comments and special characters.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">strip_tags</span><span class="p">(</span><span class="s2">"Strip <i>these</i> tags!"</span><span class="p">)</span> <span class="c1"># => Strip these tags!</span> <span class="n">strip_tags</span><span class="p">(</span><span class="s2">"<b>Bold</b> no more! <a href='more.html'>See more</a>"</span><span class="p">)</span> <span class="c1"># => Bold no more! See more</span> <span class="n">strip_links</span><span class="p">(</span><span class="s1">'<<a href="https://example.org">malformed & link</a>'</span><span class="p">)</span> <span class="c1"># => &lt;malformed &amp; link</span> </code></pre> <button class="clipboard-button" data-clipboard-text="strip_tags("Strip <i>these</i> tags!") # => Strip these tags! strip_tags("<b>Bold</b> no more! <a href='more.html'>See more</a>") # => Bold no more! See more strip_links('<<a href="https://example.org">malformed & link</a>') # => &lt;malformed &amp; link ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/SanitizeHelper.html#method-i-strip_tags"><code>strip_tags</code> API Documentation</a> for more information.</p><h2 id="assets"><a class="anchorlink" href="#assets" data-turbo="false"><span>5</span> Assets</a></h2><p>A set of methods for generating HTML that links views to assets such as images, JavaScript files, stylesheets, and feeds.</p><p>By default, Rails links to these assets on the current host in the public folder, but you can direct Rails to link to assets from a dedicated assets server by setting <a href="configuring.html#config-asset-host"><code>config.asset_host</code></a> in the application configuration, typically in <code>config/environments/production.rb</code>.</p><p>For example, let's say your asset host is <code>assets.example.com</code>:</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">config</span><span class="p">.</span><span class="nf">asset_host</span> <span class="o">=</span> <span class="s2">"assets.example.com"</span> </code></pre> <button class="clipboard-button" data-clipboard-text="config.asset_host = "assets.example.com" ">Copy</button> </div> <p>then the corresponding URL for an <code>image_tag</code> would be:</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">image_tag</span><span class="p">(</span><span class="s2">"rails.png"</span><span class="p">)</span> <span class="c1"># => <img src="//assets.example.com/images/rails.png" /></span> </code></pre> <button class="clipboard-button" data-clipboard-text="image_tag("rails.png") # => <img src="//assets.example.com/images/rails.png" /> ">Copy</button> </div> <h3 id="audio-tag"><a class="anchorlink" href="#audio-tag" data-turbo="false"><span>5.1</span> audio_tag</a></h3><p>Generates an HTML audio tag with source(s), either as a single tag for a string source or nested source tags within an array for multiple sources. The <code>sources</code> can be full paths, files in your public audios directory, or <a href="active_storage_overview.html">Active Storage attachments</a>.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">audio_tag</span><span class="p">(</span><span class="s2">"sound"</span><span class="p">)</span> <span class="c1"># => <audio src="/audios/sound"></audio></span> <span class="n">audio_tag</span><span class="p">(</span><span class="s2">"sound.wav"</span><span class="p">,</span> <span class="s2">"sound.mid"</span><span class="p">)</span> <span class="c1"># => <audio><source src="/audios/sound.wav" /><source src="/audios/sound.mid" /></audio></span> <span class="n">audio_tag</span><span class="p">(</span><span class="s2">"sound"</span><span class="p">,</span> <span class="ss">controls: </span><span class="kp">true</span><span class="p">)</span> <span class="c1"># => <audio controls="controls" src="/audios/sound"></audio></span> </code></pre> <button class="clipboard-button" data-clipboard-text="audio_tag("sound") # => <audio src="/audios/sound"></audio> audio_tag("sound.wav", "sound.mid") # => <audio><source src="/audios/sound.wav" /><source src="/audios/sound.mid" /></audio> audio_tag("sound", controls: true) # => <audio controls="controls" src="/audios/sound"></audio> ">Copy</button> </div> <div class="interstitial info"><p>Internally, <code>audio_tag</code> uses <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-audio_path"><code>audio_path</code> from the AssetUrlHelpers</a> to build the audio path.</p></div><p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetTagHelper.html#method-i-audio_tag"><code>audio_tag</code> API Documentation</a> for more information.</p><h3 id="auto-discovery-link-tag"><a class="anchorlink" href="#auto-discovery-link-tag" data-turbo="false"><span>5.2</span> auto_discovery_link_tag</a></h3><p>Returns a link tag that browsers and feed readers can use to auto-detect an RSS, Atom, or JSON feed.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">auto_discovery_link_tag</span><span class="p">(</span><span class="ss">:rss</span><span class="p">,</span> <span class="s2">"http://www.example.com/feed.rss"</span><span class="p">,</span> <span class="p">{</span> <span class="ss">title: </span><span class="s2">"RSS Feed"</span> <span class="p">})</span> <span class="c1"># => <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="http://www.example.com/feed.rss" /></span> </code></pre> <button class="clipboard-button" data-clipboard-text="auto_discovery_link_tag(:rss, "http://www.example.com/feed.rss", { title: "RSS Feed" }) # => <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="http://www.example.com/feed.rss" /> ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetTagHelper.html#method-i-auto_discovery_link_tag"><code>auto_discovery_link_tag</code> API Documentation</a> for more information.</p><h3 id="favicon-link-tag"><a class="anchorlink" href="#favicon-link-tag" data-turbo="false"><span>5.3</span> favicon_link_tag</a></h3><p>Returns a link tag for a favicon managed by the asset pipeline. The <code>source</code> can be a full path or a file that exists in your assets directory.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">favicon_link_tag</span> <span class="c1"># => <link href="/assets/favicon.ico" rel="icon" type="image/x-icon" /></span> </code></pre> <button class="clipboard-button" data-clipboard-text="favicon_link_tag # => <link href="/assets/favicon.ico" rel="icon" type="image/x-icon" /> ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetTagHelper.html#method-i-favicon_link_tag"><code>favicon_link_tag</code> API Documentation</a> for more information.</p><h3 id="image-tag"><a class="anchorlink" href="#image-tag" data-turbo="false"><span>5.4</span> image_tag</a></h3><p>Returns an HTML image tag for the source. The <code>source</code> can be a full path or a file that exists in your <code>app/assets/images</code> directory.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">image_tag</span><span class="p">(</span><span class="s2">"icon.png"</span><span class="p">)</span> <span class="c1"># => <img src="/assets/icon.png" /></span> <span class="n">image_tag</span><span class="p">(</span><span class="s2">"icon.png"</span><span class="p">,</span> <span class="ss">size: </span><span class="s2">"16x10"</span><span class="p">,</span> <span class="ss">alt: </span><span class="s2">"Edit Article"</span><span class="p">)</span> <span class="c1"># => <img src="/assets/icon.png" width="16" height="10" alt="Edit Article" /></span> </code></pre> <button class="clipboard-button" data-clipboard-text="image_tag("icon.png") # => <img src="/assets/icon.png" /> image_tag("icon.png", size: "16x10", alt: "Edit Article") # => <img src="/assets/icon.png" width="16" height="10" alt="Edit Article" /> ">Copy</button> </div> <div class="interstitial info"><p>Internally, <code>image_tag</code> uses <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-image_path"><code>image_path</code> from the AssetUrlHelpers</a> to build the image path.</p></div><p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetTagHelper.html#method-i-image_tag"><code>image_tag</code> API Documentation</a> for more information.</p><h3 id="javascript-include-tag"><a class="anchorlink" href="#javascript-include-tag" data-turbo="false"><span>5.5</span> javascript_include_tag</a></h3><p>Returns an HTML script tag for each of the sources provided. You can pass in the filename (<code>.js</code> extension is optional) of JavaScript files that exist in your <code>app/assets/javascripts</code> directory for inclusion into the current page, or you can pass the full path relative to your document root.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">javascript_include_tag</span><span class="p">(</span><span class="s2">"common"</span><span class="p">)</span> <span class="c1"># => <script src="/assets/common.js"></script></span> <span class="n">javascript_include_tag</span><span class="p">(</span><span class="s2">"common"</span><span class="p">,</span> <span class="ss">async: </span><span class="kp">true</span><span class="p">)</span> <span class="c1"># => <script src="/assets/common.js" async="async"></script></span> </code></pre> <button class="clipboard-button" data-clipboard-text="javascript_include_tag("common") # => <script src="/assets/common.js"></script> javascript_include_tag("common", async: true) # => <script src="/assets/common.js" async="async"></script> ">Copy</button> </div> <p>Some of the most common attributes are <code>async</code> and <code>defer</code>, where <code>async</code> will allow the script to be loaded in parallel to be parsed and evaluated as soon as possible, and <code>defer</code> will indicate that the script is meant to be executed after the document has been parsed.</p><div class="interstitial info"><p>Internally, <code>javascript_include_tag</code> uses <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-javascript_path"><code>javascript_path</code> from the AssetUrlHelpers</a> to build the script path.</p></div><p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetTagHelper.html#method-i-javascript_include_tag"><code>javascript_include_tag</code> API Documentation</a> for more information.</p><h3 id="picture-tag"><a class="anchorlink" href="#picture-tag" data-turbo="false"><span>5.6</span> picture_tag</a></h3><p>Returns an HTML picture tag for the source. It supports passing a String, an Array, or a Block.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">picture_tag</span><span class="p">(</span><span class="s2">"icon.webp"</span><span class="p">,</span> <span class="s2">"icon.png"</span><span class="p">)</span> </code></pre> <button class="clipboard-button" data-clipboard-text="picture_tag("icon.webp", "icon.png") ">Copy</button> </div> <p>This generates the following HTML:</p><div class="interstitial code"> <pre><code class="highlight html"><span class="nt"><picture></span> <span class="nt"><source</span> <span class="na">srcset=</span><span class="s">"/assets/icon.webp"</span> <span class="na">type=</span><span class="s">"image/webp"</span> <span class="nt">/></span> <span class="nt"><source</span> <span class="na">srcset=</span><span class="s">"/assets/icon.png"</span> <span class="na">type=</span><span class="s">"image/png"</span> <span class="nt">/></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"/assets/icon.png"</span> <span class="nt">/></span> <span class="nt"></picture></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<picture> <source srcset="/assets/icon.webp" type="image/webp" /> <source srcset="/assets/icon.png" type="image/png" /> <img src="/assets/icon.png" /> </picture> ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetTagHelper.html#method-i-picture_tag"><code>picture_tag</code> API Documentation</a> for more information.</p><h3 id="preload-link-tag"><a class="anchorlink" href="#preload-link-tag" data-turbo="false"><span>5.7</span> preload_link_tag</a></h3><p>Returns a link tag that browsers can use to preload the source. The source can be the path of a resource managed by the asset pipeline, a full path, or a URI.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">preload_link_tag</span><span class="p">(</span><span class="s2">"application.css"</span><span class="p">)</span> <span class="c1"># => <link rel="preload" href="/assets/application.css" as="style" type="text/css" /></span> </code></pre> <button class="clipboard-button" data-clipboard-text="preload_link_tag("application.css") # => <link rel="preload" href="/assets/application.css" as="style" type="text/css" /> ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetTagHelper.html#method-i-preload_link_tag"><code>preload_link_tag</code> API Documentation</a> for more information.</p><h3 id="stylesheet-link-tag"><a class="anchorlink" href="#stylesheet-link-tag" data-turbo="false"><span>5.8</span> stylesheet_link_tag</a></h3><p>Returns a stylesheet link tag for the sources specified as arguments. If you don't specify an extension, <code>.css</code> will be appended automatically.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">stylesheet_link_tag</span><span class="p">(</span><span class="s2">"application"</span><span class="p">)</span> <span class="c1"># => <link href="/assets/application.css" rel="stylesheet" /></span> <span class="n">stylesheet_link_tag</span><span class="p">(</span><span class="s2">"application"</span><span class="p">,</span> <span class="ss">media: </span><span class="s2">"all"</span><span class="p">)</span> <span class="c1"># => <link href="/assets/application.css" media="all" rel="stylesheet" /></span> </code></pre> <button class="clipboard-button" data-clipboard-text="stylesheet_link_tag("application") # => <link href="/assets/application.css" rel="stylesheet" /> stylesheet_link_tag("application", media: "all") # => <link href="/assets/application.css" media="all" rel="stylesheet" /> ">Copy</button> </div> <p><code>media</code> is used to specify the media type for the link. The most common media types are <code>all</code>, <code>screen</code>, <code>print</code>, and <code>speech</code>.</p><div class="interstitial info"><p>Internally, <code>stylesheet_link_tag</code> uses <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-stylesheet_path"><code>stylesheet_path</code> from the AssetUrlHelpers</a> to build the stylesheet path.</p></div><p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetTagHelper.html#method-i-stylesheet_link_tag"><code>stylesheet_link_tag</code> API Documentation</a> for more information.</p><h3 id="video-tag"><a class="anchorlink" href="#video-tag" data-turbo="false"><span>5.9</span> video_tag</a></h3><p>Generate an HTML video tag with source(s), either as a single tag for a string source or nested source tags within an array for multiple sources. The <code>sources</code> can be full paths, files in your public videos directory, or Active Storage attachments.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">video_tag</span><span class="p">(</span><span class="s2">"trailer"</span><span class="p">)</span> <span class="c1"># => <video src="/videos/trailer"></video></span> <span class="n">video_tag</span><span class="p">([</span><span class="s2">"trailer.ogg"</span><span class="p">,</span> <span class="s2">"trailer.flv"</span><span class="p">])</span> <span class="c1"># => <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video></span> <span class="n">video_tag</span><span class="p">(</span><span class="s2">"trailer"</span><span class="p">,</span> <span class="ss">controls: </span><span class="kp">true</span><span class="p">)</span> <span class="c1"># => <video controls="controls" src="/videos/trailer"></video></span> </code></pre> <button class="clipboard-button" data-clipboard-text="video_tag("trailer") # => <video src="/videos/trailer"></video> video_tag(["trailer.ogg", "trailer.flv"]) # => <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video> video_tag("trailer", controls: true) # => <video controls="controls" src="/videos/trailer"></video> ">Copy</button> </div> <div class="interstitial info"><p>Internally, <code>video_tag</code> uses <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-video_path"><code>video_path</code> from the AssetUrlHelpers</a> to build the video path.</p></div><p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AssetTagHelper.html#method-i-video_tag"><code>video_tag</code> API Documentation</a> for more information.</p><h2 id="javascript"><a class="anchorlink" href="#javascript" data-turbo="false"><span>6</span> JavaScript</a></h2><p>A set of methods for working with JavaScript in your views.</p><h3 id="escape-javascript"><a class="anchorlink" href="#escape-javascript" data-turbo="false"><span>6.1</span> escape_javascript</a></h3><p>Escapes carriage returns and single and double quotes for JavaScript segments. You would use this method to take a string of text and make sure that it doesn’t contain any invalid characters when the browser tries to parse it.</p><p>For example, if you have a partial with a greeting that contains double quotes, you can escape the greeting to use in a JavaScript alert.</p><div class="interstitial code"> <pre><code class="highlight erb"><span class="c"><%# app/views/users/greeting.html.erb %></span> My name is <span class="cp"><%=</span> <span class="n">current_user</span><span class="p">.</span><span class="nf">name</span> <span class="cp">%></span>, and I'm here to say "Welcome to our website!" </code></pre> <button class="clipboard-button" data-clipboard-text="My name is <%= current_user.name %>, and I'm here to say "Welcome to our website!" ">Copy</button> </div> <div class="interstitial code"> <pre><code class="highlight erb"><span class="nt"><script></span> <span class="kd">var</span> <span class="nx">greeting</span> <span class="o">=</span> <span class="dl">"</span><span class="cp"><%=</span> <span class="n">escape_javascript</span> <span class="n">render</span><span class="p">(</span><span class="s1">'users/greeting'</span><span class="p">)</span> <span class="cp">%></span><span class="dl">"</span><span class="p">;</span> <span class="nf">alert</span><span class="p">(</span><span class="s2">`Hello, </span><span class="p">${</span><span class="nx">greeting</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span> <span class="nt"></script></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<script> var greeting = "<%= escape_javascript render('users/greeting') %>"; alert(`Hello, ${greeting}`); </script> ">Copy</button> </div> <p>This will escape the quotes correctly and display the greeting in an alert box.</p><p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/JavaScriptHelper.html#method-i-escape_javascript"><code>escape_javascript</code> API Documentation</a> for more information.</p><h3 id="javascript-tag"><a class="anchorlink" href="#javascript-tag" data-turbo="false"><span>6.2</span> javascript_tag</a></h3><p>Returns a JavaScript tag wrapping the provided code. You can pass a hash of options to control the behavior of the <code><script></code> tag.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">javascript_tag</span><span class="p">(</span><span class="s2">"alert('All is good')"</span><span class="p">,</span> <span class="ss">type: </span><span class="s2">"application/javascript"</span><span class="p">)</span> </code></pre> <button class="clipboard-button" data-clipboard-text="javascript_tag("alert('All is good')", type: "application/javascript") ">Copy</button> </div> <div class="interstitial code"> <pre><code class="highlight html"><span class="nt"><script </span><span class="na">type=</span><span class="s">"application/javascript"</span><span class="nt">></span> <span class="c1">//</span><span class="o"><!</span><span class="p">[</span><span class="nx">CDATA</span><span class="p">[</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">All is good</span><span class="dl">'</span><span class="p">)</span> <span class="c1">//]]></span> <span class="nt"></script></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<script type="application/javascript"> //<![CDATA[ alert('All is good') //]]> </script> ">Copy</button> </div> <p>Instead of passing the content as an argument, you can also use a block.</p><div class="interstitial code"> <pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">javascript_tag</span> <span class="ss">type: </span><span class="s2">"application/javascript"</span> <span class="k">do</span> <span class="cp">%></span> alert("Welcome to my app!") <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<%= javascript_tag type: "application/javascript" do %> alert("Welcome to my app!") <% end %> ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/JavaScriptHelper.html#method-i-javascript_tag"><code>javascript_tag</code> API Documentation</a> for more information.</p><h2 id="alternative-tags"><a class="anchorlink" href="#alternative-tags" data-turbo="false"><span>7</span> Alternative Tags</a></h2><p>A set of methods to generate HTML tags programmatically.</p><h3 id="tag"><a class="anchorlink" href="#tag" data-turbo="false"><span>7.1</span> tag</a></h3><p>Generates a standalone HTML tag with the given <code>name</code> and <code>options</code>.</p><p>Every tag can be built with:</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">tag</span><span class="p">.</span><span class="nf">some_tag_name</span><span class="p">(</span><span class="n">optional</span> <span class="n">content</span><span class="p">,</span> <span class="n">options</span><span class="p">)</span> </code></pre> <button class="clipboard-button" data-clipboard-text="tag.some_tag_name(optional content, options) ">Copy</button> </div> <p>where tag name can be e.g. <code>br</code>, <code>div</code>, <code>section</code>, <code>article</code>, or any tag really.</p><p>For example, here are some common uses:</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">tag</span><span class="p">.</span><span class="nf">h1</span> <span class="s2">"All titles fit to print"</span> <span class="c1"># => <h1>All titles fit to print</h1></span> <span class="n">tag</span><span class="p">.</span><span class="nf">div</span> <span class="s2">"Hello, world!"</span> <span class="c1"># => <div>Hello, world!</div></span> </code></pre> <button class="clipboard-button" data-clipboard-text="tag.h1 "All titles fit to print" # => <h1>All titles fit to print</h1> tag.div "Hello, world!" # => <div>Hello, world!</div> ">Copy</button> </div> <p>Additionally, you can pass options to add attributes to the generated tag.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">tag</span><span class="p">.</span><span class="nf">section</span> <span class="ss">class: </span><span class="sx">%w( kitties puppies )</span> <span class="c1"># => <section class="kitties puppies"></section></span> </code></pre> <button class="clipboard-button" data-clipboard-text="tag.section class: %w( kitties puppies ) # => <section class="kitties puppies"></section> ">Copy</button> </div> <p>In addition, HTML <code>data-*</code> attributes can be passed to the <code>tag</code> helper using the <code>data</code> option, with a hash containing key-value pairs of sub-attributes. The sub-attributes are then converted to <code>data-*</code> attributes that are dasherized in order to work well with JavaScript.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">tag</span><span class="p">.</span><span class="nf">div</span> <span class="ss">data: </span><span class="p">{</span> <span class="ss">user_id: </span><span class="mi">123</span> <span class="p">}</span> <span class="c1"># => <div data-user-id="123"></div></span> </code></pre> <button class="clipboard-button" data-clipboard-text="tag.div data: { user_id: 123 } # => <div data-user-id="123"></div> ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/TagHelper.html#method-i-tag"><code>tag</code> API Documentation</a> for more information.</p><h3 id="token-list"><a class="anchorlink" href="#token-list" data-turbo="false"><span>7.2</span> token_list</a></h3><p>Returns a string of tokens built from the arguments provided. This method is also aliased as <code>class_names</code>.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">token_list</span><span class="p">(</span><span class="s2">"cats"</span><span class="p">,</span> <span class="s2">"dogs"</span><span class="p">)</span> <span class="c1"># => "cats dogs"</span> <span class="n">token_list</span><span class="p">(</span><span class="kp">nil</span><span class="p">,</span> <span class="kp">false</span><span class="p">,</span> <span class="mi">123</span><span class="p">,</span> <span class="s2">""</span><span class="p">,</span> <span class="s2">"foo"</span><span class="p">,</span> <span class="p">{</span> <span class="ss">bar: </span><span class="kp">true</span> <span class="p">})</span> <span class="c1"># => "123 foo bar"</span> <span class="n">mobile</span><span class="p">,</span> <span class="n">alignment</span> <span class="o">=</span> <span class="kp">true</span><span class="p">,</span> <span class="s2">"center"</span> <span class="n">token_list</span><span class="p">(</span><span class="s2">"flex items-</span><span class="si">#{</span><span class="n">alignment</span><span class="si">}</span><span class="s2">"</span><span class="p">,</span> <span class="s2">"flex-col"</span><span class="p">:</span> <span class="n">mobile</span><span class="p">)</span> <span class="c1"># => "flex items-center flex-col"</span> <span class="n">class_names</span><span class="p">(</span><span class="s2">"flex items-</span><span class="si">#{</span><span class="n">alignment</span><span class="si">}</span><span class="s2">"</span><span class="p">,</span> <span class="s2">"flex-col"</span><span class="p">:</span> <span class="n">mobile</span><span class="p">)</span> <span class="c1"># using the alias</span> <span class="c1"># => "flex items-center flex-col"</span> </code></pre> <button class="clipboard-button" data-clipboard-text="token_list("cats", "dogs") # => "cats dogs" token_list(nil, false, 123, "", "foo", { bar: true }) # => "123 foo bar" mobile, alignment = true, "center" token_list("flex items-#{alignment}", "flex-col": mobile) # => "flex items-center flex-col" class_names("flex items-#{alignment}", "flex-col": mobile) # using the alias # => "flex items-center flex-col" ">Copy</button> </div> <h2 id="capture-blocks"><a class="anchorlink" href="#capture-blocks" data-turbo="false"><span>8</span> Capture Blocks</a></h2><p>A set of methods to let you extract generated markup which can be used in other parts of a template or layout file.</p><p>It provides a method to capture blocks into variables through <code>capture</code>, and a way to capture a block of markup for use in a layout through <code>content_for</code>.</p><h3 id="capture"><a class="anchorlink" href="#capture" data-turbo="false"><span>8.1</span> capture</a></h3><p>The <code>capture</code> method allows you to extract part of a template into a variable.</p><div class="interstitial code"> <pre><code class="highlight erb"><span class="cp"><%</span> <span class="vi">@greeting</span> <span class="o">=</span> <span class="n">capture</span> <span class="k">do</span> <span class="cp">%></span> <span class="nt"><p></span>Welcome! The date and time is <span class="cp"><%=</span> <span class="no">Time</span><span class="p">.</span><span class="nf">current</span> <span class="cp">%></span><span class="nt"></p></span> <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<% @greeting = capture do %> <p>Welcome! The date and time is <%= Time.current %></p> <% end %> ">Copy</button> </div> <p>You can then use this variable anywhere in your templates, layouts, or helpers.</p><div class="interstitial code"> <pre><code class="highlight erb"><span class="nt"><html></span> <span class="nt"><head></span> <span class="nt"><title></span>Welcome!<span class="nt"></title></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="cp"><%=</span> <span class="vi">@greeting</span> <span class="cp">%></span> <span class="nt"></body></span> <span class="nt"></html></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<html> <head> <title>Welcome!</title> </head> <body> <%= @greeting %> </body> </html> ">Copy</button> </div> <p>The return of capture is the string generated by the block.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="vi">@greeting</span> <span class="c1"># => "Welcome to my shiny new web page! The date and time is 2018-09-06 11:09:16 -0500"</span> </code></pre> <button class="clipboard-button" data-clipboard-text="@greeting # => "Welcome to my shiny new web page! The date and time is 2018-09-06 11:09:16 -0500" ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/CaptureHelper.html#method-i-capture"><code>capture</code> API Documentation</a> for more information.</p><h3 id="content-for"><a class="anchorlink" href="#content-for" data-turbo="false"><span>8.2</span> content_for</a></h3><p>Calling <code>content_for</code> stores a block of markup in an identifier for later use. You can make subsequent calls to the stored content in other templates, helper modules or the layout by passing the identifier as an argument to <code>yield</code>.</p><p>A common use case is to set the title of a page in a <code>content_for</code> block.</p><p>You define a <code>content_for</code> block in the special page's view, and then you <code>yield</code> it within the layout. For other pages, where the <code>content_for</code> block isn't utilized, it remains empty, resulting in nothing being yielded.</p><div class="interstitial code"> <pre><code class="highlight erb"><span class="c"><%# app/views/users/special_page.html.erb %></span> <span class="cp"><%</span> <span class="n">content_for</span><span class="p">(</span><span class="ss">:html_title</span><span class="p">)</span> <span class="p">{</span> <span class="s2">"Special Page Title"</span> <span class="p">}</span> <span class="cp">%></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<% content_for(:html_title) { "Special Page Title" } %> ">Copy</button> </div> <div class="interstitial code"> <pre><code class="highlight erb"><span class="c"><%# app/views/layouts/application.html.erb %></span> <span class="nt"><html></span> <span class="nt"><head></span> <span class="nt"><title></span><span class="cp"><%=</span> <span class="n">content_for?</span><span class="p">(</span><span class="ss">:html_title</span><span class="p">)</span> <span class="p">?</span> <span class="k">yield</span><span class="p">(</span><span class="ss">:html_title</span><span class="p">)</span> <span class="p">:</span> <span class="s2">"Default Title"</span> <span class="cp">%></span><span class="nt"></title></span> <span class="nt"></head></span> <span class="nt"></html></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<html> <head> <title><%= content_for?(:html_title) ? yield(:html_title) : "Default Title" %></title> </head> </html> ">Copy</button> </div> <p>You'll notice that in the above example, we use the <code>content_for?</code> predicate method to conditionally render a title. This method checks whether any content has been captured yet using <code>content_for</code>, enabling you to adjust parts of your layout based on the content within your views.</p><p>Additionally, you can employ <code>content_for</code> within a helper module.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="c1"># app/helpers/title_helper.rb</span> <span class="k">module</span> <span class="nn">TitleHelper</span> <span class="k">def</span> <span class="nf">html_title</span> <span class="n">content_for</span><span class="p">(</span><span class="ss">:html_title</span><span class="p">)</span> <span class="o">||</span> <span class="s2">"Default Title"</span> <span class="k">end</span> <span class="k">end</span> </code></pre> <button class="clipboard-button" data-clipboard-text="module TitleHelper def html_title content_for(:html_title) || "Default Title" end end ">Copy</button> </div> <p>Now, you can call <code>html_title</code> in your layout to retrieve the content stored in the <code>content_for</code> block. If a <code>content_for</code> block is set on the page being rendered, such as in the case of the <code>special_page</code>, it will display the title. Otherwise, it will display the default text "Default Title".</p><div class="interstitial warning"><p><code>content_for</code> is ignored in caches. So you shouldn’t use it for elements that will be fragment cached.</p></div><div class="interstitial note"><p>You may be thinking what's the difference between <code>capture</code> and <code>content_for</code>? <br><br> <code>capture</code> is used to capture a block of markup in a variable, while <code>content_for</code> is used to store a block of markup in an identifier for later use. Internally <code>content_for</code> actually calls <code>capture</code>. However, the key difference lies in their behavior when invoked multiple times.<br><br> <code>content_for</code> can be called repeatedly, concatenating the blocks it receives for a specific identifier in the order they are provided. Each subsequent call simply adds to what's already stored. In contrast, <code>capture</code> only returns the content of the block, without keeping track of any previous invocations.</p></div><p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/CaptureHelper.html#method-i-content_for"><code>content_for</code> API Documentation</a> for more information.</p><h2 id="performance"><a class="anchorlink" href="#performance" data-turbo="false"><span>9</span> Performance</a></h2><h3 id="benchmark"><a class="anchorlink" href="#benchmark" data-turbo="false"><span>9.1</span> benchmark</a></h3><p>Wrap a <code>benchmark</code> block around expensive operations or possible bottlenecks to get a time reading for the operation.</p><div class="interstitial code"> <pre><code class="highlight erb"><span class="cp"><%</span> <span class="n">benchmark</span> <span class="s2">"Process data files"</span> <span class="k">do</span> <span class="cp">%></span> <span class="cp"><%=</span> <span class="n">expensive_files_operation</span> <span class="cp">%></span> <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<% benchmark "Process data files" do %> <%= expensive_files_operation %> <% end %> ">Copy</button> </div> <p>This would add something like <code>Process data files (0.34523)</code> to the log, which you can then use to compare timings when optimizing your code.</p><div class="interstitial note"><p>This helper is a part of Active Support, and it is also available on controllers, helpers, models, etc.</p></div><p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActiveSupport/Benchmarkable.html#method-i-benchmark"><code>benchmark</code> API Documentation</a> for more information.</p><h3 id="cache"><a class="anchorlink" href="#cache" data-turbo="false"><span>9.2</span> cache</a></h3><p>You can cache fragments of a view rather than an entire action or page. This technique is useful for caching pieces like menus, lists of news topics, static HTML fragments, and so on. It allows a fragment of view logic to be wrapped in a cache block and served out of the cache store when the next request comes in.</p><p>The <code>cache</code> method takes a block that contains the content you wish to cache.</p><p>For example, you could cache the footer of your application layout by wrapping it in a <code>cache</code> block.</p><div class="interstitial code"> <pre><code class="highlight erb"><span class="cp"><%</span> <span class="n">cache</span> <span class="k">do</span> <span class="cp">%></span> <span class="cp"><%=</span> <span class="n">render</span> <span class="s2">"application/footer"</span> <span class="cp">%></span> <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<% cache do %> <%= render "application/footer" %> <% end %> ">Copy</button> </div> <p>You could also cache based on model instances, for example, you can cache each article on a page by passing the <code>article</code> object to the <code>cache</code> method. This would cache each article separately.</p><div class="interstitial code"> <pre><code class="highlight erb"><span class="cp"><%</span> <span class="vi">@articles</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">article</span><span class="o">|</span> <span class="cp">%></span> <span class="cp"><%</span> <span class="n">cache</span> <span class="n">article</span> <span class="k">do</span> <span class="cp">%></span> <span class="cp"><%=</span> <span class="n">render</span> <span class="n">article</span> <span class="cp">%></span> <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<% @articles.each do |article| %> <% cache article do %> <%= render article %> <% end %> <% end %> ">Copy</button> </div> <p>When your application receives its first request to this page, Rails will write a new cache entry with a unique key. A key looks something like this:</p><div class="interstitial code"> <pre><code class="highlight irb"><span class="go">views/articles/index:bea67108094918eeba32cd4a6f786301/articles/1</span> </code></pre> <button class="clipboard-button" data-clipboard-text="">Copy</button> </div> <p>See <a href="caching_with_rails.html#fragment-caching"><code>Fragment Caching</code></a> and the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/CacheHelper.html#method-i-cache"><code>cache</code> API Documentation</a> for more information.</p><h2 id="miscellaneous"><a class="anchorlink" href="#miscellaneous" data-turbo="false"><span>10</span> Miscellaneous</a></h2><h3 id="atom-feed"><a class="anchorlink" href="#atom-feed" data-turbo="false"><span>10.1</span> atom_feed</a></h3><p>Atom Feeds are XML-based file formats used to syndicate content and can be used by users in feed readers to browse content or by search engines to help discover additional information about your site.</p><p>This helper makes building an Atom feed easy, and is mostly used in Builder templates for creating XML. Here's a full usage example:</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="c1"># config/routes.rb</span> <span class="n">resources</span> <span class="ss">:articles</span> </code></pre> <button class="clipboard-button" data-clipboard-text="resources :articles ">Copy</button> </div> <div class="interstitial code"> <pre><code class="highlight ruby"><span class="c1"># app/controllers/articles_controller.rb</span> <span class="k">def</span> <span class="nf">index</span> <span class="vi">@articles</span> <span class="o">=</span> <span class="no">Article</span><span class="p">.</span><span class="nf">all</span> <span class="n">respond_to</span> <span class="k">do</span> <span class="o">|</span><span class="nb">format</span><span class="o">|</span> <span class="nb">format</span><span class="p">.</span><span class="nf">html</span> <span class="nb">format</span><span class="p">.</span><span class="nf">atom</span> <span class="k">end</span> <span class="k">end</span> </code></pre> <button class="clipboard-button" data-clipboard-text="def index @articles = Article.all respond_to do |format| format.html format.atom end end ">Copy</button> </div> <div class="interstitial code"> <pre><code class="highlight ruby"><span class="c1"># app/views/articles/index.atom.builder</span> <span class="n">atom_feed</span> <span class="k">do</span> <span class="o">|</span><span class="n">feed</span><span class="o">|</span> <span class="n">feed</span><span class="p">.</span><span class="nf">title</span><span class="p">(</span><span class="s2">"Articles Index"</span><span class="p">)</span> <span class="n">feed</span><span class="p">.</span><span class="nf">updated</span><span class="p">(</span><span class="vi">@articles</span><span class="p">.</span><span class="nf">first</span><span class="p">.</span><span class="nf">created_at</span><span class="p">)</span> <span class="vi">@articles</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">article</span><span class="o">|</span> <span class="n">feed</span><span class="p">.</span><span class="nf">entry</span><span class="p">(</span><span class="n">article</span><span class="p">)</span> <span class="k">do</span> <span class="o">|</span><span class="n">entry</span><span class="o">|</span> <span class="n">entry</span><span class="p">.</span><span class="nf">title</span><span class="p">(</span><span class="n">article</span><span class="p">.</span><span class="nf">title</span><span class="p">)</span> <span class="n">entry</span><span class="p">.</span><span class="nf">content</span><span class="p">(</span><span class="n">article</span><span class="p">.</span><span class="nf">body</span><span class="p">,</span> <span class="ss">type: </span><span class="s2">"html"</span><span class="p">)</span> <span class="n">entry</span><span class="p">.</span><span class="nf">author</span> <span class="k">do</span> <span class="o">|</span><span class="n">author</span><span class="o">|</span> <span class="n">author</span><span class="p">.</span><span class="nf">name</span><span class="p">(</span><span class="n">article</span><span class="p">.</span><span class="nf">author_name</span><span class="p">)</span> <span class="k">end</span> <span class="k">end</span> <span class="k">end</span> <span class="k">end</span> </code></pre> <button class="clipboard-button" data-clipboard-text="atom_feed do |feed| feed.title("Articles Index") feed.updated(@articles.first.created_at) @articles.each do |article| feed.entry(article) do |entry| entry.title(article.title) entry.content(article.body, type: "html") entry.author do |author| author.name(article.author_name) end end end end ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/AtomFeedHelper.html#method-i-atom_feed"><code>atom_feed</code> API Documentation</a> for more information.</p><h3 id="debug"><a class="anchorlink" href="#debug" data-turbo="false"><span>10.2</span> debug</a></h3><p>Returns a YAML representation of an object wrapped with a <code>pre</code> tag. This creates a very readable way to inspect an object.</p><div class="interstitial code"> <pre><code class="highlight ruby"><span class="n">my_hash</span> <span class="o">=</span> <span class="p">{</span> <span class="s2">"first"</span> <span class="o">=></span> <span class="mi">1</span><span class="p">,</span> <span class="s2">"second"</span> <span class="o">=></span> <span class="s2">"two"</span><span class="p">,</span> <span class="s2">"third"</span> <span class="o">=></span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">]</span> <span class="p">}</span> <span class="n">debug</span><span class="p">(</span><span class="n">my_hash</span><span class="p">)</span> </code></pre> <button class="clipboard-button" data-clipboard-text="my_hash = { "first" => 1, "second" => "two", "third" => [1, 2, 3] } debug(my_hash) ">Copy</button> </div> <div class="interstitial code"> <pre><code class="highlight html"><span class="nt"><pre</span> <span class="na">class=</span><span class="s">"debug_dump"</span><span class="nt">></span>--- first: 1 second: two third: - 1 - 2 - 3 <span class="nt"></pre></span> </code></pre> <button class="clipboard-button" data-clipboard-text="<pre class="debug_dump">--- first: 1 second: two third: - 1 - 2 - 3 </pre> ">Copy</button> </div> <p>See the <a href="https://api.rubyonrails.org/v8.0.1/classes/ActionView/Helpers/DebugHelper.html#method-i-debug"><code>debug</code> API Documentation</a> for more information.</p> </section> <hr> <footer aria-labelledby="heading-feedback" role="region"> <h2 id="heading-feedback">Feedback</h2> <p> You're encouraged to help improve the quality of this guide. </p> <p> Please contribute if you see any typos or factual errors. To get started, you can read our <a href="https://edgeguides.rubyonrails.org/contributing_to_ruby_on_rails.html#contributing-to-the-rails-documentation">documentation contributions</a> section. </p> <p> You may also find incomplete content or stuff that is not up to date. Please do add any missing documentation for main. Make sure to check <a href="https://edgeguides.rubyonrails.org">Edge Guides</a> first to verify if the issues are already fixed or not on the main branch. Check the <a href="ruby_on_rails_guides_guidelines.html">Ruby on Rails Guides Guidelines</a> for style and conventions. </p> <p> If for whatever reason you spot something to fix but cannot patch it yourself, please <a href="https://github.com/rails/rails/issues">open an issue</a>. </p> <p>And last but not least, any kind of discussion regarding Ruby on Rails documentation is very welcome on the <a href="https://discuss.rubyonrails.org/c/rubyonrails-docs">official Ruby on Rails Forum</a>. </p> </footer> </div> </article> </main> <hr class="hide" /> <footer id="complementary"> <div class="wrapper"> <p>This work is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a> License</p> <p>"Rails", "Ruby on Rails", and the Rails logo are trademarks of David Heinemeier Hansson. All rights reserved.</p> </div> </footer> <a href="#main-skip-link" class="back-to-top" data-turbo="false"><span class="visibly-hidden">Back to top</span></a> </body> </html>