HTMLで<div>の使い方がわからない

<div>要素の使いどころがいまいち分かりません

現在、ProgateでHTMLの勉強をしています。私自身、疑問点を上手く言語化できてないのですが、<div>要素の使いどころ（？）、使い方（？）がよくわからなくなりました。

例えば上記画像のようなサイトを作成したい場合に、模範解答では以下のようなコードになっています。
top-wrapperの中にcontainerが入っている構造です。

html
1<!-- 一部省略しています -->
2
3<html>
4... 
5<body>
6...
7 <div class="top-wrapper">
8    <div class="container">
9      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
10      <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
11      <a href="#" class="btn signup">新規登録はこちら</a>
12      <p>or</p>
13      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
14      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
15    </div>
16  </div>
17</body>
18</html>

ですが、私は文字列とアイコン群を別々の塊と捉え、以下のように考えました。
containerの中をさらに、top-wrapper-textとtop-wrapper-iconの２つに分割しています。

html
1 <div class="top-wrapper">
2    <div class="container">
3      <div class="top-contents-text">  <!-- 文字列部分 -->
4        <h1>LEARN TO CODE.</h1>
5        <h1>LEARN TO BE CREATIVE.</h1>
6        <p>Progateはオンラインプログラミング学習サービスです。</p>
7        <P>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
8      </div>
9      <div class="top-contents-icon">  <!-- アイコン部分 -->
10        <a class="btn signup" href="#">新規登録はこちら</a>
11        <p>or</p>
12        <a class="btn facebook" href="#"><span class="fa fa-facebook"></span>Facebookで登録</a>
13        <a class="btn twitter" href="#"><span class="fa fa-twitter"></span>Twitterで登録</a>
14      </div>
15    </div>
16  </div>

上記の模範解答ではcontainerの中にテキストやアイコンが書かれていますが、上記画像とは異なる部分を作成する際にはcontainerの中身をさらに<div>で細かく区切っており、どういう場合で<div>を使いグループ化していけばいいのかわからなくなってしまいました。

どのような区切り方でも、目標物を作成することは可能でしょうが、「なぜそういった配置なのか」といったような説明がなされないまま話が進んでいくので非常にモヤモヤとしています。一貫して<div>で細かく区切っていてくれれば、まだ納得できたのですが...

「箱の中に箱を入れていくイメージで書けばよい」、「あまり細かく<div>要素で区切るのはよろしくない」、ということは調べてみて分かったのですが、「ではどこまで箱を細かくしていいのか？」といったように、疑問の解決までには至っていません。好きに書けばいいよ、といわれるとそれまでなのですが、何か<div>を使う際の目安というか規約というかレイアウトのコツのようなものはあるのでしょうか？

ご存じの方いましたら、ご教授のほどよろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

まず、ドキュメントを参照しましょう。
<div>: コンテンツ分割要素 - HTML: HyperText Markup Language | MDN

その中にはっきりと書かれています。

<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。

つまり、文章として意味は持たせたくないが、スタイルをつける上でのグループ分けはしたい、って時などに使用する要素です。
ぶっちゃけそれ以上でもそれ以下でもなく、深く考えることはないのかな、と思います。
おそらく、Progateのカリキュラムの中で、まずは、スタイルの当て方や、クラスの付け方、性質などを学ばせようとしているのでしょう。
その先のセマンティクスな要素配置まで考えてしまうと、Progateの回答も疑問点たくさんありますしね。

さて、コードに関しては、上記の通り、Progateの回答の方も少々突っ込みどころがありますが、
質問者さんのものは致命的な間違いがあります。
それは、h1要素が連続で出現していることです。
HTML5の段では、確かにh1要素の複数出現は許可されていましたが、
それでも、アウトラインを考慮して、配置する必要がありました。
HTML5.1以降は、従来のアウトラインに準拠した、h1〜6の出現が望ましいとされています。
よって、h1要素がなんの要素もはさまずに二回出現するのは文法的に間違いです。
そこだけは、意識して今直すのが今後のコーディングの糧になるかと。

投稿2020/05/01 20:11

miyabi_pudding

総合スコア9555

退会済みユーザー

2020/05/03 13:22

ご回答ありがとうございます。この質問後も勉強を続けて、なんとなくですが使い方が分かってきたように感じます。h1要素についてはご指摘いただくまで気づいていませんでした。どうにも一度気になると納得するまで気になってしまう癖があるようで。ともかく、詳しく教えてくださりありがとうございました。

miyabi_pudding

2020/05/03 16:16 編集

> どうにも一度気になると納得するまで気になってしまう癖があるようで。プログラマーには必要な資質かと思いますよ。正しい書き方、は必ず必要になり、それって、納得するまで突き詰めることによって身に付いたりはやっぱりありますので。大事になさってください。まぁ、仕事、となれば、その細かい部分気にしてられなくなるパターンありますけどね・・・。そういう場面になったら、とにかくまずやってみて手動かしながら考える、ってのが一番てっとり早いと経験上思います。（正しい書き方が正義とは限らないって意味。特に仕事の現場では）どうか、頑張ってください。

行動規範の内容に同意します