初めてHTML5でコーディングにする際に気をつけるべき事 - グレヌデサ La graine du dessin
Coding

初めてHTML5でコーディングにする際に気をつけるべき事

近頃HTML5が本格的に導入される傾向が高まりつつあります。
HTML5対応が促進される理由は、XHTMLの時よりもセマンティクス*な文章構造を意識してコーディングをすることで、
データ自身に的確な意味をもたせる事が可能になりました。
それにより、サイト自身の情報の精度が高まり、検索結果等に正しい情報が反映されていくことになります。

*セマンティクス についてはこちらをご参照ください
エンタープライズ:Gartner Column:第11回 そもそも「セマンティクス」とは何だろう?
http://www.itmedia.co.jp/enterprise/0108/20/01082088.html

HTML5で新たなに追加されたよく使用する要素の注意点をご紹介していきます。

section要素はdivタグと同じような使い方をしない

sectionタグはdivなど、要素を大枠で括って使用していたものと置き換えるのではなく、
見出しを含む文章や章、段落などをひと塊として扱います。

間違い例
<section>
 <div id="header">
  <h1>sitename</h1>
 </div>
 <!--****//header ****-->

 <div id="contentsWrap">
  contents
 </div>
 <!--****//contentsWrap ****-->

 <div id="footer">
  footer
 </div>
 <!--****//footer ****-->
</section>

上記のように、全てをsectionタグで梱包してはいけません。

正しい例
<div id="wrapper">
 <div id="header">
  <h1>sitename</h1>
 </div>
 <!--****//header ****-->

 <div id="main">
  <section>
   contents1
  </section>

  <section>
   contents2
  </section>
 </div>
 <!--****//main ****-->

 <div id="footer">
  footer
 </div>
 <!--****//footer ****-->
</div>

情報を細分化し、以下のようにmainタグ内生成し、要素ごとに区切って使う事が望ましいです。
なお、sectionタグ内に見出し要素がない場合はarticleタグ、重要でない要素にはasideと使いわけます。

header要素、hgroup要素は必要な場合のみ使用する

headerは各ページの上部に付けるだけではなく、
各要素の見出し、イントロダクション、ナビゲーションなど、
情報の導入部分や誘導部分との梱包として使用する事が望ましいタグです。
また、hgroupも見出し要素に使用するのですが、
こちらは要素ごとに対し小見出しやキャッチフレーズ等が複数ある場合、
それらをひと塊として扱うために使用します。

header間違い例
<section>
 <header>
  <h1>pagename</h1>
 </header>
 <p>read</p>
</section>
<!--****//header ****-->

sectionタグ内でアウトラインが生成できており、尚且つ見出し要素が一つしかありませんので、
この場合headerタグは必要ありません。

header正しい例
<section>
 <h1>pagename</h1>
 <p>read</p>
</section>
<!--****//header ****-->


hgroup間違い例
<header>
 <hgroup>
  <h1>pagename</h1>
  <h2>promoword</h2>
 </hgroup>
</header>
<!--****//header ****-->

header内にhgroup要素しかない場合は、headerタグを使用しなくてもいいです。

hgroup正しい例
<hgroup>
 <h1>pagename</h1>
 <h2>promoword</h2>
</hgroup>
<!--****//header ****-->

header要素、hgroup要素は、同じ意味合いのタグで囲まれていれば生成せずに使用することが望ましいとされています。

nav要素

nav要素にはサイト内の誘導するナビゲーション要素が入りますが、
全てのナビゲーション要素をnavタグで囲むことは望ましくありません。
特にグローバルナビゲーションやサイト内検索、ページ内リンクなど、
サイトにとって主要なものに関してはnav要素を使い、
サイトを分割するページャーやブログのタグなど、
優先度の低いものには使用しないとする方がよいとされています。

navタグを使用する際には、この要素がこのサイトにとって主要となるナビゲーションか?
navタグで囲む物がsectionタグ等で梱包できないか?
などを基準にし設置しましょう。


今回はよく使用するHTML5の一部だけのご紹介ですが、
よりサイト内の情報に気をつけてマークアップする事が重要です。

(kazuki)
New Entries
TOP
Old Entries

Webトレンド情報局とは

クリエイティブグループスタッフがお送りする、Webデザイナーのための知識とTIPS。 PhotoShopの便利な豆知識や、CSSのお困り解決、デザイン概論などなど。
【隔週木曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive