That "good idea" has a name "tag soup".

But even you can add some non-semantic DOM elements...

What if you have

    <ol>
      <li>first</li>
      <li>second</li>
      <li>third</li>
    </ol>

And you want to replace them in two,three,etc. aligned columns (depending on view size), like these:

   @media handheld {
      ul { flow:vertical; }
   } 

   @media ... {
      ul { flow:row(li,li); } // two columns
   } 

   @media ... {
      ul { flow:row(li,li,li); } // three columns
   }