Coding style in tag-based languages

HTML is typically formatted to show structural containment:

<h1>Topic</h1>
   <p>Some paragraph.</p>
   <p>Next para.</p>
   <ul>
      <li>item 1</li>
      <li>item 2</li>
   </ul>

Code is typically formatted to show flow-of-control:

node = tree.append "Topic 1"
node.append "Some paragraph."
node.append "Next para."
list = tree.append "Unordered"
items.each { | i |
   list.append i
}

One reason that tag-based languages can lead to such confusing pages is that they are often formatted both ways:

<h1>Topic</h1>
   <p>Some paragraph.</p>
   <p>Next para.</p>
   <ul>
      <% items.each { | i | %>
         <li><%= i =></li>
      <% } %>
   </ul>

The purpose of formatting is to make structure apparent, not to slavishly increase the amount of whitespace in the world. Since the page is primarily the UI designer's domain, I think that flow-of-control ought not to be indented in tag-based pages:

<h1>Topic</h1>
   <p>Some paragraph.</p>
   <p>Next para.</p>
   <ul>
      <% items.each { | i | %>
      <li><%= i =></li>
      <% } %>
   </ul>

I've tried to make the difference more explicit in this image. Note how the 2nd sample, which combines indenting styles, has control-flow indenting (in blue) which I recommend eliminating:

[Update:]{style="color: #ff0000;"} A more programmer-like thought is something alone the lines of "Control-flow on a page ought to be encapsulated," but I don't think the design tools of designers are capable of rendering componentized snippets, which I think is why designers are so darned resistant to them.