HTMLのマークアップの方法について #HTML

HTMLマークアップの目的

・ブラウザに適切に認識される（SEOとか？）
・理解しやすい（他のプログラマーさんや、見返したとき用）
・修正がしやすい。

いろんなサイトのマークアップを見ていると、違いがあったので、自分なりに違いを考察してみます。今回AサイトとBサイトを見比べていたのですが、

Aサイト
特徴：最低限のhtml要素 + 構造化タグにclass/idを振る。

<html>
  <body>
    <header>...</header>
      <section class="frame">...</section>
    <footer>...</footer>
  </body>
</html>

Bサイト
特徴：構造化タグ頻繁に使用 + デザイン用のdiv等のタグをつくり、そこにid/classを振る。

<html>
  <body>
    <header>...</header>
      <main>...</main>
    <footer>...</footer>
  </body>
</html>

という特徴があったので、自分も、理解しやすいように、、

・構造化タグ使用。=>header、main、aside、nav、article 、section、h1等。
・デザイン用に別途タグを作る => 必要なときは。

としていこうと思います。
デザイン用に別途タグを作る理由は、構造に比べデザインの方が寿命が短く頻繁に更新される可能性が高いので、別に分けると良いとされています。（ただ自分でもしっかり例を踏まえて説明できるほどわかっていない。）

わかりやすい内容は、こちらの記事に書いています。↓
http://qiita.com/yuku_t/items/726a67d8ae74eea2540a