<header>の中に囲む要素の<div>を作る理由

Question

現在プロが作ったホームページのコードをお手本としながら、HTML/CSSの勉強をしています。
よく<header>タグの中に<div class="header-bar"></div>、<div class="wrapper"></div>のように、
囲むだけのための要素が作ってあるのを見ます。下記のようなコードです。

<header>タグの中に直接ヘッダーの中身(ロゴ、電話番号、メニューなど)を書いてはいけないのでしょうか？ 何か囲む理由があるのでしょうか？参考に見たHPのヘッダーは全て固定です。 よろしくお願いします。 ```ここに言語を入力 <header> 　　<div class="header-bar> 　　　 <h1 class="headerBar__logo"> 　 <img src="img/header/logo.png" alt="●●●●"> 　 </h1> 　 <p class="headerBar__tel"> 　 <a href="tel:●●●●-●●●-●●●"> 　 <img class="pc" src="img/header/tel.png" alt="●●●●-●●●-●●●"> 　 <img class="sp" src="img/header/tel-icon.png" alt="●●●●-●●●-●●●"> 　 </a> 　 </p> 　　</div> </header> ```

Answer 1

CSSはみていますか？

おそらく、スタイルが設定されているのではないでしょうか。

別にdivで囲う必要はありません。

ですが、そのプロの方は囲む必要があるから囲んでいます。

例えば枠線であったり、レイアウトの調整であったり。
はたまた第三者からみてここでは何をしているかをわかりやすくするためのタグであったり。

意図なくして書いているわけではありません。（私はその人ではないので真意はわかりませんが。）

HTMLとCSSのお勉強をしているなら、HTMLだけではなくきちんとCSSも確認しましょう。

Comments

[退会済みユーザー]

迅速なご回答ありがとうございます。CSSは確認しましたが、理由が分かりませんでした。
下記のようなコードです。
<header>でpaddingで高さを作って、<div>でもう一回heightで高さを設定する意味が
現在分かっていません。作っていたら理由が分かるかもしれませんので、続けて作業していきます。
<div>で囲む決まりがないと分かって良かったです。ありがとうございます。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

header {
padding-top: 86px;
}

div.header-bar {
width:100%;
height: 86px;
position: fixed; top:0;
display: flex;
align-items: center;
padding: 0 40px;
background-color: #fff;
}

@media(max-width: 767px){
header{
padding-top: 60px;
}

div.header-bar{
height: 60px;
padding: 0 10px;
}
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Answer 2

<header>タグの中に直接ヘッダーの中身(ロゴ、電話番号、メニューなど)を書いてはいけないのでしょうか？

別に構いません。

何か囲む理由があるのでしょうか？

囲んでいる<div class="header-bar"></div>や<div class="wrapper"></div>（あるいはその内側にある要素）に対してCSSをかけてある、ということが考えられます。

Comments

[退会済みユーザー]

迅速なご回答ありがとうございます。追加でお聞きしたいのですが、<header>と<div class="header-bar">で一緒にまとめて設定してはいけないCSSがあるのですかね？下記のようなコードですが、まとめて
<header>で設定してもいいのでしょうか？あまり分ける必要性を感じなかったので。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

header {
padding-top: 86px;
}

div.header-bar {
width:100%;
height: 86px;
position: fixed; top:0;
display: flex;
align-items: center;
padding: 0 40px;
background-color: #fff;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

以上です。よろしくお願い致します。

[退会済みユーザー]

すみません、メディアクエリも設定してあったので追加致します。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

@media(max-width: 767px){
header{
padding-top: 60px;
}

div.header-bar{
height: 60px;
padding: 0 10px;
}
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

以上です。<header>でpaddingで高さを作って、<div>でもう一回heightで高さを設定する意味が
現在わかっていません。作っていたら理由が分かるかもしれませんので、続けて作業していきます。
<div>で囲む決まりがないと分かって良かったです。ありがとうございます。

Answer 3

headerとdivの位置や依存関係次第ですね

<style>
header{display:flex;background-Color:gray;}
header div{margin:auto;width:100px;background-Color:yellow;}
</style>
<header>
<div class="header-bar">hoge</div>
</header>

Comments

[退会済みユーザー]

迅速なご回答ありがとうございます。位置などの関係によってタグを分ける必要があるということですかね？CSSなども確認しましたが、原因が分かりませんでした。以下のコードです。
<header>でpaddingで高さを作って、<div>でもう一回heightで高さを設定する意味が
現在分かっていません。作っていたら理由が分かるかもしれませんので、続けて作業していきます。
<div>で囲む決まりがないと分かって良かったです。ありがとうございます。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

header {
padding-top: 86px;
}

div.header-bar {
width:100%;
height: 86px;
position: fixed; top:0;
display: flex;
align-items: center;
padding: 0 40px;
background-color: #fff;
}

@media(max-width: 767px){
header{
padding-top: 60px;
}

div.header-bar{
height: 60px;
padding: 0 10px;
}
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~