HTMLの枠構造について教えていただきたいです。

Question

HTMLでよくcontainerというタグをつけてからその中に要素を入れるのはなぜでしょうか？
例えば下記のようなコーディングをするときcontainerのタグがなくても<header>でくくってあるのでCSSで見た目を作ることはできると思うのですが、、、

<header>
  <div class="container">
    <div class="header-left"></div>
    <div class="header-right"></div>
  </div>
</header>

Answer 1

esindeme さんの疑問は正しいです。

HTMLの文書構造の考え方としてこのコードだけで考えるならば、
<header> の中に .container を内包している事の必要性は無いです。

考えられるとすれば、個別の装飾やレイアウト用途で挿入されたものと推測されます。

例えば<header> はウィンドウ横幅一杯の黒い背景が指定してあり、
.container にコンテンツ幅+中央寄せ白背景の指定をしてるような場合です。

header {
  width: 100%;
  background-color: #000;
}
header .container {
  width: 1024px;
  margin: 0 auto;
  background-color: #fff;
}

無理やりHTML文書構造としても正しくするならば

<header>
  <div class="title-group">
    <h1 class="site-title"></h1>
    <p class="site-description"></p>
  </div>
  <nav class="global-navigation">
    ・・・
  </nav>
</header>

のように項目に意味を与え、<nav> のような他の項目が並列することも想定している前提というならば、たとえその時点で <nav> が無くてもその<div> の存在価値もギリギリ有りになるかもしれません。

Comments

[esindeme]

例がとても分かりやすかったのでベストアンサーに選ばせていただきました。
ご回答ありがとうございます。

Answer 2

Whyという質問に対して「これだ」という回答は見つけられませんでしたが、おそらくBootstrapのcontianerクラスが元になっていると考えられます。

参考

Answer 3

containerというタグ

と質問者さんは記載していますが、タグではなく、クラス名です。

あと、恐らく聞きたいことはdivタグで括っている理由、だと思うのですが、
質問者さんがおっしゃっている通り別に囲わなくても実装はできます。

ですが そのheaderの中に それ以外にも沢山の要素が入ってきたら話は別ですよね。

多くの人は分かりやすくするため、実装しやすくするために divで囲ったりします。

Answer 4

別に厳格なルールがあるわけではないし、div.containerはなくても良いと思いますが
Bootstrapあたりだと.containerは意味づけされているようなので
作成者のクセとかフレームワークの仕様だったりじゃないですかね