HTML5のレイアウト構造

html5で作った場合の基本レイアウト。あくまで基本です。

ワンカラムレイアウトの基本

<body>
<div id="container">
<header>
<h1>サイト名:ロゴ</h1>
<nav>ナビゲーション</nav>
</header>
 <main role="main">
  <article>
  <h1>タイトル見出し1</h1>
   <section>
   <h2>タイトル見出しh2</h2>
   <p>本文</p>
    <section>
    <h3>タイトル見出しh3</h3>
    <p>本文</p>
    </section>
   </section>
  </article>
 </main>
<aside>カテゴリなど</aside>
<footer>フッター</footer>
</div>
</body>

サイドバーなど複数のカラムで構成されたレイアウトの場合

フルードレイアウト基本

<div id="wapper">
<header>
<h1>サイト名:ロゴ</h1>
<nav>ナビゲーション</nav>
</header>
<div id="contents">
 <main role="main">
 <article>
  <h1>タイトル見出しh1</h1>
  <section>
   <h2>タイトル見出しh2</h2>
   <p>本文</p>
    <section>
    <h3>タイトル見出しh3</h3>
    <p>本文</p>
    </section>
   </section> 
  </article>
 </main>
 <aside>カテゴリーなどのサイドバー</aside>
</div>
<footer>フッター</footer>
</div>

<article>要素は、それ単体でも成り立つセクションに使用。複数使用ができます。
<main>要素は一ページに一つだけ、そのページのメイン部分を囲います。
また、他セクションの子孫として使用してはいけない。
ただ<div >の中に<main>があるのはよいのか…?<div>は装飾用タグだからいいんじゃないか…?考察中….
<div>の中に<main>もOK。
<div>は装飾タグなので基本どこへ使っても問題はないと思います。

main 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP

大見出し要素<h1>の複数使用

htm4では、h1要素は一つのページに一つで、複数使用すると構造的にアウト。SEOでもスパム行為とみなされます。

しかしhtml5では、h1要素を複数使用することができるんです!

とはいえh1内にキーワードを乱発すると結局スパム扱いされてしまいそう…なのでキーワードの多用に注意しながら、階層ごとにあった見出しにするよう注意が必要です。

<hgroup>要素は使わない

wordpressデフォルトテーマ「twentyeleven、twentytwelve」では、見出しをグループ化する要素<hgroup>が使用されていますが…

■hgroup要素の使用例

<header>
 <hgroup>
 <h1>見出し1</h1>
 <h2>見出し2</h2>
 </hgroup>
</header>

が、新テーマ「twentythirteen」では使用されていません!
このhgroup要素は2013年4月に廃止勧告がされています。

HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除

なのでhgroupは使用は避けましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です