Semantic markup in web apps

Design Front End Development
1

I’m curious how you guys are using semantic markup in your web apps, specifically around grid/layout related tags and forms. Take this snippet for example, using Bootstrap:

<div class="content">
  <div class="container">
    <hr class="spacer-sm" />
    <div class="heading-block">
      <h3><%= t("header.profile") %></h3>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="portlet portlet-boxed">
          <div class="portlet-header">
            <h4 class="portlet-title">
              <i class="fa fa-envelope portlet-icon"></i> 
              <%= t("user.email_address") %>
            </h4>
          </div>
          <div class="portlet-body">
            <%= simple_form_for :user do |f| %>
              <%= f.input :email, label: false, placeholder: t("user.email_address") %>
              <%= f.button :button, class: "btn btn-primary" do %>
                <%= t("button.change_email_address") %>
              <% end %>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

My preferred way of writing something like this is:

<div class="content">
  <div class="container">
    <hr class="spacer-sm" />
    <header class="heading-block">
      <h3><%= t("header.profile") %></h3>
    </header>
    <div class="row">
      <article class="col-md-6">
        <section class="portlet portlet-boxed">
          <header class="portlet-header">
            <h4 class="portlet-title">
              <i class="fa fa-envelope portlet-icon"></i> 
              <%= t("user.email_address") %>
            </h4>
          </header>
          <section class="portlet-body">
            <%= simple_form_for :user do |f| %>
              <%= f.input :email, label: false, placeholder: t("user.email_address") %>
              <%= f.button :button, class: "btn btn-primary" do %>
                <%= t("button.change_email_address") %>
              <% end %>
            <% end %>
          </section>
        </section>
      </article>
    </div>
  </div>
</div>

The changes are a little subtle, but I find that it reads a bit better. I’ve researched the various opinions folks have on tags like <section>, <article>, <aside>, etc, but I was curious as to how you guys use these in the context of web apps with lots of forms as opposed to a content-heavy marketing type site. What I don’t want to do is just start using these semantic tags for no reason.

My feeling is that it’s ok to use <div> tags for pure layout/grid related tags like containers and wrappers that have no other meaning, but try to use something more specific for the guts of those containers/wrappers. What do you guys think?

Thanks for any tips!
Joey