反応性の高い意味HTML5ページを作成するにはどうすればよいですか？ （フレームワークで）

Question

私はブログのために素敵なページを作ろうとしていますが、私はそれが最も適切なHTML5に準拠し、モバイル/ SEOフレンドリーであることを願っています。

私はこのようになり、適切なHTML5のページであると信じるものを作っています

<!-- Header --> 
<header> 
    <h1>Title of the page</h1> 
    <h2>Subtitle of the page</h2> 
    <!-- nav --> 
    <nav> 
     <ul> 
      <li><a href="#">Page one</a></li> 
      <li><a href="#">Page two 2</a></li> 
      <li><a href="#">Page three 3</a></li> 
      <li><a href="#">Page four 4</a></li> 
     </ul> 
    </nav> 
</header> 

<!-- last articles --> 
<section> 

    <article> 
     <header> 
      <h2>Article title</h2> 
     </header> 

     Content of the article. 

     <aside> 
      Related post or other links. 
     </aside> 

     <footer> 
      <a href="#">Read the full article.</a> 
      <ul> 
       <li><a href="#">Share on Facebook</a></li> 
       <li><a href="#">Tweet it</a></li> 
      </ul> 
     </footer> 
    </article> 

    <article> 
     <header> 
      <h2>Article title</h2> 
     </header> 

     Content of the article. 

     <aside> 
      Related post or other links. 
     </aside> 

     <footer> 
      <a href="#">Read the full article.</a> 
      <ul> 
       <li><a href="#">Share on Facebook</a></li> 
       <li><a href="#">Tweet it</a></li> 
      </ul> 
     </footer> 
    </article> 

</section> 


<!-- sidebar --> 

<aside> 

    <h2>Sidebar</h2> 

    <h3>Social media</h3> 
    <ul> 
     <li><a href="#">Facebook account</a></li> 
     <li><a href="#">Twitter account</a></li> 
     <li><a href="#">Github account</a></li> 
    </ul> 

    <h3>Last comments</h3> 
    <nav> 
     <ul> 
      <li><a href="#">Comment 1</a></li> 
      <li><a href="#">Comment 2</a></li> 
      <li><a href="#">Comment 3</a></li> 
     </ul> 
    </nav> 

</aside> 

<!-- footer --> 
<footer> 
    © 1264-2016 - Handsome coder (me) industry 
</footer> 

は、私はあなたについて知らないが、私はそれがどのように見えると思いますHTML5タグの適切な意味的使用。

今、私は応答性があり、2つのオプションが提示されたいと思います。

1. 私は（おそらくいくつかのブラウザで起こってから奇妙なものを防ぐためにnormalize.cssを使用。）自分ですべてのCSSを行う

2. 私は、たとえばスケルトンのために、軽量なフレームワークを使用します。

どちらも、ページの特定の部分をラップするクラスのだけでなく、divタグのおそらく使用の使用を意味するだろうし、私はそれは私がそれを行うべきかであるか分からない...

私はdivタグ、特に10年前のolのように見える入れ子divの過剰使用を避けようとしています。

私はHTML5 Boilerplateを使用しようとしましたが、外観がかなり単純なメインページのソースコードを見て、divのdivのdivをdivのdivに見出しました。どういう意味？

したがって、適切で意味のあるHTML5ページを作成するためにはどうすればよいと思いますか？例はありますか？

私を読んでいただきありがとうございます。

よろしくお願いいたします。

Answer 1

私が理解する限り、シンプルでセマンティックで軽量なページを作成する方法が必要です（これは私たちの目標です）。

divを追加/ネストすることは犯罪ではありません。 div自体は空のコンテナであり、全体的なHTML文書構造との関連性はほとんどありません。好きなだけdivを使用できます。 HTML/5 Semanticsを学び、あなたのページが（ボットによって）読みやすく記述されるように新しいタグを組み合わせる方法を学びます。

よく構造化された単純なページの例。グリッドシステムについては（Google画像検索）

- 私のアドバイスは、SASSを学び、Neatと呼ばれるBourbon.io'sグリッドシステムとそれを組み合わせることです。それはかなり簡単で理解しやすく/実装するのが簡単です。