Pivot Design Box

HTML Layer

執筆者:

shohei

カテゴリ:

HTML構造

HTML Living Standardに準拠したい

<html>
  <body>
<header>
<div .container>
  <img .logo>
  <nav #gNav>
  ...
  </nav>
</div>
</header>
<div .row>
<div .container #pageName>
  <main>
    <section> ... </section>
  </main>
  <article> ... </article>
  <aside .lNav >...</aside>
</div>
</div>
<footer>
  <div .container>
    <p #cr>
  </div>
</footer>
  </body>
</html>

header , footer ,
main , section , article , aside , nav

nav … navigation

#gNav … Global navigation　:No Versatility
.lNav … Local navigation　: Versatility


#mainContainer(site width , box)

header, footer, .row > .container

header, footer, .row { width : 100%;}
.container { サイトの幅 }

.container > main > section > article

.container > main , aside

main

ページに１つ

<main>
   <h1>
   <h2>
</main>

section

<section>
 <h1>...
 <h2>...
</section>

article

<article>
  <header>
  </header>
  <h1>...</h1>
</article>

投稿をさらに読み込む