コーディングの際のマークアップ方法(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>
回答2件
あなたの回答
tips
プレビュー