headerなどの主要タグを入れ子にせず、レイアウトを中央寄せしたい

Question

前提・実現したいこと

現在webサイト制作をしているのですが、SEO対策的に、headerやmainなどの主要タグはdivで囲うことは極力避けた方がいいというご指摘をいただきました。
しかし、背景を表示するためのdivタグや、innnerなどのレイアウトを中央揃えするためのdivタグで囲う以外に、要素を中央揃えする方法が分からず、困っております。
解決方法ありましたらご回答いただけると幸いです。

該当のソースコード

  <div class="background">
    <div class="inner">
    <header class="header">
      <img src="ロゴ.png" alt="" class="logo">
      <nav class="nav">
        <ul class="ul">
          <a href="#" class="ankwer">
            <li class="ul__li ul__li--1">企業情報</li>
          </a>
          <a href="#" class="ankwer">
            <li class="ul__li ul__li--2">ニュース</li>
          </a>
          <a href="#" class="ankwer">
            <li class="ul__li ul__li--3">サービス＆製品情報</li>
          </a>
          <a href="#" class="ankwer">
            <li class="ul__li ul__li--4">お問い合わせ</li>
          </a>
        </ul>
      </nav>
    </header>
      <div class="background__image--greenbox"></div>
      <div class="background__image--graybox"></div>
      <div class="background__image--three-graybox"></div>
      <div class="background__image--big-redbox"></div>
      <div class="background__image--medium-redbox"></div>
      <div class="background__image--small-redbox"></div>
      <div class="background__image--redbox-gathering"></div>
      <div class="background__image--yellowbox"></div>
      <div class="subtitle">Light Up<br>Your<br>Science</div>
      <div class="subtitle--japanese">
        -科学を灯そう-<br>
        <span class="subtitle--japanese-lower">
        イチヨンヨンラボ
        </span>
      </div>
      <div class="induction">
        SCROLL<br>・<br>・<br>・<br>・<br>・<br>・<br>
      </div>
    </div>
  </div>

Comments

[iwamoto_takaaki]

cssを貼ったら、適切な設定を回答できるかもしれません。
あと、ここをこう書きたいけどこうしないと上手く動作しないなど再現可能になものを貼り付けてもらえると具体的な回答がえられると思います。

[Lhankor_Mhy]

CSSが提示されないと、概念的な回答しかつかないと思います。
スクリーンに対しての中央揃えであればラッパー要素は必要ないでしょうけれど、親要素の範囲で中央揃え、という話であれば、当然に親要素が必要になります。

Answer 1

headerやmainタグに対してCSSを設定すればよいだけなのでは…何かそうできない理由があるのでしょうか？

Answer 2

SEO的にOKかは知らんが、こういう事かな？？？

あとliのリンクの書き方はおかしいので直しておきました。

<style>
.background {
    background: #ccc;
}
ul.ul {
    display: inline-flex;
}
ul.ul li{
    margin-left: 10px;
    list-style: none;
}
nav.nav {
    display: block;
    margin: 0 auto;
    width: 800px;
}
.background {
    background: #ccc;
    margin-top: -65px;
    padding-top: 65px;
}
</style>
<header class="header">
  <img src="ロゴ.png" alt="" class="logo">
  <nav class="nav">
    <ul class="ul">
        <li class="ul__li ul__li--1"><a href="#" class="ankwer">企業情報</a></li>
        <li class="ul__li ul__li--2"><a href="#" class="ankwer">ニュース</a></li>
        <li class="ul__li ul__li--3"><a href="#" class="ankwer">サービス＆製品情報</a></li>
        <li class="ul__li ul__li--4"><a href="#" class="ankwer">お問い合わせ</a></li>
    </ul>
  </nav>
</header>
<div class="background">
   <div class="inner">
     <div class="background__image--greenbox"></div>
     <div class="background__image--graybox"></div>
     <div class="background__image--three-graybox"></div>
     <div class="background__image--big-redbox"></div>
     <div class="background__image--medium-redbox"></div>
     <div class="background__image--small-redbox"></div>
     <div class="background__image--redbox-gathering"></div>
     <div class="background__image--yellowbox"></div>
     <div class="subtitle">Light Up<br>Your<br>Science</div>
     <div class="subtitle--japanese">
       -科学を灯そう-<br>
       <span class="subtitle--japanese-lower">
       イチヨンヨンラボ
       </span>
     </div>
     <div class="induction">
       SCROLL<br>・<br>・<br>・<br>・<br>・<br>・<br>
     </div>
   </div>
 </div>

Comments

[AMK]

CSSの正解は1つではないので、cssでposition: fixed　TOPを０にしたり色々とやり方はあるので自分に合ったやり方を覚えよう