What is the best practice when backtracking ERB management structures in HTML markup?

Question

When you write ERB control structures in HTML markup, is it better to indent to make ERB logic clearer or to indent HTML correctly?

eg.

<ul> <li>Entries</li> <% entries.each do |entry| %> <li><%= entry.title %></li> <% end %> </ul> 

against

 <ul> <li>Entries</li> <% entries.each do |entry| %> <li><%= entry.title %></li> <% end %> </ul> 

Answer 1

This is a taste-based preference, but I would go with an indent that makes the code easier to read, since one where more of your brain cells are consumed. For me, this is the second option, since for me it is more obvious that there is a loop there, and that the loop is inside the list, and not just a few simple old unresolved <li> tags.

This quaternary (can you say that?) Is true when you think about all the things that can happen with the markup between your code and the answer: have you ever tried to correctly guess the indentation of partial rendering? This is largely impossible by definition. How about reducing your markup?

HTML indentation really matters if you spend a lot of time reading your HTML page, but in practice I only look at the HTML pages of my pages in browser developer tools, which in any case automatically do some markup cleanup.