メインビジュアルの下にグローバルナビを配置する場合の構造

コーディングの際のマークアップ方法（htmlの構造）について質問です。
質問の説明が慣れておらず申し訳ありません。

・PC版ではメインビジュアル（h1とキャッチコピーあり）の下に、グローバルナビが配置
・SP版及び下層ページでは、グローバルナビが一番上

というデザインを実現する場合、

ソースコード

html
1<header>
2　<nav>ナビ</nav>
3</header>
4<main>
5　<section>メインビジュアル</section>
6　<section>コンテンツ</section>
7</main>
8<footer>フッター</footer>

という順番で、メインビジュアルを<main>に入れて、位置の調整をしますか？

もしくは、下記構成にしても問題ないでしょうか？

ソースコード

html
1<section>メインビジュアルの内容</section>
2<header>グローバルナビ</header>
3<main>
4　<section>コンテンツ</section>
5　<section>コンテンツ</section>
6</main>
7<footer>フッター</footer>

出来ればSEOにも問題がないようにマークアップしたいのですが、
調べてみても良い方法がわからず質問しました。

補足情報

・<main>タグは、必須ではない、入れ子になっていなければ複数使用も問題ないようですが、
やはりある方がseo的に良いのかと悩んでいます。
・<header>タグにメインビジュアルまで入れる事は推奨されていないでしょうか？
・参考になる具体的なサイトを見つけられなかったので、メインビジュアルの下に、グローバルナビが配置されているサイトを（ここに記載しても大丈夫であれば）教えていただけるだけでも助かります。

修正ソースコード

html
1<header>
2　<div>
3　　<figure><img src="メイン画像" alt="メイン画像"></figure>
4　　<h1>サイトタイトル</h1>
5　　<p>文章</p>　　
6　</div>
7　<nav>
8　　<ul>
9　　　<li><a href="#1">1</a></li>
10　　　<li><a href="#2">2</a></li>
11　　　<li><a href="#3">3</a></li>
12　　</ul>
13　</nav>
14</header>
15<main>
16  <section>
17      <h2>見出し</h2>
18　　<p>コンテンツ</p>
19  </section>
20  <section>
21      <h2>見出し</h2>
22      <p>コンテンツ</p>
23  </section>
24</main>

yambejp

2023/09/04 03:13

画像で図示できますか？

f_e_beginner

2023/09/04 03:43 編集

回答に図示をアップしたのでご確認いただきたいです。

Lhankor_Mhy

2023/09/04 05:05

回答に図を示すのはあまりよくないかと思います。質問を編集すると、コメントをした人に通知が行くようにできます。

f_e_beginner

2023/09/04 05:23

ありがとうございます。編集しました。

Lhankor_Mhy

2023/09/04 08:14

編集ありがとうございます。

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

回答2件

ベストアンサー

私なら、意味論を考えるとheaderにメインビジュアルとナビを入れてしまうと思います。
一方で、メインビジュアルの下にナビを置くとなると、スティッキーヘッダにしないと不便なような気がしますので、その辺りを考慮した構造にするかもしれません。
あまり、正解みたいなものはなさそうに思います。

メインビジュアルの下に、グローバルナビが配置されているサイトを（ここに記載しても大丈夫であれば）教えていただけるだけでも助かります

こちらはどうでしょうか。
Cleverbird Creative - Award Winning Chicago Digital Design Agency

投稿2023/09/04 05:04

Lhankor_Mhy

総合スコア37444

f_e_beginner

2023/09/04 07:38

ありがとうございます。正解はないという事で、人によってやり方が違うという事ですね。 headerにメインビジュアルも入れてしまっても問題ないのでしたら、そうしたいと思います。

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

headerが全体のヘッダーとして想定するのであれば変にsectionの後に置かないほうがよいでしょう。メインビジュアルのロゴ用のsecitionであればheaderに含む方が現実的かもしれません。またナビはnavで明示的に管理するほうが楽だと思います。

HTML
1<header>
2<figure><img src="メイン画像" alt="メイン画像"></figure>
3<nav>
4<ul>
5<li><a href="#1">1</a></li>
6<li><a href="#2">2</a></li>
7<li><a href="#3">3</a></li>
8</nav>
9</header>
10<main>
11  <section>
12    <p>コンテンツ</p>
13  </section>
14  <section>
15    <p>コンテンツ</p>
16  </section>
17</main>